jQuery - 简单的图像旋转器答案

【问题标题】：jQuery - Simple Image RotatorjQuery - 简单的图像旋转器
【发布时间】：2012-11-18 15:42:48
【问题描述】：

在小提琴上，我找到了一个简单的旋转器，并试图让它在我的死亡简单的 HTML 页面中工作。

页面示例在这里：

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

简单的脚本应该定期切换图像，而不是只显示所有 3 张图像。并且不显示警报消息。我试过调试代码，当我删除函数Rotate()时，页面上会出现一条警告消息。

为什么Rotate() 函数不起作用？

【问题讨论】：

标签： javascript jquery html image-rotation

【解决方案1】：

$.next() 获取集合中的直接元素。您的集合仅包含可见图像 - 即只有一个。怎么会有下一个元素？

工作小提琴：http://jsfiddle.net/gjzd7/

我所做的只是将$.next() 调用更改为$.index() 请求，并将其与图像数量取模（因此您永远不会得到不存在的图像）。如果您需要对其进行任何修改或任何解释，请告诉我！

【讨论】：

【解决方案2】：

您还可以将图像缓存在一个 jQuery 数组中并像下面那样遍历它们。

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();

例如here

【讨论】：

【解决方案3】：

使用这个简单的脚本通过按钮旋转图像

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>

【讨论】：