jquery - CSS3スライドショーの自動再生

Question

ここで見つけたデザイン済みのスライドショーを変更しました。ユーザーが矢印をクリックしなくても自動再生されるように編集したいと思います。ただし、これを行う方法がわかりません。jQueryでクリックをシミュレートできますか？これはそれを行うための最良の方法ですか？

Answer 1

彼はcheckedラジオボタンの属性を使用していると言いました。

スライド画像を制御するために、ラジオ入力ボタンとそのラベルを：checked疑似クラスとともに使用しました。したがって、ある画像から別の画像に変更しても、ブラウザはブラウザの履歴にステップを作成しません（他のCSSスライドショーのように）。

私のスライダーを楽しんでください:)

したがって、チェックボックスの配列を通過するJQueryを使用してループを作成することができます。チェックボックスセレクターを使用してチェックボックスの配列を取得し、チェックされたセレクターを使用して現在チェックされているラジオボタンを見つけることにより、現在チェックされているラジオボタンを繰り返すことができます。

Answer 2

これが私が思いついた解決策です。現在のスライドを取得し、3.5秒ごとに進みます。これは、チュートリアルに示されている5つのスライドではなく、4つのスライドで特に機能します。私のスクリプトは、最後のスライドに到達して最初のスライドにループバックすること、およびユーザーが自分でスライドを進めた場合は最新のスライドから進むことも考慮しています。

各スライドは次のようになります...

<input value="0" type="radio" id="button-1" name="controls" checked="checked"/>

...現在のスライドでchecked="checked"を使用します。各スライドの値は0、1、2、3、...、nです。

<script type="text/javascript">
        var tmp = 0;
        $(document).ready(
            function() { 
                tmp = parseInt($('input[name=controls]:checked').val());
                var tid = setInterval(advance, 3500);
            }
        );

        function advance() {
            if(tmp == 3) {
                $('input[name=controls]:eq(0)').attr('checked', 'checked');
                tmp = 0;
            }
            else { 
                $('input[name=controls]:eq(' + (tmp+1) + ')').attr('checked', 'checked'); 
                tmp = parseInt($('input[name=controls]:checked').val());
            }
        }

        function abortTimer() { clearInterval(tid); }
    </script>