How to create image slider with javascript
There are many image sliders on the internet. Most of then are written by jQuery. I just want to learn JS and get a better understanding of it, so i use javascript to complete it.
you can find the demo here:
1.basic:http://cssdeck.com/labs/image-slider-1
2.with prev/next button: http://cssdeck.com/labs/imageslider-button
3.with pager: http://cssdeck.com/labs/imageslider-pager
Demo 1 is different from demo 2 and 3
demo 2 and 3 are using the same core codes.
Below is how to do the basic one--move to the next image after a set of time interval. no user interrupt.
The basic id of image slider is to create a long list. actually is a long <ul>
<div class="container">
<div class="image-slider-wrapper">
<ul id="image_slider">
<li><img src="./image/1.jpg"></li>
<li><img src="./image/4.jpg"></li>
<li><img src="./image/5.jpg"></li>
<li><img src="./image/4.jpg"></li>
<li><img src="./image/1.jpg"></li>
<li><img src="./image/5.jpg"></li>
</ul>
</div>
</div>
the image-slider-wrapper part is for the convenience when I do future work.
the css part for this is:
.container{
width:800px;
height:400px;
padding:20px;
border:1px solid gray;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
background: black;
}
.image-slider-wrapper{
overflow: hidden;
}
#image_slider{
position: relative;
height: 280px;
padding:0;
}
#image_slider li{
max-width: 100%;
float:left;
list-style: none;
}
The image-slider-wrapper need to set overflow: hidden cause ul will be a very long list in a line. but only one image can be seen.
There are no width set for ul( id=image_slider) because we will set it in Javascript. So when there are more/less images we don't need to change css.
Webkit has default padding and margin for ul, so we will initialize it with 0px.
Set li to list-style:none and float left, so the images will be in a long line.
All right, now we've have everything ready to move.
In the function init(), 1. set ul width 2. move ul
var ul;
var liItems;
var imageWidth;
var imageNumber;
ul = document.getElementById('image_slider');
liItems = ul.children;
imageNumber = liItems.length;
imageWidth = liItems[0].children[0].offsetWidth;
// set ul's width as the total width of all images in image slider.
ul.style.width = parseInt(imageWidth * imageNumber) + 'px';
.clientWidht returns a number! (typeof(imageWidth) returns "number")
we can also use computedStyle to get the width of one image, but in that case what we get is "760px", not 760
var computedStyle = document.defaultView.getComputedStyle(liItems[i].childNodes[0], null);
imageWidth = computedStyle.width;
Also, offsetWidth is the width that includes content, padding, scrollbar and border.if there are borders for each image, the width of ul will also be correct.
here is the function slider()
function slider(ul){
animate({
delay:17,
duration: 3000,
//delta function is to set how the image slide--keep still for a while and move to next picture.
delta:function(p){return Math.max(0, -1 + 2 * p)},
step:function(delta){
//step function will be called many times until clearInterval() been called
// currentImage * imageWidth is the currentImage position of ul
// delta start from 0 to 1, delta * imageWidth is the pixels that changes
ul.style.left = '-' + parseInt(currentImage * imageWidth + delta * imageWidth) + 'px';
},
callback:function(){
currentImage++;
// if it doesn't slied to the last image, keep sliding
if(currentImage < imageNumber-1){
slider(ul);
}
// if current image it's the last one, it slides back to the first one
else{
var leftPosition = (imageNumber - 1) * imageWidth;
// after 2 seconds, call the goBack function to slide to the first image
setTimeout(function(){goBack(leftPosition)},2000);
setTimeout(function(){slider(ul)}, 4000);
}
}
});
}
The animate function is a generic function I Learned from this article:
I think it's a pretty good one.
http://javascript.info/tutorial/animation#the-generic-animation
The delta function make sure that each animation will keep still for a while then move to the next image. (if y<0, then y=0;)
The step function does the animation. But it only slide one image. The callback function will make sure there is a loop for all images. And if it's the last image, it calls the "goBack" function to slide to the first image.
function goBack(leftPosition){
currentImage = 0;
var id = setInterval(function(){
if(leftPosition >= 0){
ul.style.left = '-' + parseInt(leftPosition) + 'px';
// everytime goBack be called, the ul moves 1/10 of image width until it goes to 0 px.
leftPosition -= imageWidth / 10;
}
else{
clearInterval(id);
}
}, 17);
}
Here is the generic animation function I learned form the javascript animation tutorial i posted the link above. The only difference is after clearInterval() i will call the callback function to keep the animation loop going on.
//generic animate function
function animate(opts){
var start = new Date;
var id = setInterval(function(){
var timePassed = new Date - start;
var progress = timePassed / opts.duration
if(progress > 1){
progress = 1;
}
var delta = opts.delta(progress);
opts.step(delta);
if (progress == 1){
clearInterval(id);
opts.callback();
}
}, opts.dalay || 17);
}
window.onload = init;
WIth the window.inload = init; as the end, the image slider has been successfully finished!
I know there are many places to improve, like this one is not a responsive one. I will keep working on and write better code.
germansingergirl
kianamaiart
areudirty
andulkaphoto
romaincrisis
snowghoul
yousharknotpass
prguitarman
baratheonpilled
origamiaround
vaporwave