<!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="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>