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

原创 2012年04月02日 22:47:57

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.

完整轮播图代码

无标题文档 *{ padding:0; margin:0; list-style:none; border:0;} .all{ wid...
  • yiweichenji
  • yiweichenji
  • 2018年02月02日 22:10
  • 22

首屏闪现且轮播广告

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-tran...
  • shixiaolan_2001
  • shixiaolan_2001
  • 2008年01月31日 15:33
  • 915

ios 滚动视图,滚动广告,无限循环轮播

ios 滚动视图,滚动广告,无限循环轮播GCCycleScrollView用于iOS 广告等图片展示轮播,支持无限循环播放,以及拖拽功能.GCCycleScrollView对于每一张图片都可以添加自己...
  • u014452588
  • u014452588
  • 2016年03月29日 21:58
  • 1840

轮播广告效果实现

由于看到每个电商网站的首页基本上都有轮播广告,所以我也写了一个简单的轮播广告效果,记录一下,以后用到的话可以直接使用了。 本篇主要介绍如何在我们的网页中快速实现轮播效果,js的原理部分在续篇中详细讲...
  • qq_35718410
  • qq_35718410
  • 2016年08月05日 17:16
  • 531

JS判断网页广告是否被浏览器拦截过滤的代码

这篇文章主要介绍了JS判断网页广告是否被浏览器拦截过滤的代码,需要的朋友可以参考下 本来现在投广告赚钱也不像前几年好做,现在还大部分浏览器都拦截了广告,很多浏览器还是默认拦截广告,做站长不是一...
  • wcslb
  • wcslb
  • 2017年03月27日 09:52
  • 1813

广告自动轮播(完美解决人为滑动后按顺序自动轮播)

在手机客户端上,广告的循环播放很是常见,在网上也看过一些Demo,好多写的不是太完整,人为不干预的情况下确实是按照顺序轮播,但是人为去滑动后,接下来的自动轮播不是按滑动后的currentpositio...
  • you4580
  • you4580
  • 2015年04月30日 14:32
  • 759

JS无缝隙轮播图

原生JS代码 焦点轮播图 *{ margin: 0; padding: 0; text-decoration: none;} bod...
  • u014041540
  • u014041540
  • 2016年08月18日 15:10
  • 427

各种主流浏览器CSS、BUG兼容(附带解决方法~、)

1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不...
  • MelodyFreedom
  • MelodyFreedom
  • 2016年05月30日 15:20
  • 1745

如何让CSS的标签兼容不同的浏览器

在不同浏览器,标签呈现的效果是有区别的。         作为块级元素的标签,在写CSS文件时, 最好定义行高line-height, 不要定义高度height,因为定义了高度, 就限制了块级元...
  • qq_35052627
  • qq_35052627
  • 2016年11月25日 10:59
  • 273

js之无缝轮播

*{margin:0px;padding:0px;} .banner{overflow:hidden;width:500px;height:300px;margin:100px auto;posit...
  • ElephantBoy
  • ElephantBoy
  • 2016年07月31日 20:14
  • 890
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js轮播广告,CSS兼容所有浏览器,无Bug
举报原因:
原因补充:

(最多只允许输入30个字)