Website Banner Rotation

Hello all.

I have 4 images (banner1.png, banner2.png, banner3.png and banner4.png).

I need these images to rotate every 10 seconds, no transition effect is needed, but when the mouse overs the image, the transition effect should stop and stay on the image.

Is CSS the best way to do this? I will appreciate a sample code.

Thanks.
SimpleDudeAsked:
Who is Participating?
 
GowthamNatarajanCommented:
Try this for the 3 images...

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
   
    <script>
        function stop() {
            flag = 1;
        }
        function start() {
            flag = 0;
           
        }
        ar = ["koala.jpg", "Desert.jpg","Penguins.jpg"];
        var index = 0;
        window.setInterval(function () {
            if (flag == 0) {
                try {
                    if (index == 2) index = 0;
                    else index = index + 1;
                    document.getElementById("imgID").src = ar[index];
                }
                catch (e) {
                    alert(e.description);
                }
            }
        }, 3000);
       
       
    </script>
<body>
<div id="images" ">
        <img id="imgID" src="Koala.jpg" onmouseover="stop(this)" onmouseout="start(this)" />
    </div>
</div>
</body>
</html>
0
 
GowthamNatarajanCommented:
Do you want them as slide show shown one after the other... Or all the images shown simultaneously  rotating every 10 seconds?
0
 
SimpleDudeAuthor Commented:
One after other, rotating every 10 seconds.

Image 1 static for 10 seconds

then

Image 2 static for 10 seconds

etc...
0
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

 
GowthamNatarajanCommented:
Please find the sample code below.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
   
    <script>
        ar = ["koala.jpg", "Desert.jpg", "koala.jpg", "Penguins.jpg"];
        var index = 1;
        window.setInterval(function () {
            try{
                document.getElementById("imgID").src = ar[index];
                if (index == 3) index = 0;
                else index = index + 1;
            }
            catch(e){
                alert(e.description);
            }
       
        }, 3000);
    </script>
<body>
<div id="images">
        <img id="imgID" src="Koala.jpg" />    
    </div>
</div>
</body>
</html>
0
 
SimpleDudeAuthor Commented:
Hi GowthamNatarajan

Thanks for the answer!

I tried the code, but the slideshow doesnt stop when I mouseover the banner. Anyway to make it stop?

Thanks!
0
 
SimpleDudeAuthor Commented:
Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.