Solved

Website Banner Rotation

Posted on 2014-04-11
6
99 Views
Last Modified: 2014-04-14
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.
0
Comment
Question by:SimpleDude
  • 3
  • 3
6 Comments
 
LVL 2

Expert Comment

by:GowthamNatarajan
ID: 39994289
Do you want them as slide show shown one after the other... Or all the images shown simultaneously  rotating every 10 seconds?
0
 

Author Comment

by:SimpleDude
ID: 39994336
One after other, rotating every 10 seconds.

Image 1 static for 10 seconds

then

Image 2 static for 10 seconds

etc...
0
 
LVL 2

Expert Comment

by:GowthamNatarajan
ID: 39994524
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
ScreenConnect 6.0 Free Trial

Check out the updates in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI that improves session organization and overall user experience. See the enhancements for yourself!

 

Author Comment

by:SimpleDude
ID: 39994681
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
 
LVL 2

Accepted Solution

by:
GowthamNatarajan earned 500 total points
ID: 39998354
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
 

Author Closing Comment

by:SimpleDude
ID: 40000027
Thanks!
0

Featured Post

Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question