Javascript 图像滑块 - 需要添加按钮

Question

请在下面查看我的代码。此代码工作正常，但我想添加暂停/恢复、前进、后退按钮。因此，如果有人点击暂停，它将停止自动旋转。我不能使用 Jquery。我处理了这段代码，但我无法在这段代码中添加按钮。

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

Answer 1

这可以通过这种方式完成。

(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.index = 0;
            this.total = this.slides.length;
            this.timer = null;
			this.nextButton = document.querySelector('#next');
			this.previousButton = document.querySelector('#previous');
			this.toggleButton = document.querySelector('#toggle');
            this.action();
            this.stopStart();
			this.toggleButton.addEventListener('click', function(e){
				e.preventDefault();
				this.stop();
			}.bind(this));
			this.nextButton.addEventListener('click', function(e){
				e.preventDefault();
				this.next();
			}.bind(this));
			this.previousButton.addEventListener('click', function(e){
				e.preventDefault();
				this.previous();
			}.bind(this))
        },
        _slideTo: function( slide ) {
            var currentSlide = this.slides[slide];
            currentSlide.style.opacity = 1;

            for( var i = 0; i < this.slides.length; i++ ) {
                 slide = this.slides[i];
                if( slide !== currentSlide ) {
                    slide.style.opacity = 0;
                }
            }
        },
        action: function() {
            var self = this;
            this.timer = setInterval(function() {
                self.index++;
                if( self.index == self.slides.length ) {
                    self.index = 0;
                }
                self._slideTo( self.index );

            }, 5000);
        },
        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);
        },
		stop: function(){
			if(this.timer){
				clearInterval( this.timer );
				this.timer = null;
				this.toggleButton.innerText = 'Play';
			}else{
				this.action();
				this.toggleButton.innerText = 'Pause';
			}
	
		},
		next: function(){
			this.index++;
			if( this.index === this.slides.length ) {
				this.index = 0;
			}
			this._slideTo(this.index);

		},
		previous: function(){
			this.index--;
			if( this.index <= 0 ) {
				this.index = this.slides.length - 1;
			}
			this._slideTo(this.index);			
		}


    };	
    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: 350px;
		position: relative;
	}

	.slide {
		float: left;
		position: absolute;
		opacity: 0;
		transition: opacity 1s linear;
	}

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

<!DOCTYPE html>
<html>
<body>

<div class="slider" id="main-slider"><!-- outermost container element -->
    <div class="slider-wrapper"><!-- innermost wrapper element -->
        <img id="image1" src="http://placehold.it/350x250?text=1" alt="First" class="slide" /><!-- slides -->
        <img id="image2" src="http://placehold.it/350x250?text=2" alt="Second" class="slide" />
        <img id="image3" src="http://placehold.it/350x250?text=3" alt="Third" class="slide" />
    </div>	
</div>
<div class="buttonBlock">
	<button id="toggle">Pause</button>
	<button id="next">Next</button>
	<button id="previous">Previous</button>
</div>	
</body>
</html>

还有其他方法可以做到这一点，根据您当前的代码库，这似乎是一个不错的方法。希望这会有所帮助。