Question

好的，所以我有一个interpire购物车，所以很难定制..

反正

这是我的代码的链接 http://jsfiddle.net/WTvQX/

我无法让滚动条正常工作......

它在我的实际网站上的工作方式不同......

所以我需要帮助......重新做或者只是修理......

让我知道

Answer 1

您需要在左侧按钮中添加“relatedLeft”ID，但请尝试这样的操作......

演示：http://jsfiddle.net/wdm954/WTvQX/3/

$('#relatedRight').click(function() {
    $('#scool').animate({left: "+=100px"}, 'slow');
});
$('#relatedLeft').click(function() {
    $('#scool').animate({left: "-=100px"}, 'slow');
});

您可以根据自己的喜好调整像素距离和速度。

编辑：尝试这样的事情。第一部分找到所有图像的宽度。然后，当偏移量在范围内时，动画才会触发。

演示：http://jsfiddle.net/wdm954/WTvQX/5/

var w = 0;
$('#scroll img').each(function (i, val) {
    w += $(this).width();
});

$('#relatedRight').click(function() {
    var offset = $('#scroll').offset();
    if (offset.left < w) {
        $('#scroll').animate({left: "+=100px"}, 'slow');
    }
});
$('#relatedLeft').click(function() {
    var offset = $('#scroll').offset();
    if (offset.left > -w) {
        $('#scroll').animate({left: "-=100px"}, 'slow');
    }
});

编辑：这里还有一个代码选项。这个会更快停止滚动（注意这里也有CSS更改）。

演示：http://jsfiddle.net/wdm954/WTvQX/7/

var w = 0;
$('#scroll img').each(function (i, val) {
    w += $(this).width();
    w += parseFloat($(this).css('paddingRight'));
    w += parseFloat($(this).css('paddingLeft'));
    w += parseFloat($(this).css('marginRight'));
    w += parseFloat($(this).css('marginLeft'));
});

$('#scroll').css('width', w + 'px');

$('#relatedRight').click(function() {
    var offset = $('#scroll').offset();
    if (offset.left < 0) {
        $('#scroll').stop().animate({left: "+=100px"}, 'slow');
    }
});
$('#relatedLeft').click(function() {
    var offset = $('#scroll').offset();
    var b = $('#bar').width();
    if (offset.left > b-w) {
        $('#scroll').stop().animate({left: "-=100px"}, 'slow');
    }
});

Jquery滑块帮助

1 个答案: