fade in / fade out javascript slideshow
5
This is a simple fade in / fade out javascript slideshow, search engine friendly with low resource usage.
More info here.
Cheers
More info here.
Cheers
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);
}
<span id="slideshow" style="position: relative">
<img src="/mfiles/tiago1.JPG" style="position: absolute; top: 0px; left: 200px" />
<img src="/mfiles/tiago2.JPG" style="position: absolute; top: 0px; left: 200px" />
<img src="/mfiles/tiago3.JPG" style="position: absolute; top: 0px; left: 200px" />
<img src="/mfiles/tiago4.JPG" style="position: absolute; top: 0px; left: 200px" />
<img src="/mfiles/tiago5.JPG" style="position: absolute; top: 0px; left: 200px" />
</span>
<script>
window.addEvent('load', function() {
new SlideShow(document.getElementById('slideshow'), 25, 500, true);
});
</script>






There are currently no comments for this snippet.