JS
Use JQuery and Jquery.ui
$(window).load(function
() {
var v = $("img");
setInterval(function () {
$('#dvContain :nth-child(1)').next()
.show("bounce", 500)
.end()
.hide("explode", 1000)
.appendTo('#dvContain');
}, 2500);
});
CSS
<style type="text/css">
#dvContain
{
height: 200px;
width: 300px;
overflow: hidden;
padding: 0;
}
#dvContain img
{
position: absolute;
left: 0;
top: 0;
display: none;
}
#dvContain img.firstslide
{
display: block;
}
</style>
HTML
<div id="dvContain">
<img src="Images/Chrysanthemum.jpg"
width="300"
height="200"
class="firstslide"
/>
<img src="Images/Desert.jpg"
width="300"
height="200"
/>
<img src="Images/Hydrangeas.jpg"
width="300"
height="200"
/>
<img src="Images/Jellyfish.jpg"
width="300"
height="200"
/>
</div>