水平滑動效果圖像庫 - 滑動超過1400像素後的越野車

Question

我在一個水平圖像庫上工作，該圖庫由多張帶有滑動效果的相冊組成，但當我想向左滑動或似乎不能正常工作時超過1400像素左右。

我讀到它可能是超過10000像素，這是我真的很遠。

我的HTML代碼非常基礎。一個無序列表ul與每個包含img標籤的li元素。一些李有一個特殊的'id'屬性與專輯名稱（我目前的代碼是由7張專輯和約80張80像素寬度的圖片縮略圖組成）。 我希望能夠點擊專輯名稱（在圖庫下顯示爲導航），並且所有圖庫圖像將滑動以在此示例中的精確位置上顯示該對應專輯的第一圖像0px（左屏幕）。

JQUERY： //上點擊李galleryList事件

$('ul#fp_galleryList li').click(function(){ 
    //get old index of the element click previously 
    var old_index = $('ul#fp_galleryList li').find('.active').parent('li').index(); 

    //get index of the element clicked 
    var clicked_index = $(this).index(); 

    //find gallery name href associate to this li 
    var gallery_name = $(this).find('a:first').attr('href'); 

    //find left position in px of the first image of the clicked gallery 
    var offset = $(gallery_name).offset(); 
    var current_left = Math.ab(offset.left); 

    //if statement to find if we need to scroll to the right or left 
    if(old_index < clicked_index) 
    { 
    //scroll to left 
    $('ul.container').animate({'left': '-='+ current_left},'fast');  
    }else{ 
    //scroll to right 
    $('ul.container').animate({'left': '+='+ current_left},'fast'); 
    } 
}) 

我沒有任何問題，找到專輯點擊並從滑塊有多少像素移動，但它似乎並不被周圍之後1400px一次。

有沒有更好的方法來實現我想要的或者我在某處犯了什麼錯誤？ 感謝您的幫助

Answer 1

萬像素問題是bug in jQuery版本1.4.3+，在版本1.5中修復。

所以你所需要做的就是更新jQuery，但我建議使用最新版本。

---

更新：試試這個代碼（demo）：

//on click li galleryList event 
$('ul#fp_galleryList li').click(function() { 
    //get old index of the element click previously 
    var old_index = $('ul#fp_galleryList li').find('.active').parent('li').index(); 

    //remove active to all and add on the element clicked 
    $('ul#fp_galleryList li a').removeClass('active'); 
    $(this).find('a:first').addClass('active'); 

    //find index of the href associate to this li 
    var gallery_name = $(this).find('a:first').attr('href'); 
    var gallery_index = $(gallery_name).index(); 

    //find left position in px of the first image of the clicked gallery 
    var pos = $(gallery_name).position(); 

    //if statement to find if we need to scroll to the right or left 
    //scroll to left 
    $('ul.container').animate({ 
     'left': -pos.left + 2 // add two so you can see the line 
    }, 'fast'); 

});