Try as following.
It will work. I tried the code at my local, then it was not working.
But now it is working, if we write script within body tag:
<head>
<style>
#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;
}
</style>
</head>
<body>
<form>
<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" />
Caption One
</img></a>
</li>
<li class="hide">
<a href="#" title="Title Two">
<img src="http://farm7.staticflickr.com/6238/6362150571_5268f71c2f.jpg">
alt="some more alt text1" width="500" height="500" />
Caption Two
</img></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" />
Caption Two
</img></a>
</li>
</ul>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
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();
}
</script>
</body>