Home/ Questions/Q 8857053
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T14:30:01+00:00

On fiddle I found a simple rotator and trying to make it work in

  • 0

On fiddle I found a simple rotator and trying to make it work in my death-simple HTML page.

The page example is here:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <style>
        img { max-height: 100px }
        .rotator img { max-height: 200px; border: dashed 5px pink; }​
    </style>
    <script>
        $(document).ready(function() {
            alert('aaa');
            var $rotator = $(".rotator");
            $rotator.find("img:gt(0)").hide();
            setTimeout(Rotate, 1000);

            function Rotate() {
                var $current = $rotator.find("img:visible");
                var $next = $current.next();
                if ($next.length == 0) $next = $rotator.find("img:eq(0)");
                $current.hide();
                $next.show();
                setTimeout(Rotate, 5000);
            }​

        });
    </script>
  </head>
  <body>

<img src="http://2.bp.blogspot.com/-XI9yzJrwLac/TkLKLZF_kDI/AAAAAAAACFE/PxPDRzwa4tQ/s1600/cute+cats+pictures+3.jpg"/>
<img src="http://2.bp.blogspot.com/-NOD8B0m7MEE/TrvJAVAPYWI/AAAAAAAAAuE/KoffoIdQfNk/s640/cute-kittens-in-cups-pics.jpg"/>
<img src="http://1.bp.blogspot.com/_cWcuJM9QIG4/S7rOVzM1YcI/AAAAAAAAAgQ/RJx5oR55Ekk/s640/Animal+wallpapers%252Bcat+wallpapers%252Bmobile+wallpapers%252Bpc+wallpapers%252Bmobile+themes%252Bpc+themes+15cc.jpg"/>

<div class="rotator">
    <a href="http://google.com">
        <img src="http://2.bp.blogspot.com/-XI9yzJrwLac/TkLKLZF_kDI/AAAAAAAACFE/PxPDRzwa4tQ/s1600/cute+cats+pictures+3.jpg"/>
    </a>
    <a href="http://google.com">
        <img src="http://2.bp.blogspot.com/-NOD8B0m7MEE/TrvJAVAPYWI/AAAAAAAAAuE/KoffoIdQfNk/s640/cute-kittens-in-cups-pics.jpg"/>
    <a>
   <a href="http://google.com">     
       <img src="http://1.bp.blogspot.com/_cWcuJM9QIG4/S7rOVzM1YcI/AAAAAAAAAgQ/RJx5oR55Ekk/s640/Animal+wallpapers%252Bcat+wallpapers%252Bmobile+wallpapers%252Bpc+wallpapers%252Bmobile+themes%252Bpc+themes+15cc.jpg"/></a>
</div>

<label />​


  </body>
</html>

The simple script should regularly switch images, but instead of that are just displayed all 3 images. And the alert message is not displayed.
I’ve tried to debug the code and when I remove the function Rotate(), an alert message appears on the page.

Why the function Rotate() is not working?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    $.next() gets the immediate element in the set. Your set only contains visible images – i.e. only one. How could there be a next element?

    Working fiddle: http://jsfiddle.net/gjzd7/

    All I have done is changed the $.next() call into an $.index() request and modulo-ed it by the number of images (so you’ll never get a non-existent image). Let me know if you need anything else modified to it or any explanations!

    • 0