ok, the following code works fine in IE7 + and Chrome. but for some reason xfade is undefined in firefox
<html> <body> <div id="slider"></div> <script type="text/javascript"> var Klimateka = { Slider: function () { // Check if we have a slider div on page var slider = document.getElementById('slider'); if (slider != null) { var images = ["slide-image-1.jpg", "slide-image-2.jpg", "slide-image-3.jpg", "slide-image-4.jpg"]; var i = images.length; while (i) { i -= 1; var img = document.createElement("img"); img.src = "images/" + images[i]; slider.appendChild(img); } var d = document, imgs = new Array(), zInterval = null, current = 0, pause = false; imgs = d.getElementById("slider").getElementsByTagName("img"); for (i = 1; i < imgs.length; i++) imgs[i].xOpacity = 0; imgs[0].style.display = "block"; imgs[0].xOpacity = .99; setTimeout("xfade()", 3500); function 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(xfade, 3500); } else { setTimeout(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) + ")"; } } } }, bar: function () { } }; Klimateka.Slider();
I installed jsfiddler for testing: http://jsfiddle.net/rTtKh/10/
source share