Simple Image Slideshow

JavaScript image slideshow rotator.

by Samuel MacLachlan

HTML

<ul id="rotator">
	<li class="show">
        <a href="#" title="Title Two">
		<img src="http://farm3.staticflickr.com/2726/5796023872_9dc05a3b24.jpg" alt="some alt text" width="500" height="500" />
		<span class="rotator-caption">Caption One</span>
        </a>
	</li>
	<li class="hide">
        <a href="#" title="Title Two">
		<img src="http://farm7.staticflickr.com/6238/6362150571_5268f71c2f.jpg" alt="some more alt text" width="500" height="500" />
		<span class="rotator-caption">Caption Two</span>
        </a>
	</li>
    <li class="hide">
        <a href="#" title="Title Two">
		<img src="http://farm7.staticflickr.com/6238/6362150571_5268f71c2f.jpg" alt="some more alt text" width="500" height="500" />
		<span class="rotator-caption">Caption Two</span>
        </a>
	</li>
</ul>

CSS

#rotator {
	height: 580px;
	width: 900px;
	float: left;
	position: relative;
	padding: 0px;
	margin: 0px;
}
#rotator li {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	display: block;
	margin: 0px;
}
#rotator li img {
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 10;
}
#rotator li span.rotator-caption {
	display: block;
	position: absolute;
	bottom: 40px;
	float: right;
	right: 35px;
	font-size: 3.2em;
	width: auto;
	height: auto;
	z-index: 20;
	padding-left: 40px;
	color:#fff;
	line-height: 1.3em;
}
.show,
.show * {
	display: block !important;
}
.hide,
.hide * {
	display: none !important;
}

JavaScript

var config = {
	speed: 4000,
	rotateid: '#rotator'
};

$(document).ready(function () {

	$(config.rotateid).each(function () {
		if ($(this).children().length > 1) {
			BeginSlideshow();
		}
	});
});

function BeginSlideshow() {
	$(config.rotateid + ' li').css({ opacity: 0.0 });
	$( config.rotateid + ' li:first').css({ opacity: 1.0 });

	if ($(config.rotateid + ' li').length > 0) {
		setInterval('RotateSlides()', config.speed);
	}
}
function RotateSlides() {
	var current = ($(config.rotateid + ' li.show') ? $(config.rotateid + ' li.show') : $(config.rotateid + ' li:first'));
	var next = ((current.next().length) ? current.next() : $(config.rotateid + ' li:first'));

	next.css({ opacity: 0.0 })
			        .addClass('show')
			        .animate({ opacity: 1.0 }, 1000)
					.removeClass('hide');

    current.animate({ opacity: 0.0 }, 1000, function () {
        $(this).addClass('hide');
    }).removeClass('show');
	var index = $('ul' + config.rotateid + ' li.show').index();
}