Question

你好我使用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);

    });

})

Answer 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);

    });

Fiddle

jQuery滑块，如何在到达最后一个时返回到开头

1 个答案: