0

嗨，我使用 jQuery 制作了一个滑块，它工作正常，它具有向左和向右移动的功能，但是当它到达终点时，它无法再次找到起点，如果我从头开始按 prev，它不会转到最后一个条目。

我对 jQuery 不是特别好，所以不知道下一步我应该做什么。如果有人能指出我正确的方向并可能给出一个简短的解释，我将不胜感激。

提前致谢

我的代码在下面或查看我的jsFiddle：

索引.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 回答