js轮播广告,CSS兼容所有浏览器,无Bug

来源:互联网 发布:php exec无法执行 编辑:程序博客网 时间:2024/06/05 15:16

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>
CSS:
/*AD*/
.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.

原创粉丝点击