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:
Also check the jquery modal dialog here.
Script:
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
);
}
HTML:
<image id="animate-img" src="" style="height:200px"/>
|
DEMO:
Comments
Post a Comment