How can we add a transition between slideshow images?

JavaScript
1

I’m using this code for a slideshow; works well:

function funcHome() {
var i = 0; var path = new Array(); 
// List of images
path[0] = "../images/2016-banner.jpg"; 
path[1] = "../images/2014-main2l.jpg"; 
path[2] = "../images/2016-edge.jpg"; 
    function swapImage() 
        { 
            slide.src = path[i]; 
            if(i < path.length - 1) i++; 
            else i = 0; 
            setTimeout(swapImage,2500); 
        }
swapImage();
};

However, I wonder how to add a transition between images - is it possible with a simple script addition, such as with CSS? (I’m not using Jquery in this site.)

2

See http://www.brothercake.com/site/resources/scripts/transitions/ for a script that you can add that makes adding transitions between images extremely easy.

3

Thank you, Felgall. It appears to be a clickable script; the transitions occur with a click. The slideshow I’m running has no click functionality. I guess it should be called a rotating banner.

4

I have an example of using that script for a rotating banner at http://javascriptexample.net/anim02.php

5

Thanks, felgall, that looks like it!

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.