0

私の考えは、最初にすべてのアイテムを非表示にしてから最初のアイテムを表示し、次に現在のliを繰り返し非表示にしてから次のアイテムを表示する画像を含むリストを作成することでした。次に、最後のアイテムに到達すると、それを非表示にしてから最初のアイテムを表示し、プロセスを最初からやり直します。


ドキュメント(準備完了)で、次のことを実行したい:

  1. すべてのアイテムを隠す
  2. 最初のアイテムを表示
  3. 繰り返す
    1. 遅れ
    2. if on last (このアイテムを非表示 / 最初のアイテムを表示)
    3. if else (このアイテムを非表示 / 次のアイテムを表示)
  4. onclick (次へボタン)
    1. if on last (このアイテムを非表示 / 最初のアイテムを表示)
    2. if else (このアイテムを非表示 / 次のアイテムを表示)
  5. onclick (前のボタン)
    1. 最初の場合 (このアイテムを非表示 / 最後のアイテムを表示)
    2. if else (このアイテムを非表示 / 前のアイテムを表示)

ここに私が使用しているリストがあります:

<ul id="rotator">
    <li class="rimage"><img /></li>
    <li class="rimage"><img /></li>
    <li class="rimage"><img /></li>
</ul>

また、異なるアイテムを切り替える左右のボタンが欲しいです。

また、おまけとして、画像を左右にスライドさせることは可能ですか?

ありがとう!

アップデート:

考えてみると、おそらく、私が持っているコードを含めずにこれを尋ねるべきではありません.とにかく、これは私がこれまでに行ったことです.

PS:おそらくおわかりのように、私はJavascriptに本当に慣れていません...

$(document).ready(function(){
    $('.rimage').hide(function(){
        $('.rimage:first').fadeIn(100, function(){
            var a = 0;
            var mouseover = false;

            $('#rotator').mouseover(function(){
                mouseover = true;
            });
            $('#rotator').mouseout(function(){
                mouseover = false;
            });


            //BEGIN LOOP
            while (a != 1 && mouseover == false){
                if(this == last){
                    $(this).hide("slide", {direction: "up"}, 400, function(){
                        $('.rimage:first').show("slide", {direction: "up"}, 400);
                    });
                };
                else{
                    $(this).hide("slide", {direction: "up"}, 400, function(){
                        $(this).next().show("slide", {direction: "up"}, 400);
                    });
                };
            };
            //END LOOP

            //BUTTONS

            //NEXT BUTTON
            $('rightarrow').click(function(){
                if(this, '.rimage:last'){
                    $(this).hide("slide", {direction: "up"}, 400, function(){
                        $('.rimage:first').show("slide", {direction: "up"}, 400);
        });
        };
        else{
            $(this).hide("slide", {direction: "up"}, 400, function(){
                $(this).next().show("slide", {direction: "up"}, 400);
            });
            };
    });

    //PREV BUTTON
    $('leftarrow').click(function(){
        if(this, '.rimage:first'){
            $(this).hide("slide", {direction: "down"}, 400, function(){
                $('.rimage:last').show("slide", {direction: "down"}, 400);
        });
            };
        else{
            $(this).hide("slide", {direction: "down"}, 400, function(){
                $(this).next().show("slide", {direction: "down"}, 400);
        });
        };
         });

     //END BUTTONS
        });
    });
});
4

2 に答える 2

1

現在、コードに問題がありますか? Stackoverflow は、コード プロジェクトをドロップオフして、他の誰かに完成させるだけの場所ではありません。

これは、Jquery を使用して独自のマークアップを作成するための優れたチュートリアルです。

http://tutorialzine.com/2010/11/rotating-slideshow-jquery-css3/

于 2011-02-21T04:37:49.920 に答える
0

jQuery 用のこのプラグインも参照してください。私は以前にそれを使用しましたが、実装は簡単です。 http://sorgalla.com/projects/jcarousel/

于 2011-02-21T04:46:04.963 に答える