A simple jQuery slideshow
I have used jQuery animate()
method to create a simple slideshow. I am toggling the opacity of the image
from 0 to 1 and also changing the URL of the image.
Script
<script
type="text/javascript">
function AnimateImg()
{
var
imgUrls = new Array("picture1.png",
"picture2.png", " picture3.png ");
var
opacVal = 0;
var
currentImage = imgUrls[0];
var index
= 0;
var DELAY
= 1000;
setInterval(function()
{
$("#animate-img").animate({
opacity: opacVal }, DELAY, function() {
if
(opacVal == 0) {
opacVal = 1;
}
else
{
opacVal = 0;
}
if
(index == imgUrls.length) {
index = 0;
}
if
(opacVal == 0) {
currentImage =
imgUrls[index++];
$("#animate-img").attr("src", currentImage);
}
});
}, DELAY
);
}
</script>
|
HTML
<image
id="animate-img"
src=""
style="height:200px"/>
|
Demo
Related Articles:
-
Advertise here with BSA Info: This is a review of a paid resource. There are lots of jQuery... Read Full Story » -
Advertise here with BSA Many of us probably heard the EU Cookie Law already and thinking about... Read Full Story » -
Advertise here with BSA Many of us probably heard the? EU Cookie Law already and thinking... Read Full Story » -
jQuery E-Books Collection (PDF) English | PDF | Ebook Collection | All In One | 561 MB... Read Full Story » -
I'm designing this ( http://omgcarlos.com/demo/omgDynami-forms/ ) dynamic form for a client... Read Full Story »
Comments
