<!doctype html>
<html>
<head>
<title>Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
#fade_effect{position:relative;}
#fade_effect img{position:absolute;z-index:1;background-color:white}
#fade_effect img.active{z-index:3}
</style>
</head>
<body>
<div class="container">
<div id="fade_effect">
<img class="active" src="http://www.simonbattersby.com/images/photography/insects/Gallery11.jpg" />
<img src="http://www.simonbattersby.com/images/photography/insects/Gallery12.jpg" />
<img src="http://www.simonbattersby.com/images/photography/insects/Gallery10.jpg" />
</div>
</div>
</body>
<script type="text/javascript">
function cycleImages(){
var $active = $('#fade_effect .active');
var $next = ($active.next().length > 0) ? $active.next() : $('#fade_effect img:first');
$next.css('z-index',2);
$active.fadeOut(1500,function(){
$active.css('z-index',1).show().removeClass('active');
$next.css('z-index',3).addClass('active');
if ($('#fade_effect .active').next().length > 0) setTimeout('cycleImages()',1000);
});
}
$(document).ready(function(){
setTimeout('cycleImages()', 1000);
})
</script>
</html>
<html>
<head>
<title>Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
#fade_effect{position:relative;}
#fade_effect img{position:absolute;z-index:1;background-color:white}
#fade_effect img.active{z-index:3}
</style>
</head>
<body>
<div class="container">
<div id="fade_effect">
<img class="active" src="http://www.simonbattersby.com/images/photography/insects/Gallery11.jpg" />
<img src="http://www.simonbattersby.com/images/photography/insects/Gallery12.jpg" />
<img src="http://www.simonbattersby.com/images/photography/insects/Gallery10.jpg" />
</div>
</div>
</body>
<script type="text/javascript">
function cycleImages(){
var $active = $('#fade_effect .active');
var $next = ($active.next().length > 0) ? $active.next() : $('#fade_effect img:first');
$next.css('z-index',2);
$active.fadeOut(1500,function(){
$active.css('z-index',1).show().removeClass('active');
$next.css('z-index',3).addClass('active');
if ($('#fade_effect .active').next().length > 0) setTimeout('cycleImages()',1000);
});
}
$(document).ready(function(){
setTimeout('cycleImages()', 1000);
})
</script>
</html>
