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

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規定，另外還添加點擊處理程序，那些稱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(); 
    }); 

} 

我扯下了汽車 - 交換功能，因爲他們討厭處理。