CODEWITHSUNDEEP
javascriptjqueryhtmlimage-rotation
user984621
user984621

Reputation: 48443

jQuery - Simple Image Rotator

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?

Upvotes: 0

Views: 6333

Answers (3)

M. Lak
M. Lak

Reputation: 911

Use this simple script to rotate image using buttons

function rotateImage(degree) {
     $('#demo-image').animate({  transform: degree }, {
        step: function(now,fx) {
            $(this).css({
                '-webkit-transform':'rotate('+now+'deg)', 
                '-moz-transform':'rotate('+now+'deg)',
                'transform':'rotate('+now+'deg)'
            });
        }
        });
    }

<style>
#demo-image{padding:35px 15px;}
.btnRotate {padding: 15px 20px;border:1px solid #000; background-color:#999;color: #000;cursor: pointer;}
</style>


<div style="height:600px; width:800px; background-color:#CCC; border:1px solid #000; border-radius:6px; margin-left:auto; margin-right:auto;">
<div style="width:550px; margin-left:auto; margin-right:auto;">
<label>Rotate Image:</label>
<input type="button" class="btnRotate" value="30" onClick="rotateImage(this.value);" />
<input type="button" class="btnRotate" value="60" onClick="rotateImage(this.value);" />
<input type="button" class="btnRotate" value="90"onClick="rotateImage(this.value);" />
<input type="button" class="btnRotate" value="180" onClick="rotateImage(this.value);" />
<input type="button" class="btnRotate" value="-180" onClick="rotateImage(this.value);" />
<input type="button" class="btnRotate" value="360" onClick="rotateImage(this.value);" />
</div>
<div style="width:350px; margin-left:auto; margin-right:auto; margin-top:25px;"><img src="image-rotating-script-using-jquery .jpg" id="demo-image" /></div>
</div>

Upvotes: 0

Bruno
Bruno

Reputation: 5822

You could also cache the images in a jQuery array and iterate over them like below.

var imgs = $(".slides"); // images to be rotated
var current = 0;

function rotate( ) {
    // set current to next image
    current = current >= imgs.length ? 0 : current + 1; 
    $(".rotator").prop("src", $(imgs.get(current)).prop("src") );
    setTimeout( rotate, 5000 );
}

rotate();

Example here

Upvotes: 1

S&#233;bastien Renauld
S&#233;bastien Renauld

Reputation: 19662

$.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!

Upvotes: 1

Related Questions