0

こんにちは、jQueryを使用してスライダーを作成しました。左右に移動する機能はありますが、最後に到達すると再び開始を見つける方法がなく、開始から前を押すと移動しません最後のエントリー。

私は jQuery が特に得意ではないので、次に何をすべきかを知る知識がありません。誰かが親切に私を正しい方向に向けて、おそらく簡単な説明をしていただければ幸いです。

前もって感謝します

私のコードは以下であるか、私のjsFiddleを表示します:

index.html

        <div class="bottom">  
                  <div class="rotatorarrows">
              <input type="hidden" id="currentShownDiva" value="1"/>
            <ul>
            <li><a class="parrows" id="parrowleft">Prev</a></li>
            <li><a class="parrows" id="parrowright">Next</a></li>
            </ul>
            </div>
        <div class="timeline_rotator">
        <!-- FIRST STORY -->
            <div class="contentrotator">
            <span class="news_element"><h2 class="timeline_year">2003</h2></span>
            <span class="news_element"><h3 class="timeline_heading">Apple Launches iPhone</h3>
            <p class="timeline_content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></span>
            </div>
                        <!-- FIRST STORY -->
            <div class="contentrotator">
            <span class="news_element"><h2 class="timeline_year">2004</h2></span>
            <span class="news_element"><h3 class="timeline_heading">Apple Launches iPhone</h3>
            <p class="timeline_content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></span>
            </div>
                        <!-- FIRST STORY -->
            <div class="contentrotator">
            <span class="news_element"><h2 class="timeline_year">2005</h2></span>
            <span class="news_element"><h3 class="timeline_heading">Apple Launches iPhone 2005</h3>
            <p class="timeline_content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></span>
            </div>


         </div>  <!-- End rotator-->
         </div> <!-- end bottom -->

js/js.js

// JavaScript ドキュメント

$(document).ready(function(){

$('.contentrotator').hide();
    $('.contentrotator:first').show();
    $('#parrowleft').off('click').on('click', function() {
        var currentView = parseInt($('#currentShownDiva').val(), 10) - 1;
        if (currentView < 1) return;
        $('.contentrotator').hide();
            $('.contentrotator:eq(' + (currentView - 1) + ')').show();
            $('#currentShownDiva').val(currentView);
    });

    $('#parrowright').off('click').on('click', function() {
        var currentView = parseInt($('#currentShownDiva').val(), 10) + 1;
        if (currentView > $('.contentrotator').length) return;
        $('.contentrotator').hide();
        $('.contentrotator:eq(' + (currentView -1) + ')').show();
        $('#currentShownDiva').val(currentView);

    });

})
4

1 に答える 1

1

ここで、新しいインデックス値がコンテンツの長さよりも大きいかどうかを確認し、大きい場合は最初のビューに設定します。同様に、新しいインデックスが 1 未満の場合は、コンテンツの長さに設定します。

$('.contentrotator').hide();
    $('.contentrotator:first').show();
    $('#parrowleft').off('click').on('click', function() {
        var currentView = parseInt($('#currentShownDiva').val(), 10) - 1;
        if (currentView < 1) {
            currentView = $('.contentrotator').length;
        }
        $('.contentrotator').hide();
            $('.contentrotator:eq(' + (currentView - 1) + ')').show();
            $('#currentShownDiva').val(currentView);
    });

    $('#parrowright').off('click').on('click', function() {
        var currentView = parseInt($('#currentShownDiva').val(), 10) + 1;
        if (currentView > $('.contentrotator').length) {
        currentView = 1;
        };
        $('.contentrotator').hide();
        $('.contentrotator:eq(' + (currentView -1) + ')').show();
        $('#currentShownDiva').val(currentView);

    });

フィドル

于 2013-10-04T12:06:13.733 に答える