如何创建按钮并使其在幻灯片中工作？

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 函数。

fiddle 中要查看的主要两个函数是：

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();
  });

}

我去掉了自动更改功能，因为它们处理起来很烦人。