Question

我正在使用jScrollPane构建一个水平图像滚动条，其中宽度不等的图像位于http://tmcdomains.com/jScrollPane/tmc_scroll_to_animate.html。

我希望每次点击箭头时，每个图像的宽度都会向前和向后移动滚动条。理想情况下，我也喜欢使用滚动条拖动来执行此操作，但我的jQuery知识充其量只是摇摇欲坠，因此我对单击功能感到满意。感谢stackoverflow和开发人员的文档，我得到了这么多。

我觉得解决方案正在盯着我，但我无法实现它。

因为我希望滚动器具有灵活性，并且在更新滚动条时我不会总是知道客户端图像的确切尺寸，我使用.each循环来循环遍历.image-中的图像。包装器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

在水平图像滚动条中为jScrollPane scrollByX分配变量？

0 个答案: