封装的焦点轮播图代码

最新推荐文章于 2023-02-08 22:18:30 发布

phpzealer

最新推荐文章于 2023-02-08 22:18:30 发布

阅读量539

点赞数

分类专栏： web前端

web前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

封装的焦点轮播图代码

<!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">

  //getByClass
function 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;  
}

//getStyle
function 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>