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
0 comments:
Post a Comment