以下の私のコードを参照してください。このコードは正常に機能しますが、一時停止/再開、進む、戻るボタンを追加したいと思います。したがって、誰かが一時停止をクリックすると、自動回転が停止します。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> これはこの方法で行うことができます。
(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>これを行うには他の方法がありますが、これは現在のコードベースに基づいた良いアプローチのように思えました。お役に立てれば。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加