https://www.fonotecaderadio.com/js/crossfade.js

1/*
2
3Better(?) Image cross fader (C)2004 Patrick H. Lauke aka redux
4
5Inspired by Steve at Slayeroffice http://slayeroffice.com/code/imageCrossFade/
6
7preInit "Scheduler" idea by Cameron Adams aka The Man in Blue
8http://www.themaninblue.com/writing/perspective/2004/09/29/
9
10Tweaked to deal with empty nodes 19 Feb 2006
11
12*/
13
14/* general variables */
15
16var galleryId = 'gallery'; /* change this to the ID of the gallery list */
17var gallery; /* this will be the object reference to the list later on */
18var galleryImages; /* array that will hold all child elements of the list */
19var currentImage; /* keeps track of which image should currently be showing */
20var previousImage;
21var preInitTimer;
22preInit();
23
24/* functions */
25
26function preInit() {
27    /* an inspired kludge that - in most cases - manages to initially hide the image gallery list
28       before even onload is triggered (at which point it's normally too late, and the whole list already
29       appeared to the user before being remolded) */
30    if ((document.getElementById)&&(gallery=document.getElementById(galleryId))) {
31        gallery.style.visibility = "hidden";
32        if (typeof preInitTimer != 'undefined') clearTimeout(preInitTimer); /* thanks to Steve Clay http://mrclay.org/ for this small Opera fix */
33    } else {
34        preInitTimer = setTimeout("preInit()",2);
35    }
36}
37
38function fader(imageNumber,opacity) {
39    /* helper function to deal specifically with images and the cross-browser differences in opacity handling */
40    var obj=galleryImages[imageNumber];
41    if (obj.style) {
42        if (obj.style.MozOpacity!=null) {
43            /* Mozilla's pre-CSS3 proprietary rule */
44            obj.style.MozOpacity = (opacity/100) - .001;
45        } else if (obj.style.opacity!=null) {
46            /* CSS3 compatible */
47            obj.style.opacity = (opacity/100) - .001;
48        } else if (obj.style.filter!=null) {
49            /* IE's proprietary filter */
50            obj.style.filter = "alpha(opacity="+opacity+")";
51        }
52    }
53}
54
55function fadeInit() {
56    if (document.getElementById) {
57        preInit(); /* shouldn't be necessary, but IE can sometimes get ahead of itself and trigger fadeInit first */
58        galleryImages = new Array;
59        var node = gallery.firstChild;
60        /* instead of using childNodes (which also gets empty nodes and messes up the script later)
61        we do it the old-fashioned way and loop through the first child and its siblings */
62        while (node) {
63            if (node.nodeType==1) {
64                galleryImages.push(node);
65            }
66            node = node.nextSibling;
67        }
68        for(i=0;i<galleryImages.length;i++) {
69            /* loop through all these child nodes and set up their styles */
70            galleryImages[i].style.position='absolute';
71            galleryImages[i].style.top=0;
72            galleryImages[i].style.zIndex=0;
73            /* set their opacity to transparent */
74            fader(i,0);
75        }
76        /* make the list visible again */
77        gallery.style.visibility = 'visible';
78        /* initialise a few parameters to get the cycle going */
79        currentImage=0;
80        previousImage=galleryImages.length-1;
81        opacity=100;
82        fader(currentImage,100);
83        /* start the whole crossfade process after a second's pause */
84        window.setTimeout("crossfade(100)", 2000);
85    }
86}
87
88function crossfade(opacity) {
89        if (opacity < 100) {
90            /* current image not faded up fully yet...so increase its opacity */
91            fader(currentImage,opacity);
92            /* fader(previousImage,100-opacity); */
93            opacity += 10;
94            window.setTimeout("crossfade("+opacity+")", 30);
95        } else {
96            /* make the previous image - which is now covered by the current one fully - transparent */
97            fader(previousImage,0);
98            /* current image is now previous image, as we advance in the list of images */
99            previousImage=currentImage;
100            currentImage+=1;
101            if (currentImage>=galleryImages.length) {
102                /* start over from first image if we cycled through all images in the list */
103                currentImage=0;
104            }
105            /* make sure the current image is on top of the previous one */
106            galleryImages[previousImage].style.zIndex = 0;
107            galleryImages[currentImage].style.zIndex = 100;
108            /* and start the crossfade after four second's pause */
109            opacity=0;
110            window.setTimeout("crossfade("+opacity+")", 4000);
111        }
112
113}
114
115/* initialise fader by hiding image object first */
116addEvent(window,'load',fadeInit)
117
118
119
120/* 3rd party helper functions */
121

122/* addEvent handler for IE and other browsers */
123function addEvent(elm, evType, fn, useCapture)
124// addEvent and removeEvent
125// cross-browser event handling for IE5+,  NS6 and Mozilla
126// By Scott Andrew
127{
128 if (elm.addEventListener){
129   elm.addEventListener(evType, fn, useCapture);
130   return true;
131 } else if (elm.attachEvent){
132   var r = elm.attachEvent("on"+evType, fn);
133   return r;
134 }
135}