Question

我见过这个例子：http://jsfiddle.net/UwEe2/306/是用scrollleft实现的。

现在我做了一个修改。

这是我的脚本但未运行：http://jsfiddle.net/njKXB/39/

有什么问题？

Answer 1

我不知道您要通过在1元素内添加li列表而不需要ul容器来实现的目标。

只需用代码中的img元素替换文本就可以证明它是有效的。

http://jsfiddle.net/njKXB/54/

你无法滚动1左/右列表的原因是因为它正在包装。如果你增加高度，你可以看到它包裹在下面。因为它已经结束了，所以没有任何东西可以左右滚动。

http://jsfiddle.net/njKXB/55/

解决方案是删除float上的li并添加display:inline;，这会使它们全部停留在一行中。然后将white-space: nowrap;添加到容器中以防止包装。

http://jsfiddle.net/njKXB/75/

Answer 2

您的滚动量太小，您无法注意到移动。

此外，您可以设置为+=10px的动画，jQuery会自动将该值添加到当前值。

var scroll = 100;
var speed = 200;

$('#left').click(function() {
    $('#container').animate({
        'scrollLeft': '-=' + scroll
    }, speed);
});

$('#right').click(function() {
    $('#container').animate({
        'scrollLeft': '+=' + scroll
    }, speed);
});

$('#up').click(function() {
    $('#container').animate({
        'scrollTop': '-=' + scroll
    }, speed);
});

$('#down').click(function() {
    $('#container').animate({
        'scrollTop': '+=' + scroll
    }, speed);
});

另外，请勿使用结束标记关闭<img />标记。 <img />代码是自动关闭的：

<img src="http://nyquil.org/uploads/IndianHeadTestPattern16x9.png" />

演示：http://jsfiddle.net/UwEe2/311/

ScrollLeft无法运行

2 个答案: