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

$.next()セット内の直接要素を取得します。セットには、表示されている画像のみが含まれています。つまり、1つだけです。次の要素はどのようにあるのでしょうか？

ワーキングフィドル： http： //jsfiddle.net/gjzd7/

私が行ったのは、$.next()呼び出しを$.index()リクエストに変更し、画像の数でモジュロ化することだけです（したがって、存在しない画像を取得することはありません）。他に何か変更が必要な場合や説明が必要な場合はお知らせください。

于 2012-11-18T15:56:26.657 に答える
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 に答える
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 に答える