How to create an 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; and 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 idea of image slider is to create a long list. actually is a long 'ul'

The html part is:

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

Next is the JS part.
In the function init(), 1. set ul width 2. move ul

var ul;
var liItems; 
var imageWidth;
var imageNumber;

function init(){

    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’;
    slider(ul);
}

.offsetWidht returns a number! (typeof(imageWidth) returns “number”).

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.

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;

here is the function slider()

/**delta function is to set how the image slide—keep still for a while and move to next picture.
*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
**/
 function slider(ul){ 
    animate({
        delay:17,
        duration: 3000,
        delta:function(p){return Math.max(0, -1 + 2 * p)},
        step:function(delta){
            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 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’;
            leftPosition -= imageWidth / 10;
        }
        else{
            clearInterval(id);
        } 
    }, 17);
}

Here is the generic animation function I learned form the javascript animation tutorial i posted the link below. The only difference is after clearInterval() i will call the callback function to keep the animation loop going on.

The animate function is a generic function from this article:

I think it’s a pretty good one.

http://javascript.info/tutorial/animation#the-generic-animation

//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, for example this one is not a responsive one, also the architecture may has problems too. I'm learning new thing everyday.I will keep practicing and write better code!

周周加油！