Auto Image Slideshow Using jQuery
June 19, 2012 1 Comment
This is a simple slideshow using jquery. Here we used the fade in fade out effect in Jquery.
Its just a 2-3 line code using jquery as compare to Javascript tradional code.
Here what we used
<script>
$(document).ready(function()
{
$('.img:gt(0)').hide();
setInterval(function() {
$(".img:first-child").fadeOut(3000).next(".img").fadeIn(3000).end().appendTo("#show-case")
}, 4000);
});
</script>
The complete HTML,CSS & Jquery code is here [click on read more]
<!DOCTYPE html>
<html>
<head>
<title>Fade In-Out - Auto Play Slide Show</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style>
#show-case
{
box-shadow:1px 1px 5px 2px #0d456d;
border-raduius:10px;
height:300px;
margin:10px auto;
width:600px;
}
img
{
position:absolute;
width:600px;
height:300px;
}
</style>
</head>
<body>
<div id="show-case">
<img class="img" src="auto/1.jpg">
<img class="img" src="auto/2.jpg">
<img class="img" src="auto/3.jpg">
<img class="img" src="auto/4.jpg">
<img class="img" src="auto/5.jpg">
<img class="img" src="auto/6.jpg">
</div>
<script>
$(document).ready(function()
{
$('.img:gt(0)').hide();
setInterval(function() {
$(".img:first-child").fadeOut(3000).next(".img").fadeIn(3000).end().appendTo("#show-case")
}, 4000);
});
</script>
</body>
</html>
Searched Tags- for this post :
0nikhil, nikhil ughade, Jquery, auto image slideshow using jquery, jquery slideshow, Fade in fade out slideshow, fade in effect image slideshow, simple jquery code for slideshow,
Hope it will help you.
Thanks,
Nikhil Ughade
(WEB DeSigNer)
Pune,IN
Nikhil on Deviant Art
http://designikx.deviantart.com
Art – community of artists and those devoted to art. Digital art, skin art, themes, wallpaper art, traditional art, photography, poetry / prose. Art prints.
Nikhil on Twitter
—— Advertise Starts ——
—— Advertise Ends ——
About Nikhil
Nice slideshow! Is it also possible to make the images appear in random order?
Jan