问题与旋转木马图像库

我正在做一个简单的旋转木马图像库。目前我有两个图像，我希望画廊回到最后的第一个图像，我不知道如何让这个功能工作，加上我的上一个和下一个按钮因某种原因停止工作。我的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; 
     }); 
    } 

});

来源

2013-05-19 jsavage980

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

#gallery-wrapper { 
    position:relative; 
} 

#gallery { 
    position:absolute; 
}

和代码也需要执行内

$(window).load();

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

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

来源

2013-05-19 05:54:46 Stano

感谢您的回应和帮助Stano！我在想如何让画廊回到第一张幻灯片或在第二张幻灯片后回到第一张幻灯片。我想基本上把它连续滑动画廊？谢谢你提供的所有帮助！ – jsavage980

Stano非常感谢你！欣赏反应和帮助。它在FF中很好用，但在Chrome中，当我在第二张幻灯片上并单击下一个箭头时，它不会像我在ff中那样将它发送回第一个图像。不知道为什么它在ff中工作而在chrome中不一样？有任何想法吗？我非常感谢Stano的帮助！谢谢 – jsavage980

再次感谢您的帮助。真的很感激它！ – jsavage980

问题与旋转木马图像库

回答

相关问题