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/

*ngFor

您可以添加两个带有类名的按钮，如Korgrue所指定的那样，另外还为它们添加单击处理程序，以调用滑块原型中的Next和Previous函数。

小提琴中的两个主要功能是：

      <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>

bindEvents函数将点击处理程序绑定到按钮：

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

我剥离了自动更改功能，因为它们很难处理。

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

2 个答案: