JS仿Flash图片切换效果
效果：1、上面大图鼠标移到左边就过渡显示左边的按钮，鼠标移到右边就过渡显示右边的按钮。2、点击下方缩略图时大图就切换为相应的并有一个拉窗帘的效果。3、缩略图有透明度，鼠标移入缩略图就不透明。4、按大图按钮切换图片，缩略图会相应切换。5、自动播放，当图片播放到最后一张时自动返回从第一张开始。
实现思路：
一、大图左右按钮：
1、在大图上弄2个遮罩层，opacity透明度设置为0，当鼠标移出左边或者右边的运动框架时，通过运动框架使按钮opacity从0变为100，鼠标移出时就把opacity从100变为0
2、按钮opacity透明度设置为0，鼠标移出按钮时通过运动框架使按钮opacity从0变为100，鼠标移出时就把opacity从100变为0
二、点击缩略图切换到相应大图，并带有运动状态，从上往下的拉下来。
1、for循环给每个缩略图LI加上点击事件，给每个缩略图都添加一个自定义属性index oLiSmall[i].index=i，给大图LI也添加i，这样就能捕抓到当前缩略图对应的大图。当点击缩略图时把相应大图的z-index提高一级。
2、从上往下拉，把当前LI的高度设置为0 aLiBig[this.index].style.height=0; 点击的时候调用运动框架把当前LI高度设置为图片高度320
3、记录当前是第几张图片，如果已经点击过该图片，重复点击不起作用。定义一个函数now=0；用if判断当前图片的index是否等于now，如果等于now就重复点击吧起作用。if(this.index==now) return; 如果当前图片index不等于now，就把index赋给now，再次执行判断。如此类推就能对所有缩略图起到防止重复点击。
三、鼠标移入缩略图变为不透明，移出变为半透明，当前缩略一直是透明，鼠标移入移出不起作用。
1、调用运动框架鼠标移入把opacity变为100，鼠标输出把opacity变为60
2、for循环把所有缩略图LI的opacity设置为60，当前图片的opacity设置为100
3、在第1部的鼠标移出加个if判断，如果不是当前缩略图，鼠标移出缩略图才变为半透明，是当前缩略图就不变为半透明
四、点击大图的上一张按钮下一张按钮切换图片，缩略图的透明半透明作用还在。
1、点击下一张按钮时，now++切换到下一张，如果到达最后一张，就把now设为0，切换到第一张
2、点击上一张按钮时，now--切换到上一张，如果已经超出了，就把now设置为图片数量减1 aLiSmall.length-1
五、点击上一张下一张按钮缩略图跟随滚动，滚动的就是ul的left
1、当点击第0张的时候，UL的left还是0，点击第1张的时候UL的left还是0，当点击第2张图片的时候UL的left是滚动了一个LI的宽度，所以得出UL的left等于 -(n-1)*aLiSmall[0].offsetWidth
2、当缩略图滚动到第一张图的时候，把UL的left设置为0，这样就到了第一张图片再点击图片也不会滚动
3、当缩略图滚动到最后一张的时候，把UL的left设置为-(now-2)*aLiSmall[0].offsetWidth
4、还没到第一张和最后一张时，就把UL的left设置为 -(now-1)*aLiSmall[0].offsetWidth
完整代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>仿FLASH的图片轮换效果 —— www.zhinengshe.com 智能社</title> <link rel="stylesheet" type="text/css" href="zns_style.css"> <script type="text/javascript" src="baseCommon.js"></script> <script> 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 oUlSmall=oDivSmall.getElementsByTagName('ul')[0]; var aLiSmall=oDivSmall.getElementsByTagName('li'); var oUlBig=getByClass(oDiv, 'big_pic')[0]; var aLiBig=oUlBig.getElementsByTagName('li'); var nowZIndex=2; var now=0; oUlSmall.style.width=aLiSmall.length*aLiSmall[0].offsetWidth+'px'; //大图左右按钮 oBtnPrev.onmouseover=oMarkLeft.onmouseover=function() //prev按钮和左边遮罩层鼠标移入就改变透明度另其显示 { startMove(oBtnPrev,'opacity',100); }; oBtnPrev.onmouseout=oMarkLeft.onmouseout=function() //prev按钮和左边遮罩层鼠标移出就改变透明度另其隐藏 { startMove(oBtnPrev,'opacity',0); }; oBtnNext.onmouseover=oMarkRight.onmouseover=function() //next按钮和右边遮罩层鼠标移入就改变透明度另其显示 { startMove(oBtnNext,'opacity',100); }; oBtnNext.onmouseout=oMarkRight.onmouseout=function() //next按钮和右边遮罩层鼠标移出就改变透明度另其隐藏 { startMove(oBtnNext,'opacity',0); }; //缩略图切换 for(var i=0;i<aLiSmall.length;i++) //循环历遍所有缩略图的LI { aLiSmall[i].index=i; //给LI添加自定义属性index aLiSmall[i].onclick=function() //每个LI添加点击事件 { if(this.index==now) return; //如果当前图片的index等于now 就证明当前图片是第0张，就不执行后面的代码 now=this.index; //如果当前图片的index不等于now，就把index的值赋给now。例如现在的index为1，就把1赋给now，再次执行if语句，如果当前图片是第一张就不执行后面代码，防止重复点击。 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++; //[this.index]可以看作是i,这样缩略图LI和大图LI就能对得上了。当点击缩略图时抓取到相应的大图并把该大图的zIndex提升一层以显示出来 for(var i=0;i<aLiSmall.length;i++) { startMove(aLiSmall[i],'opacity',60); //把所有缩略图设置为半透明 }; startMove(aLiSmall[now],'opacity',100); //当前缩略图设置为不透明 aLiBig[now].style.height=0; //把当前大图的高度设置为0 startMove(aLiBig[now],'height',320); //再通过运动框架把大图的高度设置为图片高度以产生从上往下拉的效果 if(now==0) { startMove(oUlSmall, 'left', 0); } else if(now==aLiSmall.length-1) { startMove(oUlSmall, 'left', -(now-2)*aLiSmall[0].offsetWidth); } else { startMove(oUlSmall, '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="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> </html>
