问题与旋转木马图像库

Question

我正在做一个简单的旋转木马图像库。目前我有两个图像，我希望画廊回到最后的第一个图像，我不知道如何让这个功能工作，加上我的上一个和下一个按钮因某种原因停止工作。我的jq/js技能缺乏，并希望得到这个工作的任何帮助。这里是我的我的代码[1]的jsfiddle：http://jsfiddle.net/jsavage/kGAxa/39/

$(document).ready(function() { 
    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-wrapper").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" 
       }); 
      } 
      return false; 
     }); 

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

}); 

Answer 1

测试你的小提琴，JavaScript的效果很好，唯一的CSS缺少以下属性：

#gallery-wrapper { 
    position:relative; 
} 

#gallery { 
    position:absolute; 
} 

和代码也需要执行内

$(window).load(); 

而不是$(document).ready();事件处理程序才能正常工作。

http://jsfiddle.net/kGAxa/42/