幫助修改我的自定義JQuery的滑塊允許連續滾動

Question

你可以在這裏查看我的自定義滑塊：http://www.awaismuzaffar.com/examples/index.html

而且下面是它的jQuery代碼：

$(document).ready(function() { 

     // Slider Function 

     var slideWidth = $('div.slide').width(); 

     // Set the left position of each div element 

     $('div.slide').each(function(index){ 
      $(this).css('left', index * slideWidth); // Multiply each div element by the index(0, 1 etc) so each div is placed inline 
     }); 

     // Next step is to animate the div elements 

     var clickCount = 1; 
     var slideCount = $('div.slide').length; 

     // Set the previous button to hide when loading with the first slide 

     if(clickCount == 1){ 
      $('a#previous-button').css('background-color', '#cccccc'); 
     } 

     $('a#next-button').click(function() { 
      if(clickCount < slideCount) { 
       $('div.slide').animate({"left":"-=" + slideWidth}, 'slow'); 
       $('a#previous-button').css('background-color', '#ffffff'); 
       clickCount++; 
      } 
      if(clickCount == slideCount) { 
       $('a#next-button').css('background-color', '#cccccc'); // Hide or grey out button 
      } 
     }); 

     $('a#previous-button').click(function() { 
      if(clickCount > 1){ 
       $('div.slide').animate({"left":"+=" + slideWidth}, 'slow'); 
       $('a#next-button').css('background-color', '#ffffff'); 
       clickCount--; 
      } 
      if(clickCount == 1){ 
       $('a#previous-button').css('background-color', '#cccccc'); // Hide or grey out button 
      } 
     }); 
    }); 

我想修改該滑塊允許連續滾動。

我不確定如何實現這一點，我假設我需要使用append，但我不知道如何使用它。

謝謝。

Answer 1

這裏有一個解決方案（有點像Shaz的），只是更少的代碼:)：

$(document).ready(function(){  
    $('#previous-button').click(function(){slidePanel(-1)}); 
    $('#next-button').click(function(){slidePanel(1)}); 

    var n = 0; 
    var animating = false; 
    $('#slide-'+n).css('display', 'block'); 
    function slidePanel(delta) 
    { 
     if(!animating) 
     { 
      animating = true; 
      var d = (delta > 0 ? $('#slide-'+n).width()*-1 : $('#slide-'+n).width()); 

      $('#slide-'+n).animate({ 
       left: "+="+d 
      }, 'slow', function() { $(this).css('display', 'none'); animating = false; }); 

      n = (n + delta) % $('div.slide').length; 
      n = n < 0 ? $('div.slide').length + n : n; 

      $('#slide-'+n).css('left', $('#slide-container').offset().left +(d*-1)); 
      $('#slide-'+n).css('display', 'block'); 
      $('#slide-'+n).animate({ 
       left: 0 
      }, 'slow'); 
     } 
    } 
}); 

Check out the sample here.

（我知道有一種方法來找出「當前幻燈片」有一個線性方程，但我認爲我死腦筋大氣壓：P）

Answer 2

你手工做的事情一點，我想其他人可能已經解決了這個問題。但在任何情況下，在點擊一個按鈕，你需要，當你打到最後的附加內容加載。所以如果我是你，我會這樣做：

$('a#next-button').click(function() { 
     ... 

     if(clickCount == slideCount) { 
      $('a#next-button').css('background-color', '#cccccc'); 
      $.get(moreContentUrl, objectRepresentingCurrentScrollPosition, loadContent); 
      spinner.show(); // show some kind of spinner here (you can also hook up a default spinner on all ajax events with a global ajax handler 
     } 
    }); 

    function loadContent(response) { 
     // append your content (your controller should return just the <div class="slide" /> elements, and give them a class="slide newSlide" so you can distinguish them below 
     // you can also do client side templating here. would be more efficient, then just return the items as objects instead of html 
     $('#slide-container').append(response.itemsHtml); 
     // slide all new divs right 
     $('div.newSlide').animate({"left":"+=" + slideWidth}, 'fast'); 
     $('div.newSlide').removeClass('newSlide'); 

     // update variables and un-grey the next button 
     $('a#previous-button').css('background-color', '#ffffff'); 
     slideCount += response.itemCount; 

     // hide the spinner shown when starting the load 
     spinner.hide(); 
    } 

給它一個鏡頭，希望它的作品。現在，清理的代碼一點點，我建議使用CSS類而非內聯的背景顏色等

Answer 3

嘗試是這樣的：http://fiddle.jshell.net/Shaz/dsBkf/