14.js仿flash图片轮播练习；
通过getByClass获取各所需元素；
function getByClass(oParent,sClass){
var aEle=oParent.getElementsByTagName('*');
var arr=[];
for(var i=0;i<aEle.length;i++){
if(aEle[i].className == sClass){
arr.push(aEle[i]);
}
}
return arr;
}
编写轮播运动大致步骤：
1，左右箭头隐藏，显示；
2，点击小图，设置now,当now等于小图当前序号，用return阻止下面运动执行，如果不等于，使now等于当前序号，并使对应大图z-index大于其余图片，并高度变为0，从上到下慢慢展现大图（用startMove()缓冲运动框架）；
3，for遍历小图，使每一张小图的opacity都等于60；然后将当前小图opacity设置为100；
4，点击小图，小图左右移动，用startMove函数，分3部分讨论：当小图是第一张时，小图Ul左边的距离为0,；是最后一张时，左边距离为跟倒数第二张情况一样，其余小图时，左边距离是aLiSmall[0].offsetWidth*（now-1）+'px';2,3,4,三步可封装成tab()函数，以便调用；(now为当前小图的序号)
5，移入移出小图透明度变化，移出时，this.index!=now.才改变opacity为60；
6，左右按钮移动小图，分别用now--,now++控制小图；
7var timer=setInterval(oBtnPrev.onclick,2000);自动播放，调用的是oBtnPrev.onclick函数；鼠标移入div运动停止清楚定时器，移出div运动继续；
JS:
<script> function getByClass(oParent,sClass){ var aEle=oParent.getElementsByTagName('*'); var arr=[]; for(var i=0;i<aEle.length;i++){ if(aEle[i].className == sClass){ arr.push(aEle[i]); } } return arr; } window.onload=function(){ var oDiv=document.getElementById('playimages'); var oBtnPrev=getByClass(oDiv,'prev')[0]; var oBtnNext=getByClass(oDiv,'next')[0]; var oALeft=getByClass(oDiv,'mark_left')[0]; var oARight=getByClass(oDiv,'mark_right')[0]; var oUlBig=getByClass(oDiv,'big_pic')[0]; var aLiBig=oUlBig.getElementsByTagName('li'); var oDivSmall=getByClass(oDiv,'small_pic')[0]; var oUlSmall=oDivSmall.getElementsByTagName('ul')[0]; var aLiSmall=oUlSmall.getElementsByTagName('li'); var nowZIndex=2; var now=0; oUlSmall.style.width=aLiSmall[0].offsetWidth*aLiSmall.length+'px'; //左右按钮隐藏出现； oBtnPrev.onmouseover=oALeft.onmouseover=function(){ startMove(oBtnPrev,'opacity',100); } oBtnPrev.onmouseout=oALeft.onmouseout=function(){ startMove(oBtnPrev,'opacity',0); } oBtnNext.onmouseover=oARight.onmouseover=function(){ startMove(oBtnNext,'opacity',100); } oBtnNext.onmouseout=oARight.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++; aLiBig[now].style.height=0; startMove(aLiBig[now],'height',320); //小图透明度变化； for(var i=0;i<aLiSmall.length;i++) { startMove(aLiSmall[i],'opacity',60); } startMove(aLiSmall[now],'opacity',100); //小图左右移动； if(now==0) { startMove(oUlSmall,'left',0); }else if(now == (aLiSmall.length-1)) { startMove(oUlSmall,'left',-aLiSmall[0].offsetWidth*(now-2)); }else { startMove(oUlSmall,'left',-aLiSmall[0].offsetWidth*(now-1)); } } //左右箭头移动小图； 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(oBtnPrev.onclick,2000); //移入暂停播放，移出继续； oDiv.onmouseover=function(){ clearInterval(timer); } oDiv.onmouseout=function(){ timer=setInterval(oBtnPrev.onclick,2000); } } </script>
HTML:
<body> <div id="playimages" class="play"> <ul class="big_pic"> <div class="prev"></div> <div class="next"></div> <div class="text">加载图片说明……</div> <div class="length">计算图片数量……</div> <a class="mark_left" href="javascript:;"></a> <a class="mark_right" href="javascript:;"></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>
