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