問題與旋轉木馬圖像庫

我正在做一個簡單的旋轉木馬圖像庫。目前我有兩個圖像，我希望畫廊回到最後的第一個圖像，我不知道如何讓這個功能工作，加上我的上一個和下一個按鈕因某種原因停止工作。我的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

問題與旋轉木馬圖像庫

回答

相關問題