fade in / fade out javascript slideshow





5
Date Submitted Thu. Nov. 29th, 2007 12:46 PM
Revision 1 of 1
Helper HRCerqueira
Tags images | JavaScript | sl
Comments 0 comments
This is a simple fade in / fade out javascript slideshow, search engine friendly with low resource usage.

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>

 

Hernāni Cerqueira

www.hrcerqueira.com

Comments

There are currently no comments for this snippet.

Voting