Javascript Slider Show

Following Slides fadeOut and fadeInIn, this tutorial I will add one description box after the active slide fadeIn.


The description for each slide will be displayed in a <div> within the wrapper div. The HTML struction is as follow,

<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>  
    <div id="des"></div>


In order that the div box can be moved, its position property is set to absolute. Top value is make sure its initial postion is under the the slide box. The CSS of the div box is as follow.

    ...  // the rest is the same as Slides fadeOut and fadeInIn

slideshow object

The construction keeps almost the same but set the initial opacity of the description box as half transparent.

function slideshow(id){
    Opacityto($("des"),80); // set the opacity of discrition box as 80

To make sure the description box is always on the top, its z-Indedx property is always larger than that of <li> tags. Description box moves in as callback function and after 800 milliseconds pause and then move out.

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;
    h1 = 145;
    h2 = 85;
    if (_this.dir == "plus") {   
        _this.lis[_this.k].style.zIndex = _this.zindex;
        var elms = [_this.lis[_this.k-1],_this.lis[_this.k]]; 
    else if (_this.dir == "minus") { 
        _this.lis[_this.k-1].style.zIndex = _this.zindex; 
         var elms = [_this.lis[_this.k],_this.lis[_this.k-1]]; 
     $("des").style.zIndex = _this.zindex+1;
               ( function(){

How to use ?

Just 2 lines to go ...

var ss1 = new slideshow("nt");


Demo of Slides fadeIn with description box

Last updated on Sep.2, 2010
The layout of this page was generated by 2 column layout generator