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 fadein

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 fading tag is actually <li> tag. 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; 
    border: 1px solid #445566;
    width:200px;
    height:145px;
    margin: 10px 0;
}
.slideshow {
    list-style-type: none;
    margin:0;
    padding:0;	
}
.slideshow li{
    float:left;
    position:absolute;
}

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.
• fade - an javascript object for fadeIn and fadeOut effect.

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"));
    for(i = 1; i < this.len; i++) {
        this.lis[i].style.width = this.width+"px";
        Opacityto(this.lis[i],0);
    }
    this.left = this.width;
    this.t = 0;
    this.k = 0;
    this.dir = "plus";
    this.delay = 500;
    this.zindex = 1;
}

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. And then fadeIn the active slide. Before the fadeIn, set the z-Index property of the active slide to the top. After fadeIn, the opacity of the previous slide is set to 0.

...
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.dir = "plus";  
        _this.k = _this.k+1;
    } 
    _this.zindex +=1;
    if (_this.dir == "plus") {      
        _this.lis[_this.k].style.zIndex = _this.zindex;
         $f(_this.lis[_this.k]).fadeIn(1000, function(){
            Opacityto(_this.lis[_this.k-1],0);      
         });   
    }
    else if (_this.dir == "minus") {  
        _this.lis[_this.k-1].style.zIndex = _this.zindex;
         $f(_this.lis[_this.k-1]).fadeIn(1000, function(){
            Opacityto(_this.lis[_this.k],0);          
         });            
    }          
},

How to use ?

Just 2 lines to go ...

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

Demo

Demo of Slides fadeIn