Here is my code, but it's not functioning correctly: Here is my style sheet
<style>
body
{
overflow:hidden;
}
div
{
position:absolute;
top:-330px;
left:-50px;
}
#slideshow img
{
position:absolute;
z-index:8;
}
#slideshow img.active
{
z-index:10;
transition-delay:5s;
transition:all 1s ease;
transform:scale(1.25);
}
#slideshow img.last-active
{
z-index:9;
}
</style>
</head>
Body statement
<body>
<div id="slideshow">
<img src="C:\Documents and Settings\Aravind.P\Desktop\JQuery\Matt Wiebe_Manhattan Skyline_akRhRQ.jpg" class="active">
<img src="C:\Documents and Settings\Aravind.P\Desktop\JQuery\Ray_A New Day_YkFhSGU.jpg">
<img src="C:\Documents and Settings\Aravind.P\Desktop\JQuery\Luke Ma_Shinjuku Skyline - Sony A7r_a0dkRw.jpg">
</div>
Here is my jquery where I created a slideshow by adding classes
<script>
function slideShow()
{
var $active=$("#slideshow img.active");
var $next=$active.next().length ? $active.next():$("#slideshow img:first");
$active.addClass("last-active");
$next
.addClass("active");
$active.removeClass("active anim last-active");
}
$(function()
{
setInterval("slideShow()",5000);
});
</script>
In the script above, I am checking if there is a next image, and if not, pointing back to the first image