jQuery的自定義滑塊無限循環

Question

我做了jQuery的滑塊使用本教程

http://css-plus.com/2010/09/create-your-own-jquery-image-slider/

，其中的圖片會自動滑動，但只有一次。我怎樣才能讓他們在無限循環中循環？

上線例如：

www.vytvarkajablonec.jecool.net/ati

我真的很感謝您的幫助！

Answer 1

只要將gallary設置回初始位置（如果它位於gallary的末尾）即可。

var oGallary = $('#gallery'); 
var gallarWidth = oGallary.width(); 

if(oGalary.position().left > stopPosition && oGallary.is(":animated") == false) 
{ 
    oGallary.animate({left : "-=" + imageWidth + "px"}); 
} 
else if (oGalary.position().left <= stopPosition && oGallary.is(":animated") == false) 
{ 
    oGallary.animate({left : "+=" + gallaryWidht + "px"}) // Get full length of the entire gallary 
} 

Answer 2

替換從教程中的JS代碼此：

$(document).ready(function() { 

    // Gallery 
    if (jQuery("#gallery").length) { 

     // Declare variables 
     var totalImages = jQuery("#gallery > li").length, 
      imageWidth = jQuery("#gallery > li:first").outerWidth(true), 
      totalWidth = imageWidth * totalImages, 
      visibleImages = Math.round(jQuery("#gallery-wrap").width()/imageWidth), 
      visibleWidth = visibleImages * imageWidth, 
      stopPosition = (visibleWidth - totalWidth); 

     jQuery("#gallery").width(totalWidth); 

     jQuery("#gallery-prev").click(function() { 
      if (jQuery("#gallery").position().left < 0 && !jQuery("#gallery").is(":animated")) { 
       jQuery("#gallery").animate({ 
        left: "+=" + imageWidth + "px" 
       }); 
      } 

      if (jQuery("#gallery").position().left === 0) { 
       jQuery("#gallery > li:last").prependTo($("#gallery")); 
      } 

      return false; 
     }); 

     jQuery("#gallery-next").click(function() { 
      if (jQuery("#gallery").position().left > stopPosition && !jQuery("#gallery").is(":animated")) { 
       jQuery("#gallery").animate({ 
        left: "-=" + imageWidth + "px" 
       }); 
      } 

      if (jQuery("#gallery").position().left === stopPosition) { 
       jQuery("#gallery > li:first").appendTo($("#gallery")); 
      } 

      return false; 
     }); 
    } 

});