封装的焦点轮播图代码

来源：互联网发布：cf滑步教程知乎编辑：程序博客网时间：2024/06/08 12:05
封装的焦点轮播图代码
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>*{margin:0; padding:0;}ul,ol {list-style:none;}img {border:none;}.banner {height:320px; width:852px; position:relative; margin:30px auto;}.imgs li {height:320px; width:852px; position:absolute; left:0; top:0; opacity:0;}.nav {position:absolute; bottom:15px; right:15px;}.nav li {width:20px; height:20px; filter:alpha(opacity:60); opacity:0.6; background:#fff; z-index:3;color:#000; background:#fff; border:1px solid #000; font-size:12px; text-align:center; line-height:20px;font-weight:600; margin-left:2px; float:left; cursor:pointer;}.nav li.active {background:#000; border:1px solid #fff; color:#fff;}</style></head><body><div class="banner">    <ul class="imgs">        <li style="opacity:1;"><img src="img/1.png" /></li>        <li><img src="img/2.jpg" /></li>        <li><img src="img/3.jpg" /></li>        <li><img src="img/4.jpg" /></li>        <li><img src="img/5.jpg" /></li>    </ul>    <ul class="nav">        <li class="active">1</li>        <li>2</li>        <li>3</li>        <li>4</li>        <li>5</li>    </div></div></body></html><script type="text/javascript">  //getByClassfunction getByClass (obj, sCls){  var aEle=obj.getElementsByTagName("*");  var aResult=[];  var re=new RegExp("\\b"+sCls+"\\b", "i");  for(var p=0;p<aEle.length;p++){    if(re.test(aEle[p].className))aResult.push(aEle[p]);  }  return aResult;  }//getStylefunction getStyle(obj, attr){ if(obj.currentStyle) {  return obj.currentStyle[attr]; } else {  return getComputedStyle(obj, false)[attr]; }}function Banner(){  //初始化  this.init.apply(this, arguments);}Banner.prototype={  init : function(options){    this.setOptions(options);    this.aImg=this.options.img;    this.aNav=this.options.nav;    this.speed=this.options.speed;    this.oBanner=this.options.banner;    this.timer=null;    this.fadeTimer=null;    this.iNow=0;      //当前图片    var that=this;    this.timer=setInterval(function (){that.next()}, that.speed); //设置自动播放    this.oBanner.onmouseover=function(){clearInterval(that.timer)};    this.oBanner.onmouseout=function(){that.timer=setInterval(function (){that.next()}, that.speed)};    for(var i=0;i<this.aImg.length;i++){      this.aNav[i].index=i;       //自定义属性      this.aNav[i].onclick=function(){that.iNow=this.index;that.turnImgs();};    }  },  setOptions : function(options){    this.options={      img : this.aImg,    //图片元素集合      nav : this.aNav,    //按钮导航      banner : this.oBanner,  //banner容器      speed : 5000      //切换间隔-->毫秒    };    for(var p in options)this.options[p]=options[p];  },  turnImgs : function(){    var that=this;    for(var i=0;i<this.aImg.length;i++){      //this.aImg[i].style.opacity=0;      //this.aImg[i].style.filter="alpha(opacity:0)";      fade(this.aImg[i], {opacity:0})      this.aNav[i].className="";    }    fade(this.aImg[that.iNow], {opacity:100});    this.aNav[this.iNow].className="active";  },  next : function(){    this.iNow++;    this.iNow==this.aImg.length&&(this.iNow=0);    this.turnImgs();  },};function fade (obj, json){  clearInterval(obj.fadeTimer);  obj.fadeTimer = setInterval(function(){    for(var attr in json){      var iCur=0;      iCur=parseInt(parseFloat(getStyle(obj, attr))*100);      var iSpeed=(json[attr]-iCur)/20;      iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);      if(attr=="opacity"){obj.style.opacity=(iCur+iSpeed)/100;}      obj.style.filter="alpha(opacity:"+(iCur+iSpeed)+")";    }  },30);}window.onload=function(){  var oBanner=getByClass(document.body, "banner")[0];  var aImg=getByClass(document.body, "imgs")[0].getElementsByTagName("li");  var aNav=getByClass(document.body, "nav")[0].getElementsByTagName("li");  var b1=new Banner({    banner:   oBanner,    //容器    img:    aImg,     //图片    nav:    aNav,     //按钮导航    speed:    5000      //切换速度  });};</script>
0 0