0

在小提琴上，我找到了一个简单的旋转器，并试图让它在我的死亡简单的 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()不起作用？

4

3 回答 3

1

您还可以将图像缓存在 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();

这里的例子

于 2012-11-18T16:23:07.933 回答
1

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

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

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

于 2012-11-18T15:56:26.657 回答
0

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

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>
于 2017-01-18T10:53:37.940 回答