<!doctype html><html><head><meta charset="utf-8"><title>略图左右切换</title><link type="text/css" href="css/index.css" rel="stylesheet"/><script src="js/startMove.js"></script><script> function GetByClass(oParent,sClass){ var aEle=oParent.getElementsByTagName('*'); var aResult=[]; for(i=0;i<aEle.length;i++){ if(aEle[i].className==sClass){ aResult.push(aEle[i]); } }; return aResult; }; window.onload=function (){ //变量： var oDiv=document.getElementById('box_play'); 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 aLiSmall=oDivSmall.getElementsByTagName('li'); var oUlBig=GetByClass(oDiv,'ul_pic')[0]; var aLiBig=oUlBig.getElementsByTagName('li'); var nowZindex=2; //鼠标移出移入： oBtnPrev.onmouseover=function (){ move(oMarkLeft,'opacity',100); }; oBtnPrev.onmouseout=function (){ move(oMarkLeft,'opacity',0); }; oBtnNext.onmouseover=function (){ move(oMarkRight,'opacity',100); }; oBtnNext.onmouseout=function (){ move(oMarkRight,'opacity',0); }; //大图切换： for(i=0;i<aLiSmall.length;i++){ aLiSmall.index=i; aLiSmall[i].onclick=function (){ aLiBig[this.index].style.zIndex=nowZindex++; }; }; }; </script></head><body> <div class="pic_play" id="box_play"> <div class="prev"><a class="mark_left" href="javascript:;"><img src="images/prevBtnTop.png"/></a></div> <div class="next"><a class="mark_right" href="javascript:;"><img src="images/nextBtnTop.png"/></a></div> <div class="big_pic"> <ul class="ul_pic"> <li style="z-index: 1;"><a href="#"><img src="images/1.jpg" ></a><span class="sp_left">周星驰拍《西游·降魔篇》时，半夜会来吃饭，点一份干炒牛河。</span><span class="sp_right">1/10</span></li> <li><a href="#"><img src="images/2.jpg" ></a><span class="sp_left">周星驰拍《西游·降魔篇》时，半夜会来吃饭，点一份干炒牛河。</span><span class="sp_right">2/10</span></li> <li><a href="#"><img src="images/3.jpg" ></a><span class="sp_left">周星驰拍《西游·降魔篇》时，半夜会来吃饭，点一份干炒牛河。</span><span class="sp_right">3/10</span></li> <li><a href="#"><img src="images/4.jpg" ></a><span class="sp_left">周星驰拍《西游·降魔篇》时，半夜会来吃饭，点一份干炒牛河。</span><span class="sp_right">4/10</span></li> <li><a href="#"><img src="images/5.jpg" ></a><span class="sp_left">周星驰拍《西游·降魔篇》时，半夜会来吃饭，点一份干炒牛河。</span><span class="sp_right">5/10</span></li> <li><a href="#"><img src="images/6.jpg" ></a><span class="sp_left">周星驰拍《西游·降魔篇》时，半夜会来吃饭，点一份干炒牛河。</span><span class="sp_right">6/10</span></li> <li><a href="#"><img src="images/7.jpg" ></a><span class="sp_left">周星驰拍《西游·降魔篇》时，半夜会来吃饭，点一份干炒牛河。</span><span class="sp_right">7/10</span></li> <li><a href="#"><img src="images/8.jpg" ></a><span class="sp_left">周星驰拍《西游·降魔篇》时，半夜会来吃饭，点一份干炒牛河。</span><span class="sp_right">8/10</span></li> <li><a href="#"><img src="images/9.jpg" ></a><span class="sp_left">周星驰拍《西游·降魔篇》时，半夜会来吃饭，点一份干炒牛河。</span><span class="sp_right">9/10</span></li> <li><a href="#"><img src="images/10.jpg" ></a><span class="sp_left">周星驰拍《西游·降魔篇》时，半夜会来吃饭，点一份干炒牛河。</span><span class="sp_right">10/10</span></li> </ul> </div> <div class="small_pic"> <ul> <li><a href="#"><img src="images/1.jpg" ></a></li> <li><a href="#"><img src="images/2.jpg" ></a></li> <li><a href="#"><img src="images/3.jpg" ></a></li> <li><a href="#"><img src="images/4.jpg" ></a></li> <li><a href="#"><img src="images/5.jpg" ></a></li> <li><a href="#"><img src="images/6.jpg" ></a></li> <li><a href="#"><img src="images/7.jpg" ></a></li> <li><a href="#"><img src="images/8.jpg" ></a></li> <li><a href="#"><img src="images/9.jpg" ></a></li> <li><a href="#"><img src="images/10.jpg" ></a></li> </ul> </div> </div></body></html>
添加回答
举报
0/150
提交
取消