面向对象版轮播

css代码

• { margin: 0; padding: 0; }

  #content {
      height: 100%;
      margin: auto;
      position: relative;
  }
  
  .content1 {
      height: 376px;
      margin: auto;
      position: relative;
      z-index: 1;
  }
  
  #content img {
      position: absolute;
      height: 100%;
      width: 100%;
      opacity: 0;
      transition: 1s;
  }
  
  #content 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="content">
    <div class="content1" id="aaa">
        <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>
    js代码
      function lunbo(parent){
        this.content1 = parent;
        this.dds = parent.getElementsByTagName("dd");
        this. dts = parent.getElementsByTagName("dt");
        this.n = 0;
        this. btns = parent.getElementsByTagName("button");
        this.imgs = parent.getElementsByTagName('img');
        }
        lunbo.prototype.init=function(){
                this.bind()
            this.time()
        }
        lunbo.prototype.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)
            }
        }
        console.log(this)
               this. content1.onmouseover=function(){
                    
					me.cleartime();
				}
				this.content1.onmouseout=function(){
					me.time();
				}
        }
    lunbo.prototype.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";
        }
        lunbo.prototype.clear=function(){
            for (var i = 0; i < this.dts.length; i++) {
                   this. dts[i].className = "";
                    this.imgs[i].className = "";
                }
        }
        lunbo.prototype.time=function(){
            var me=this;
            this.timer = setInterval(function () {
           me.fn(1)
        }, 1500)
        }
        lunbo.prototype.cleartime=function(){
            clearInterval(this.timer)
        }
        var lunbo1=new lunbo(aaa)
        lunbo1.init()