Jquery滑块帮助

Question

好的，我有一个灵感购物车，所以很难自定义。

,

这里是我的代码链接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');
    }
});