Simple JavaScript slide shows are a very useful way of slickly displaying images on any site.

the code

The code is very simple, requiring the inclusion of the following JavaScript files prototype.js, scriptaculous.js, effects.js and simple-slide-show.js. These provide the foundation of the slide show with very little HTML and CSS needed to complete the example.

HTML

The HTML consists of a div containing an unordered list (ul) of the required images. Both the containing div and ul have an id assigned to allow for easy styling without clashes.

<div id="slide-show">

    <ul id="slide-images">
        <li><img src="images/one.jpg" alt="One" title="One" /></li>
        <li><img src="images/two.jpg" alt="Two" title="Two" /></li>
        <li><img src="images/three.jpg" alt="Three" title="Three" /></li>
        <li><img src="images/four.jpg" alt="Four" title="Four" /></li>
    </ul>

</div>

The CSS is also very simple. The ul is given a width and a height defining the size of the slide show area and finally the li tags are absolutely positioned one on top of the other and that’s it. The rest is all done with JavaScript magic.

#slide-images{
    position:relative;
    display:block;
    margin:0px;
    padding:0px;
    width:400px;
    height:300px;
    overflow:hidden;
}

#slide-images li{
    position:absolute;
    display:block;
    list-style-type:none;
    margin:0px;
    padding:0px;
    background-color:#FFFFFF;
}

#slide-images li img{
    display:block;
    background-color:#FFFFFF;
}