Description:
In this article, I will explain how to add automatic image slideshow without any
plugin using Jquery.
Nowadays, the most popular web design
trend is a sliding horizontal image on a website. It is very effective method
to attract the user and increase the website usability.
Lot of websites using automatic image
slideshow for displaying their products and it will be the effective way to
attract users.
To implement Automatic Image Slideshow,
there are lot of plugins are available. I don’t think that a jquery plugin is
required for this. We can easily achieve with simple javascript code.
In this example program, I am using
simple javascript code to perform auto image slideshow.
Example program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script
type="text/javascript">
$(document).ready(function () {
$("#AutoSlide
> div:gt(0)").hide();
setInterval(function () {
$('#AutoSlide
> div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#AutoSlide');
}, 3000);
});
</script>
</head>
<body>
<form
id="form1"
runat="server">
<div id="AutoSlide">
<div>
<img src="Water%20lilies.jpg" alt="Img1" />
</div>
<div>
<img src="Sunset.jpg" alt="Img2" />
</div>
<div>
<img src="Blue%20hills.jpg" alt="Img3" />
</div>
</div>
</form>
</body>
</html>
Automatic
image slideshow, image slideshow without plugin, simple auto image slideshow
using jquery, javascript image slideshow, Image Slideshow
using Jquery, Creating auto image Slideshow with Jquery
0 comments:
Post a Comment