0
請參閱下面的代碼。此代碼工作正常，但我想添加暫停/恢復，前進，後退按鈕。所以如果有人點擊暫停，它會停止自動旋轉。我無法使用Jquery。我研究過這段代碼，但我無法將按鈕添加到此代碼中。Javascript Image Slider - 需要添加按鈕
(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: 1024px;
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 id="image1" src="SupplyImages/WF00/1489007864182_35556.jpg" alt="First" class="slide" /><!-- slides -->
<img id="image2" src="SupplyImages/WF00/1489008043581_741956.jpg" alt="Second" class="slide" />
<img id="image3" src="SupplyImages/WF00/1489008288715_503637.png" alt="Third" class="slide" />
</div>
</div>