Cool Javascript|slideshow function|rotator function part2
This is a second method for the slideshow function | rotator function.
The difference about this one is that the image fades more smoothly.
A. To put in the header:
1. the javscript page
B. To put in the body:
The slideshow
<script src=”js/ja.header.js” type=”text/javascript”></script>
<script type=”text/javascript”>var fadetime = “3000″;</script>
<div id=”ja_header_jsfade” >
<img src=”images/img_1.jpg” alt=”Arch-Idee” width=”327″ height=”535″ style=”position: absolute; top: auto; left: auto; float:right; display: ‘none’;” />
<img src=”images/img_2.jpg” alt=”Arch-Idee” width=”327″ height=”535″ style=”position: absolute; top: auto; left: auto; float:right; display: ‘none’;” />
<img src=”images/img_3.jpg” alt=” Arch-Idee” width=”327″ height=”535″ style=”position: absolute; top: auto; left: auto; float:right; display: ‘none’;” />
<img src=”images/img_4.jpg” alt=”Arch-Idee” width=”327″ height=”535″ style=”position: absolute; top: auto; left: auto; float:right; display: ‘none’;” />
C. The JS page:
1. ja.header.js
/*
Image Cross Fade Redux
Version 1.0
Last revision: 02.15.2006
*/
window.addEventListener?window.addEventListener(’load’,so_init,false):window.attachEvent(’onload’,so_init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false, div;
var fadetime = 3000;
function so_init()
{
if(!d.getElementById || !d.createElement)return;
imgs = d.getElementById(’ja_header_jsfade’).getElementsByTagName(’img’);
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = ‘block’;
imgs[0].xOpacity = .99;
setTimeout(so_xfade,fadetime);
}
function so_xfade()
{
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = ‘block’;
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0)
{
imgs[current].style.display = ‘none’;
current = nIndex;
setTimeout(so_xfade,fadetime);
}
else
{
setTimeout(so_xfade,50);
}
function setOpacity(obj)
{
if(obj.xOpacity>.99)
{
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = ‘alpha(opacity=’ + (obj.xOpacity*100) + ‘)’;
}
}