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?

[Webinar] Streamline your web hosting managementRegister Today

x
 
GowthamNatarajanConnect With a Mentor Commented:
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
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
All Courses

From novice to tech pro — start learning today.