Previous
Next
Create slide show presentation with fading effect
Post by efox | Date: 2008-09-12
In this article, I will shows how to use JavaScript to display images continuously in a slideshow presentation format, with a fade effect on image transitions. Any number of images and captions can be used, and timing is adjustable. I hope it will be useful for JavaScript newcomers. This script is cross compatible from IE 4 to 6 and Netscape 4 to 7. To implement this effect, just paste below code into the <BODY> section of your HTML document.
 |
<SCRIPT LANGUAGE="JavaScript">
var Pic = new Array();
Pic[0] = 'http://www.foxarc.com/en/cfxs/images/frames.jpg';
Pic[1] = 'http://www.foxarc.com/en/cfxs/images/masks.jpg';
Pic[2] = 'http://www.foxarc.com/en/cfxs/images/brushes.jpg';
Pic[3] = 'http://www.foxarc.com/en/cfxs/images/cliparts.jpg';
Pic[4] = 'http://www.foxarc.com/en/cfxs/images/text.jpg';
var t;
var j = 0;
var p = Pic.length;
var goNext = 0;
var preLoad = new Array();
for (i = 0; i < p; i++)
{
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
var ie5=(document.getElementById && document.all);
var ns6=(document.getElementById && !document.all);
nPlus = -5 //the % of fading for each step
speed = 50 //the speed
nOpac = 100
function FadeImg()
{
if(document.getElementById)
{
imgs = document.getElementById('demo');
opacity = nOpac + nPlus;
nOpac = opacity;
setTimeout('FadeImg()',speed);
if(opacity < 5)
{
document.SlideShow.src = preLoad[j].src;
j = j + 1;
if (j > (p - 1)) j = 0;
}
if(opacity>100 || opacity<0)
{
nPlus=-nPlus;
}
if(ie5)
{
imgs.style.filter="alpha(opacity=0)";
imgs.filters.alpha.opacity = opacity;
}
if(ns6)
{
imgs.style.MozOpacity = 0 + '%';
imgs.style.MozOpacity = opacity + '%';
}
}
}
</script>
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td id="demo" width="160" height="110"><img height="110" alt="" width="160" name="SlideShow" src="http://www.foxarc.com/en/cfxs/images/text.jpg" /></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
FadeImg();
</script>
Tags: