In this tutorial I will expore the secret on how to design different kinds of slideshows with javascript animation technique. The slideshows here do not use any libraries so it's easier for you to find out how they work.

Sides Change with DIV Move

This is the simpest slideshow. It acts like ticker. Divs keep moving to one direction after some time of pause in the center of the container. When moving to the end, the slides change to move to the opposite direction.

HTML

The HTML of the slidershow is a list of list tags container in a div tag. It looks like,

<div id="wrapper" >
    <ul class="slideshow" id="nt">
        <li><a href="#"><img src="../images/1.png" alt="1" border="0" /></a></li>  
        <li><a href="#"><img src="../images/2.png" alt="2"  border="0" /></a></li>  
        <li><a href="#"><img src="../images/3.png" alt="3" border="0" /></a></li>  
        <li><a href="#"><img src="../images/4.png" alt="4" border="0" /></a></li>  
    </ul>
</div>

CSS

The moving tag is actually <ul> tag. So its position property is set to absolute. All the slides are float in the horizontal direction.

The size of wrapper div is the same as the size of the image.

#wrapper {
    position:relative;
    overflow:hidden; 
    width:200px;
    height:145px;
    margin: 10px 0;
    border: 1px solid #447766;
}
.slideshow {
    list-style-type: none;
    margin:0;
    padding:0;
    left:0;
    position:absolute;	
}
.slideshow li{
    float:left;
}

Javascript

Before we start, let's go over some basic functions that could be used in the slideshow object.

• getstyle - get the css properties of a DOM node.
• repeat - an extend function for setInterval.
• bind - invoke a function or method while remain the scope unchange.
• div move - an object for div move.

For the script of div move, coz the slide just moves horizontally, I just pick up the part for horizontal move.

slideshow object

The construction accepts one parameter - the id of the wrapper div. And then initialize some basic settings. Note this.dir is the property to indicate the moving direction.

function slideshow(id){
    this.ul = document.getElementById(id);
    this.lis = this.ul.getElementsByTagName("LI");
    this.len = this.lis.length;
    this.width = parseInt(getstyle(this.ul.parentNode, "width"));
    this.ul.style.width = this.len*this.width+"px";
    this.left = this.width;
    this.t=0;
    this.k = 0; // the index of active slide
    this.dir = "plus"; // moving direction
    this.delay =500;
}

And then add method in prototype property of the constructor.

slideshow.prototype = {

    go: function(){  // initilize and bind the methods. Start to go
       ... 
    },

    attach: function(){  // attach mouseover and mouseout event
        ...
    },

    show: function(){ // the main method for slide show
        ...        
    },

    stop: function(){ // stop everything
        ...
    }
}

Among these methods, show is the main method for the slide showing. Let's take look at its code. The 1st line tells how to change the index of the active slide. Then follows the boundary conditions to switch the direction of the moving. The last line is for div move.

...
show: function(){

    _this.k = (_this.dir == "plus") ? _this.k+1 : _this.k-1;
    if (_this.k== _this.len) {
        _this.dir = "minus";
        _this.k = _this.len-1;
    }
    else if (_this.k< 0) {
        _this.k = 0;
        _this.dir = "plus";
    } 
      
    $(_this.ul).move({delay:_this.delay,to:{left:-_this.k*_this.left,top:0}});
        
},

How to use ?

Just 2 lines to go ...

 
var ss1 = new slideshow("nt");
ss1.go();

Demo

Demo of Slides Change with DIV Move