本文主要是介绍仿FLASH的图片轮换播放器，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
效果思路
两边的按钮——淡入淡出
大图下拉——层级、高度变化
下方的li——多物体淡入淡出
下方的Ul——位置计算
左右按钮
淡入淡出
鼠标移到按钮上，按钮会消失
层级问题
按钮和遮罩上都得加上事件
下方Li效果
点击切换大图——选项卡
Li淡入淡出——移入移出
Ul移动——位置计算
大图片切换
图片层级——zIndex一直加1
图片下拉效果(运动框架)
可以改为淡入淡出
加入自动播放
和选项卡一样
缩略图滚动计算说明
第0张 offsetLeft
0 0
1 0
2 -w
3 2*w
n (n-1)*w
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><style>body{background:#666;}ul{margin:0px;padding:0px;}li{list-style-type:none;}.play{width:400px;height:430px;background:#ccc;margin:50px auto;font: 12px Arial;}.big_pic{width:400px;height:320px;overflow:hidden;position:relative;}.big_pic li{width:400px;height:320px;overflow:hidden;position:absolute;top:0px;left:0px; z-index:0;background: url(images/loading.gif) no-repeat center center;}.mark_left{width:200px;height:320px;position:absolute;top:0px; left:0px; filter: alpha(opacity:0); opacity: 0;z-index: 3000;}.mark_right{width:200px;height:320px;position:absolute;top:0px; right:0px; filter: alpha(opacity:0); opacity: 0;z-index: 3000;}.big_pic .prev{width:60px;height:60px;background:url(images/btn.gif);position:absolute;top: 130px; left: 10px; z-index: 3001; filter:alpha(opacity:0); opacity:0; cursor: pointer;}.big_pic .next { width: 60px; height: 60px; background: url(images/btn.gif) no-repeat 0 -60px; position: absolute; top: 130px; right: 10px; z-index: 3001; filter:alpha(opacity:0); opacity:0; cursor: pointer; }.big_pic .text { position: absolute; left: 10px; top: 302px; z-index: 3000; color: #ccc; }.big_pic .length { position: absolute; right: 10px; bottom: 4px; z-index: 3000; color: #ccc; }.big_pic .bg { width: 400px; height: 25px; background: #000; filter: alpha(opacity=60); opacity: 0.6; position: absolute; z-index: 2999; bottom: 0; left: 0; }.small_pic { width: 380px; height: 94px; position: relative; top: 7px; left: 10px; overflow:hidden;}.small_pic ul { height: 94px; position: absolute; top: 0; left: 0; }.small_pic li { width: 120px; height: 94px; float: left; padding-right: 10px; background: url(images/loading.gif) no-repeat center center; cursor: pointer; filter: alpha(opacity=60); opacity: 0.6;}.small_pic img { width: 120px; height: 94px; }</style><script src="move1.js"></script><script>function getByClass(oParent,oElement){var aEle=oParent.getElementsByTagName('*');var aResult=[];for(var i=0;i<aEle.length;i++){if(aEle[i].className==oElement){aResult.push(aEle[i]);}}return aResult;};window.οnlοad=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');//左右按钮oBtnPrev.οnmοuseοver= oMarkLeft.οnmοuseοver=function(){startMove(oBtnPrev,'opacity',100);}oBtnPrev.οnmοuseοut= oMarkLeft.οnmοuseοut=function(){startMove(oBtnPrev,'opacity',0);}oBtnNext.οnmοuseοver= oMarkRight.οnmοuseοver=function(){startMove(oBtnNext,'opacity',100);}oBtnNext.οnmοuseοut= oMarkRight.οnmοuseοut=function(){startMove(oBtnNext,'opacity',0);}var nowIndex=2;//为了确定z-index的值，越大就显示在前面<span style="color:#ff0000;"> var now=0;//记录当前为第几张图片，重复点击，zIndex不变</span>for(var i=0;i<aLiSmall.length;i++){aLiSmall[i].index=i;//知道点的是第几张图aLiSmall[i].οnclick=function(){<span style="color:#ff0000;"> if(this.index==now)//判断当前张是否重复点击，是则什么也不执行//说明反复点的是同一张图return;now=this.index;//讲当前张赋值给now</span>tab();};//小图移入改变透明度aLiSmall[i].οnmοuseοver=function(){startMove(this,'opacity',100);}aLiSmall[i].οnmοuseοut=function(){<span style="color:#33ff33;"> if(this.index==now)//如果点击的是当前的图片，就不返回透明return;</span>else{startMove(this,'opacity',60);} };};function tab(){//执行大图播放aLiBig[now].style.zIndex=nowIndex;//让zindex值变大nowIndex++;for(var i=0;i<aLiSmall.length;i++)//先让所有的透明度变成60{startMove(aLiSmall[i],'opacity',60); }startMove(aLiSmall[now],'opacity',100);//让当前点击的图片透明度变深//要让点击的图片透明度不变，在鼠标移出时判断aLiBig[now].style.height=0;//让图片从上往下运动startMove( aLiBig[now],'height',320);oUlSmall.style.width=aLiSmall.length*aLiSmall[0].offsetWidth+"px";//设置缩略图总宽度//小图的滚动if(now==0){startMove(oUlSmall,'left',0);}else if(now== aLiSmall.length-1){startMove(aLiSmall,'left',-(now-2)*aLiSmall[0].offsetWidth);//设置倒数第二张位置，显得不动}else{startMove(oUlSmall,'left',-(now-1)*aLiSmall[0].offsetWidth);//向左运动}}//鼠标点击左右按钮件切换图片oBtnPrev.οnclick=function(){now--;if(now==-1){now=aLiSmall.length-1;}tab();}oBtnNext.οnclick=function(){now++;if(now==aLiSmall.length){now=0;}tab();}//定时器自动播放 //自动播放就是替你执行点击事件var timer=setInterval(oBtnNext.onclick,1500);//鼠标移入移出控制播放oDiv.οnmοuseοver=function(){clearInterval(timer);}oDiv.οnmοuseοut=function(){timer=setInterval(oBtnNext.onclick,1500);}}</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>
这篇关于仿FLASH的图片轮换播放器的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
