You can have look at the XHTML, CSS, and Jquery Javascript that makes it work.

Jquery Image Rotator, View Demo, Download Source.

The HTML for our jquery image rotator gets placed in the body of your page.

<div>
<ul>
<li>
<a href=”javascript:void(0)”>
<img src=”images/image-1.jpg” width=”500″ height=”313″ alt=”pic1″ />
</a>
</li>
<li>
<a href=”javascript:void(0)”>
<img src=”images/image-2.jpg” width=”500″ height=”313″ alt=”pic2″ />
</a>
</li>
<li>
<a href=”javascript:void(0)”>
<img src=”images/image-3.jpg” width=”500″ height=”313″ alt=”pic3″ />
</a>
</li>
<li>
<a href=”javascript:void(0)”>
<img src=”images/image-4.jpg” width=”500″ height=”313″ alt=”pic4″ />
</a>
</li>
</ul>
</div>

The CSS

/* rotator in-page placement */
div.rotator {
position:relative;
height:345px;
margin-left: 15px;
}
/* rotator css */
div.rotator ul li {
float:left;
position:absolute;
list-style: none;
}
/* rotator image style */
div.rotator ul li img {
border:1px solid #ccc;
padding: 4px;
background: #FFF;
}
div.rotator ul li.show {
z-index:500;
}

The JavaScript

Include jquery and the below script in your page or in an attached file.

<script type=”text/javascript”>

function theRotator() {
//Set the opacity of all images to 0
$(‘div.rotator ul li’).css({opacity: 0.0});

//Get the first image and display it (gets set to full opacity)
$(‘div.rotator ul li:first’).css({opacity: 1.0});

//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds

setInterval(‘rotate()’,6000);

}

function rotate() {
//Get the first image
var current = ($(‘div.rotator ul li.show’)?  $(‘div.rotator ul li.show’) : $(‘div.rotator ul li:first’));

if ( current.length == 0 ) current = $(‘div.rotator ul li:first’);

//Get next image, when it reaches the end, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass(‘show’)) ? $(‘div.rotator ul li:first’) :current.next()) : $(‘div.rotator ul li:first’));

//Un-comment the 3 lines below to get the images in random order

//var sibs = current.siblings();
//var rndNum = Math.floor(Math.random() * sibs.length );
//var next = $( sibs[ rndNum ] );

//Set the fade in effect for the next image, the show class has higher z-index
next.css({opacity: 0.0})
.addClass(‘show’)
.animate({opacity: 1.0}, 1000);

//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass(‘show’);

};

$(document).ready(function() {
//Load the slideshow
theRotator();
$(‘div.rotator’).fadeIn(1000);
$(‘div.rotator ul li’).fadeIn(1000); // tweek for IE
});