<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="move.js" >
function getByClass(oparent, sClass)
{
var aEle = oparent.getElementsByTagName('*');
var aResult = [];
for(var i=0; i<aEle.Length;i++)
{
if(aEle[i].className==sClass)
{
aResult.push(aEle[i]);
}
}
return aResult;
}
window.onload = function () {
var oDiv = document.getElementById('playimages');
var oBtnPrev = getByClass(oDiv, 'prev')[0];
var oBtnNext = getByClass(oDiv, 'next')[0];
var oMarkLeft = getByClass(oDiv, 'mark_left')[0];
var oMarkRight = getByClass(oDiv, 'mark_right')[0];
var oDivSmall = getByClass(oDiv, 'small_pic')[0];
var oUiSmall = oDivSmall.getElementsByTagName('ul')[0];
var aLiSmall = oDivSmall.getElementsByTagName('li');
var oUlBig = getByClass(oDiv, 'big_pic')[0];
var aLiBig = oUiBig.getElementsByTagName('li');
var nowZIndex = 2;
var now = 0;
oUiSmall.style.width = aLiSmall.length * aLiSmall[0].offsetWidth + 'px';
//左右按钮
oBtnPrev.onmouseover = oMarkLeft.onmouseover = function () {
startMove(oBtnPrev, 'opacity', 100);
};
oBtnPrev.onmouseout = oMarkLeft.onmouseout = function () {
startMove(oBtnPrev, 'opacity', 0);
};
oBtnNext.onmouseover = oMarkRight.onmouseover = function () {
startMove(oBtnNext, 'opacity', 100);
};
oBtnNext.onmouseout = oMarkRight.onmouseout = function () {
startMove(oBtnNext, 'opacity', 0);
};
//大图切换
for (var i = 0; i < aLiSmall.length; i++) {
aLiSmall[i].index = i;
aLiSmall[i].onclick = function () {
if (this.index == now) return;
now = this.index;
tab();
};
aLiSmall[i].onmouseover = function () {
startMove(this, 'opacity', 100);
};
aLiSmall[i].onmouseout = function () {
if (this.index != now) {
startMove(this, 'opacity', 60);
}
};
}
function tab()
{
aLiBig[now].style.zIndex = nowZIndex++;
for (var i = 0; i < aLiSmall.length; i++) {
startMove(aLiSmall[i], 'opacity', 60);
}
startMove(aLiSmall[now], 'opacity', 100);
aLiBig[now].style.height = 0;
startMove(aLiBig[now], 'height', 320);
if (now == 0)
{
startMove(oUiSmall, 'left', 0);
}
else if (now == aLiSmall.length - 1)
{
startMove(oUiSmall, 'left', -(now - 2) * aLiSmall[0].offsetWidth);
}
else
{
startMove(oUiSmall, 'left', -(now - 1) * aLiSmall[0].offsetWidth);
}
}
oBtnPrev.onclick = function () {
now--;
if(now==-1)
{
now = aLiSmall.length - 1;
}
tab();
};
oBtnNext.onclick = function () {
now++;
if(now==aLiSmall.length)
{
now = 0;
}
tab();
};
var timer=setInterval(oBtnNext.onclick, 2000);
oDiv.onmouseover = function () {
clearInterval(timer);
};
oDiv.onmouseout = function () {
timer = setInterval(oBtnNext.onclick, 2000);
};
};
</script>
</head>
<body>
<div id="playimages" class="play">
<ul class="big_pic">
<div class="prev"></div>
<div class="new"></div>
<div class="text">加载图片说明......</div>
<div class="length">计算图片数量......</div>
<a class="mark_left" href="javascipt:;"></a>
<a class="mark_right" href="javascipt:;"></a>
<div class="bg"></div>
<li style="z-index:1;"><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/5.jpg" /></li>
<li><img src="images/6.jpg" /></li>
</ul>
<div class="small_pic">
<ul style="width:390px;">
<li style="filter:100; opacity:1;"><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/5.jpg" /></li>
<li><img src="images/6.jpg" /></li>
</ul>
</div>
</div>
</body>
</html>
