Question

我在一个水平图像库上工作，该图库由几张带有幻灯片效果的专辑组成，但是当我想向左或向右滑动超过1400px时，它似乎无法正常工作。

我读到它超过10000px可能是错误的，我真的很远。

我的HTML代码非常基本。一个无序列表ul，每个li元素都包含一个img标记。有些li有一个特殊的'id'属性，带有专辑的名称（我当前的代码由7张专辑和大约80张80px宽的缩略图组成）。我希望能够点击相册名称（显示为图库下的导航），并且所有图库图像都将滑动以在此示例中的精确位置显示此相应相册的第一张图像0px（左侧）屏幕）。

JQUERY： //点击li 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

10,000像素问题是版本1.5的bug in jQuery版本1.4.3+。

所以你需要做的就是更新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');

});

具有水平滑动效果的图库 - 滑动超过1400px后的越野车

1 个答案: