2

我正在使用 jScrollPane 在http://tmcdomains.com/jScrollPane/tmc_scroll_to_animate.html构建一个带有不同宽度图像的水平图像滚动条。

我想让滚动窗格在每次单击箭头时按每个图像的宽度向前和向后移动。理想情况下，我也喜欢滚动条拖动来执行此操作，但我的 jQuery 知识充其量是不稳定的，所以我会对点击功能感到满意。多亏了 stackoverflow 和开发人员的文档，我才走到了这一步。

我觉得解决方案正盯着我看，但我无法做到。

因为我希望滚动条灵活，并且在更新滚动条时我并不总是知道客户图像的确切尺寸，所以我使用 .each 循环循环浏览 .image-wrapper div 中的图像，从每个图像中提取宽度，并将总宽度值分配给 var imagesWidth 以在 .image-wrapper 上设置宽度：

// set the width of .image-wrapper based on the total width of the images in the div
// webkit browsers need width declared explicitly in image tag
var imagesWidth = 0;
var imageScrollX = 0;
$('.image-wrapper > img').each(function(index, image) {
    var $image = $(image);
    imagesWidth += $image.outerWidth() + parseInt($image.css('margin-left'), 10) + parseInt($image.css('margin-right'), 10);
    imageScrollX = $image.outerWidth();
});             
$('.image-wrapper').width(imagesWidth);

这工作得很好。我正在尝试使用相同的循环将每个图像的宽度分配给 var imageScrollX，并使用该变量来定义每次单击时 scrollByX 的 X 值：

var api = pane.data('jsp');                     
$('#left-arrow').bind(
    'click',
    function()
    {
        api.scrollByX(-imageScrollX);                       
        return false;
    }
);
$('#right-arrow').bind(
    'click',
    function()
    {
        api.scrollByX(imageScrollX);
        return false;
    }
);

这是一种工作，但发生的是 scrollByX 值为每次点击分配序列中最后一个图像的宽度。知道如何单击以提取序列中每个图像的唯一宽度，而不是序列中的最后一个图像吗？

带有可见代码的工作文件位于http://tmcdomains.com/jScrollPane/tmc_scroll_to_animate.html

4

0 回答 0