如何在自动幻灯片中添加按钮？

Question

我已经创建了一个自动幻灯片，我想知道如何添加按钮并使其与自动幻灯片放映同时工作。有人可以帮帮我吗？以下是我为创建自动幻灯片而编写的代码：

(function() {

  function Slideshow(element) {
    this.el = document.querySelector(element);
    this.init();
  }

  Slideshow.prototype = {
    init: function() {
      this.wrapper = this.el.querySelector(".slider-wrapper");
      this.slides = this.el.querySelectorAll(".slide");
      this.previous = this.el.querySelector(".slider-previous");
      this.next = this.el.querySelector(".slider-next");
      this.index = 0;
      this.total = this.slides.length;
      this.timer = null;

      this.action();
      this.stopStart();
    },
    _slideTo: function(slide) {
      var currentSlide = this.slides[slide];
      currentSlide.style.opacity = 1;

      for (var i = 0; i < this.slides.length; i++) {
        var slide = this.slides[i];
        if (slide !== currentSlide) {
          slide.style.opacity = 0;
        }
      }
    },
    action: function() {
      var self = this;
      self.timer = setInterval(function() {
        self.index++;
        if (self.index == self.slides.length) {
          self.index = 0;
        }
        self._slideTo(self.index);

      }, 3000);
    },
    stopStart: function() {
      var self = this;
      self.el.addEventListener("mouseover", function() {
        clearInterval(self.timer);
        self.timer = null;

      }, false);
      self.el.addEventListener("mouseout", function() {
        self.action();

      }, false);
    }


  };

  document.addEventListener("DOMContentLoaded", function() {

    var slider = new Slideshow("#main-slider");

  });


})();

html,
body {
  margin: 0;
  padding: 0;
}

.slider {
  width: 100%;
  margin: 2em auto;
}

.slider-wrapper {
  width: 100%;
  height: 400px;
  position: relative;
}

.slide {
  float: left;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 3s linear;
}

.slider-wrapper>.slide:first-child {
  opacity: 1;
}

<div class="slider" id="main-slider">
  <!-- outermost container element -->
  <div class="slider-wrapper">
    <!-- innermost wrapper element -->
    <img src="http://lorempixel.com/1024/400/animals" alt="First" class="slide" style="width:100%" />
    <!-- slides -->
    <img src="http://lorempixel.com/1024/400/business" alt="Second" class="slide" style="width:100%" />
    <img src="http://lorempixel.com/1024/400/city" alt="Third" class="slide" style="width:100%" />
  </div>
</div>

Answer 1

在您的下一个＆amp;上添加点击事件功能普遍按钮，下次使用以下

self._slideTo(self.index); 

for prevues使用此

if(self.index+1 == this.slides.length)
self.index = 0 ;
else
self._slideTo(self.index -1);

Answer 2

添加next和prev函数，如示例....

(function() {

  function Slideshow(element) {
    this.el = document.querySelector(element);
    this.init();
  }

  Slideshow.prototype = {
    init: function() {
      this.wrapper = this.el.querySelector(".slider-wrapper");
      this.slides = this.el.querySelectorAll(".slide");
      this.previous = this.el.querySelector(".slider-previous");
      this.next = this.el.querySelector(".slider-next");
      this.index = 0;
      this.total = this.slides.length;
      this.timer = null;
      this.nextButton= this.el.querySelector(".next");
      this.prevButton= this.el.querySelector(".prev");

      this.action();
      this.stopStart();
      this.nextSlide();
      this.prevSlide();
    },
    _slideTo: function(slide) {
      var currentSlide = this.slides[slide];
      currentSlide.style.opacity = 1;

      for (var i = 0; i < this.slides.length; i++) {
        var slide = this.slides[i];
        if (slide !== currentSlide) {
          slide.style.opacity = 0;
        }
      }
    },
    action: function() {
      var self = this;
      self.timer = setInterval(function() {
        self.index++;
        if (self.index == self.slides.length) {
          self.index = 0;
        }
        self._slideTo(self.index);

      }, 3000);
    },
    stopStart: function() {
      var self = this;
      self.el.addEventListener("mouseover", function() {
        clearInterval(self.timer);
        self.timer = null;

      }, false);
      self.el.addEventListener("mouseout", function() {
        self.action();

      }, false);
    }
    ,nextSlide:function(){
      var self=this;
      self.nextButton.addEventListener("click", function() {
        clearInterval(self.timer);
        self.timer = null;
        self.index++;
        if (self.index == self.slides.length) {
          self.index = 0;
        }
        self._slideTo(self.index);

      });
    }
    ,prevSlide:function(){
      var self=this;
      self.prevButton.addEventListener("click", function() {
        clearInterval(self.timer);
        self.timer = null;
        self.index--;
        if (self.index == -1) {
          self.index = self.slides.length-1;
        }
        
        self._slideTo(self.index);

      });
    }


  };

  document.addEventListener("DOMContentLoaded", function() {

    var slider = new Slideshow("#main-slider");

  });


})();

html,
body {
  margin: 0;
  padding: 0;
}

.slider {
  width: 100%;
  margin: 2em auto;
}

.slider-wrapper {
  width: 100%;
  height: 400px;
  position: relative;
}

.slide {
  float: left;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 3s linear;
}

.slider-wrapper>.slide:first-child {
  opacity: 1;
}
.next{
position:absolute;
right:0;
}
.prev{
position:absolute;
left:0;
}

<div class="slider" id="main-slider">
  <!-- outermost container element -->
  <div class="slider-wrapper">
    <!-- innermost wrapper element -->
    <img src="http://lorempixel.com/1024/400/animals" alt="First" class="slide" style="width:100%" />
    <!-- slides -->
    <img src="http://lorempixel.com/1024/400/business" alt="Second" class="slide" style="width:100%" />
    <img src="http://lorempixel.com/1024/400/city" alt="Third" class="slide" style="width:100%" />
    <button class='prev'>Prev</button>
    <button class='next'>Next</button>
  </div>
</div>