爱笑的天使

浏览器兼容性经验总结,Web前台开发技术,Bigcommerce(internet shopping cart)使用更新...

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

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.

阅读更多
想对作者说点什么? 我来说一句

第四个页面 PC端

4th website

achel9722 achel9722

2016-12-01 17:30:58

阅读数:233

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭