封装版轮播

css代码

• { margin: 0; padding: 0; }

   #content1 {
       height: 376px;
       margin: auto;
       position: relative;
   }
  
   .content1 {
       height: 376px;
       margin: auto;
       position: relative;
       z-index: 1;
   }
  
   #content1 img {
       position: absolute;
       height: 100%;
       width: 100%;
       opacity: 0;
       transition: 1s;
   }
  
   #content1 img.act1 {
       opacity: 1;
   }
  
   .act2 {
       background-color: red;
   }
  
   dd {
       height: 376px;
       width: 100%;
       position: absolute;
   }
  
   dt {
       width: 5px;
       height: 5px;
       background-color: rgb(252, 250, 249);
       float: left;
       position: relative;
       top: 317px;
       left: 50%;
       margin-right: 10px;
   }
  
   .left {
       position: absolute;
       top: 50%;
       font-size: 40px;
   }
  
   .right {
       position: absolute;
       top: 50%;
       right: 20px;
       font-size: 40px;
   }
  

html代码

     <div id="content1">
    <div class="content1">
        <dd><img class="act1" src="../image/1.jpg" alt=""></dd>
        <dd><img src="../image/2.jpg" alt=""></dd>
        <dd><img src="../image/3.jpg" alt=""></dd>
        <dd><img src="../image/4.jpg" alt=""></dd>
        <dd><img src="../image/5.jpg" alt=""></dd>
        <ul>
            <dt dy="0" class="act2"></dt>
            <dt dy="1"></dt>
            <dt dy="2"></dt>
            <dt dy="3"></dt>
            <dt dy="4"></dt>
        </ul>
        <button class="left">></button>
        <button class="right"><</button>
    </div>
     <div id="content1">

js代码

var tab={ content1 : document.getElementsByClassName("content1")[0], dds : document.getElementsByTagName("dd"), dts : document.getElementsByTagName("dt"), n : 0, btns : document.getElementsByTagName("button"), imgs : content1.getElementsByTagName('img'), init:function(){ this.bind() this.time() }, bind:function(){ var me=this for (var i in this.btns) { this.btns[i].onclick = function () { if (this.innerText == ">") { me.fn(1) } else { me.fn(-1) } } } for (var i in this.dts) { this.dts[i].onclick = function () { me.fn(0,this) } } this.content1.onmouseover=function(){ me.cleartime(); } this.content1.onmouseout=function(){ me.time(); } }, fn:function(sum,dt){ this.clear() if(sum){ this.n+=sum if(this.n==this.dts.length){ this.n=0 }else if(this.n==-1){ this.n=this.dts.length-1 } }else{ this.n=parseInt(dt.getAttribute("dy")); } this.imgs[this.n].className = "act1"; this.dts[this.n].className = "act2"; }, clear:function(){ for (var i = 0; i < this.dts.length; i++) { this. dts[i].className = ""; this.imgs[i].className = ""; } }, time:function(){ var me=this; this.timer = setInterval(function () { me.fn(1) }, 1500) }, cleartime:function(){ clearInterval(this.timer) } } tab.init()