如何創建按鈕並使之在幻燈片中工作？

Question

我開始在Weebly中創建網站，我想在首頁上放一個幻燈片，但是我不喜歡Weebly提供的拖放幻燈片，所以我決定用HTML和CSS構建一個幻燈片。 我已經編寫了此代碼，現在可以將其用作自動幻燈片顯示...如何創建按鈕並使它在我創建的幻燈片顯示中起作用？ 這是我完成的代碼：

<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>
<script type="text/javascript">
(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");

    });


})();
</script>

CSS：

html, body {
    margin: 0;
    padding: 0;
}
.slider {
    width: 100 % ;
    margin: 2e m auto;

}

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

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

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

Answer 1

只需創建兩個按鈕並為其指定適當的類名即可。 當然，您將不得不定位按鈕，但是如果沒有HTML，我們將無法為實際的按鈕定位提供方向。 如果您還需要其他幫助，請提供HTML和與Slider元素有關的所有CSS。

 <div class="button slider-previous">Prev</div>
 <div class="button slider-next">Next</div>

Answer 2

這是一個小提琴： https : //jsfiddle.net/nosyzv78/3/

      <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>
  <button class="button slider-previous">Prev</button>
  <button class="button slider-next">Next</button>
</div>

您可以添加兩個具有類名的按鈕（如Korgrue所指定），還可以向其添加單擊處理程序，以在滑塊原型中調用Next和Previous函數。

小提琴中要查看的主要兩個功能是：

Prev: function() {
  var self = this;
  self.index--;
  if (self.index < 0) {
    self.index = self.slides.length - 1;
  }
  self._slideTo(self.index);

},
Next: function() {
      var self = this;
  self.index++;
  if (self.index == self.slides.length) {
    self.index = 0;
  }
  self._slideTo(self.index);
},

以及將點擊處理程序綁定到按鈕的bindEvents函數：

bindEvents: function() {
var self = this;
  $(self.previous).click(function() {
    self.Prev();
  });
  $(self.next).click(function() {
    self.Next();
  });

}

我刪除了自動更改功能，因為它們很煩人。