jQuery滑塊，如何返回到開始時，最後一個

您好我已經做了一個滑塊使用jQuery，它工作正常它有功能去左和右，但是當它到達結束它沒有辦法再次找到開始，如果我從頭開始按prev它不會去最後一個條目。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); 

    }); 

})

來源

2013-10-04 001221

在這裏，請檢查您的新索引值是否大於內容的長度，如果是，請將其設置爲第一個視圖。同樣，如果您的新索引小於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

來源

2013-10-04 12:06:13

多虧沒想到就是這麼簡單！ – 001221

jQuery滑塊，如何返回到開始時，最後一個

回答

相關問題