本文主要是介绍JavaScript 之仿flash播放器，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
move.js文件
function getStyle(obj, name)
{if(obj.currentStyle){return obj.currentStyle[name]; }else{return getComputedStyle(obj, false)[name]; }
}
//var alpha = 30;
function startMove(obj, arr, iTarget)
{clearInterval(obj.timer);obj.timer=setInterval(function (){var cur=0;if(arr=='opacity'){cur=Math.round(parseFloat(getStyle(obj, arr))*100); }else{cur=parseInt(getStyle(obj, arr)); }var speed=(iTarget-cur)/6;speed=speed>0?Math.ceil(speed):Math.floor(speed);if(cur==iTarget){clearInterval(obj.timer); }else{if(arr=='opacity'){obj.style.filter='alpha(opcity:'+(cur+speed)+')';obj.style.opacity=(cur+speed)/100; // document.getElementById('tex1').value = obj.style.opacity;}else{obj.style[arr]=cur+speed+'px'; }}}, 30);
}// JavaScript Document仿flash播放器（引用上面的js文件）
<!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的图片轮换效果</title>
<script src="move.js"></script>
<style>@charset "utf-8";
/* CSS Document */body { background-color: #F0F0F0; } ul { padding: 0; margin: 0;} li { list_style: none; } img { border: 0; }.play { width: 400px; height: 430px; margin: 50px auto 0; background-color: #000000; font: 12px Arial; }.big_pic { width: 400px; height: 320px; overflow: hidden;background: #222; position: relative; }.big_pic li { width: 400px; height: 320px; overflow: hidden; position: absolute; top: 0; left: 0; z-index: 0; }.mark_left { width: 200px; height: 320px; position:absolute; left: 0; top: 0; filter: alpha(opacity:10); opacity: 0.1; z-index:3000; }.mark_right { width: 200px; height: 320px; position: absolute; left: 200px; top: 0; filter: alpha(opacity:10); opacity: 0.1; z-index: 3000; }.big_pic .prev { width: 60px; height: 60px; background:url(images/btn.png) no-repeat; 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/btn2.png) no-repeat 0;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:30); opacity:0.3; }
.small_pic img { width: 120px; height:94px; }</style>
<script>
function getByClass(oParent, sClass)
{var aEle=oParent.getElementsByTagName('*');var aResult=[];for(var i=0;i<aEle.length;i++){if(aEle[i].className==sClass){aResult.push(aEle[i]);}}return aResult;
}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=document.getElementById('small_pic');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 (){startMove(oBtnPrev, 'opacity', 100);};oBtnPrev.onmouseout =oMarkLeft.onmouseout=function (){startMove(oBtnPrev, 'opacity', 0); };oBtnNext.onmouseover=oMarkRight.onmouseover=function (){startMove(oBtnNext, 'opacity', 100); };oBtnNext.onmouseout=oMarkRight.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', 30); }};}function tab(){aLiBig[now].style.zIndex=nowZIndex++;for(var i=0;i<aLiSmall.length;i++){startMove(aLiSmall[i], 'opacity', 30); }aLiBig[now].style.height=0;startMove(aLiBig[now], 'height', 320);startMove(aLiSmall[now], 'opacity', 100);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="13_07.jpg" /></li><li><img src="pay.png" /></li><li><img src="默认配置文件位置.PNG" /></li><li><img src="pay.png" /></li><li><img src="13_07.jpg" /></li><li><img src="pay.png" /></li></ul><div id="small_pic" class="small_pic"><ul style="width:400px;"><li style=" filter: alpha(opacity:100); opacity:1;"><img src="13_07.jpg" /></li><li><img src="pay.png" /></li><li><img src="默认配置文件位置.PNG" /></li><li><img src="pay.png" /></li><li><img src="13_07.jpg" /></li><li><img src="pay.png" /></li></ul> </div>
</div>
</body>
</html>
这篇关于JavaScript 之仿flash播放器的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
