411 REFERENCE · Wikibooks
BTEC IT Unit 20 - Website Design/JavaScript/Slideshow
Reference material by Wikibooks contributors. This retains its source identity and is not 411 news reporting.
Add a slideshow
HTML Code
<div class="slider" id="main-slider">
<div class="slider-wrapper">
<img src="http://lorempixel.com/1024/400/animals" alt="First" class="slide" >
<img src="http://lorempixel.com/1024/400/business" alt="Second" class="slide" >
<img src="http://lorempixel.com/1024/400/city" alt="Third" class="slide" >
</div>
</div>
</SOURCE>
CSS Code
<syntaxhighlight lang="CSS">
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: 50%;
height: 90%;
opacity: 0;
transition: opacity 3s linear;
}
.slider-wrapper > .slide:first-child {
opacity: 1;
}
JavaScript Code
<script>
(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>