Note:代码中黑色加粗的部分要特别注意
脚本文件:起名叫flash.js
<script type="text/javascript">
// <!--
(function(){ if(!Function.prototype.bind){ Function.prototype.bind = function(obj){ var owner = this,args = Array.prototype.slice.call(arguments),callobj = Array.prototype.shift.call(args); return function(e){e=e||top.window.event||window.event;owner.apply(callobj,args.concat([e]));}; }; } })(); var player = function(id){ this.ctn = document.getElementById(id); this.adLis = null; this.btns = null; this.animStep = 0.3; this.switchSpeed = 4; this.defOpacity = 1; this.tmpOpacity = 1; this.crtIndex = 0; this.crtLi = null; this.adLength = 0; this.timerAnim = null; this.timerSwitch = null; this.init(); }; player.prototype = { fnAnim:function(toIndex){ if(this.timerAnim){window.clearTimeout(this.timerAnim);} if(this.tmpOpacity <= 0){ this.crtLi.style.opacity = this.tmpOpacity = this.defOpacity; this.crtLi.style.filter = 'Alpha(Opacity=' + this.defOpacity*100 + ')'; this.crtLi.style.zIndex = 0; this.crtIndex = toIndex; return; } this.crtLi.style.opacity = this.tmpOpacity = this.tmpOpacity - this.animStep; this.crtLi.style.filter = 'Alpha(Opacity=' + this.tmpOpacity*100 + ')'; this.timerAnim = window.setTimeout(this.fnAnim.bind(this,toIndex),50); }, fnNextIndex:function(){ return (this.crtIndex >= this.adLength-1)?0:this.crtIndex+1; }, fnSwitch:function(toIndex){ if(this.crtIndex==toIndex){return;} this.crtLi = this.adLis[this.crtIndex]; for(var i=0;i<this.adLength;i++){ this.adLis[i].style.zIndex = 0; } this.crtLi.style.zIndex = 2; this.adLis[toIndex].style.zIndex = 1; for(var i=0;i<this.adLength;i++){ this.btns[i].className = ''; } this.btns[toIndex].className = 'on' this.fnAnim(toIndex); }, fnAutoPlay:function(){ this.fnSwitch(this.fnNextIndex()); }, fnPlay:function(){ this.timerSwitch = window.setInterval(this.fnAutoPlay.bind(this),this.switchSpeed*1000); }, fnStopPlay:function(){ window.clearTimeout(this.timerSwitch); }, init:function(){ this.adLis = this.ctn.getElementsByTagName('li'); this.btns = this.ctn.getElementsByTagName('div')[0].getElementsByTagName('span'); this.adLength = this.adLis.length; for(var i=0,l=this.btns.length;i<l;i++){ with({i:i}){ this.btns[i].index = i; this.btns[i].onmouseover = this.fnSwitch.bind(this,i); this.btns[i].onmouseover = this.fnSwitch.bind(this,i); } } this.adLis[this.crtIndex].style.zIndex = 2; this.fnPlay(); this.ctn.onmouseover = this.fnStopPlay.bind(this); this.ctn.onmouseout = this.fnPlay.bind(this); } }; var player1 = new player('player');// --> </script>
页面调用:<div class="ad-all" > <div class="banner"> <div id="player"> <ul class="Limg"> <li> <li> </li> <li> </li> </ul> <div class="Nubbt"><span class="on">1</span><span >2</span><span >3</span></div> <script type="text/javascript" src="../skin/frontend/default/ixbay/js/flash.js"></script> </div> </div> </div>/*AD*/CSS:
.ad-all {
margin:0 0 15px 0;
}
.banner {
width:540px;
height:214px;
}
.ad-all img {
border:0;
}
.nemt {
width:540px;
height:214px;
float:left;
margin:0;
overflow:hidden;
}
#player {
position:relative;
margin:0;
padding:0;
}
#player .Limg {
position:absolute;
margin:0;
padding:0;
width:540px;
height:214px;
}
#player .Limg li {
position:absolute;
top:0;
left:0;
list-style:none;
}
#player .Limg li img {
border:0;
}
#player .Nubbt {
left:478px;
position:absolute;
z-index:999;
top:192px;
line-height:22px;
}
#player .Nubbt span {
filter:alpha(opacity=90);
-moz-opacity:0.9;
opacity:0.9;
background:#0d203d;
color:#fff;
font-size:10px;
margin:0 1px 0 0;
padding:1px 5px 1px 5px;
cursor:pointer;
display:inline;
}
#player .Nubbt span.on {
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
background:url(../../../../../skin/frontend/default/ixbay/flash/images/on.jpg);
width:26px;
padding:1px 10px 1px 10px;
}
完成效果:
个人总结:
十分好用,没有任何Bug.