Preload af billeder i js slideshow og explore fejl
HejJeg fandt et lille JS slideshow på nettet, da mine evner i forhold til js er temlig begrænset (manglende)
Kunne man mon rimelig let tilføje scriptet et preload af billederne?
Startede med at teste det i FF, virker fint, men virker ikke i IE, nogen der kan hjælpe med det også.
På forhånd tak.
/Søren
Herunder koden:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Brander</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<base target="_top" />
<script type="text/JavaScript" src="mine_scripts.js"></script>
</head>
<body >
<span id="slideshow" style="position: relative">
<img src="1.jpg" style="position: absolute; top: 0px; left: 200px" >
<img src="2.jpg" style="position: absolute; top: 0px; left: 200px" >
<img src="3.jpg" style="position: absolute; top: 0px; left: 200px" >
<img src="4.jpg" style="position: absolute; top: 0px; left: 200px" >
<img src="5.jpg" style="position: absolute; top: 0px; left: 200px" >
</span>
<script>
window.addEvent('load', function() {new SlideShow(document.getElementById('slideshow'), 40, 500, false);});
</script>
</body>
</html>
og her min tilknyttede js fil
Object.prototype.addEvent = function(evtType, func) {
if (this.addEventListener) {
this.addEventListener(evtType, func, true);
} else if (this.attachEvent) {
this.attachEvent('on' + evtType, func);
} else {
this['on' + evtType] = func;
}
}
function SlideShow(slideel, faddingSpeed, stopTime, stopOnMouseOver) {
var mouseIsOver = false;
if (stopOnMouseOver) {
slideel.addEvent('mouseover', function() {
mouseIsOver = true;
});
slideel.addEvent('mouseout', function() {
mouseIsOver = false;
self.next();
});
}
this.next = function() {
if (mouseIsOver)
return;
this.current.fadeOut();
this.current = this.current.nextSlide;
this.current.fadeIn();
}
function createSlides() {
var imgs = slideel.getElementsByTagName('img');
var slides = [];
for (var i = 0; i < imgs.length; i++) {
slides[i] = new SlideShowImage(imgs[i], self);
}
for (var i = 0; i < slides.length; i++) {
if (i == slides.length - 1)
slides[i].nextSlide = slides[0];
else
slides[i].nextSlide = slides[i + 1];
}
self.current = slides[0];
slides[0].fadeIn();
function SlideShowImage(img, slideShow) {
img.style.opacity = '0';
this.fadeIn = function() {
var i = 0;
while (++i <= 40) {
window.setTimeout(function() {
img.style.opacity = parseFloat(img.style.opacity) + 0.025;
}, i * faddingSpeed);
}
window.setTimeout(function() {
slideShow.next();
}, 40 * faddingSpeed + stopTime);
}
this.fadeOut = function() {
var i = 0;
while (++i <= 40) {
window.setTimeout(function() {
img.style.opacity = parseFloat(img.style.opacity) - 0.025;
}, i * faddingSpeed);
}
}
}
}
var self = this;
createSlides(slideel);
}
