我见过这个例子:http://jsfiddle.net/UwEe2/306/是用scrollleft
实现的。
现在我做了一个修改。
这是我的脚本但未运行:http://jsfiddle.net/njKXB/39/
有什么问题?
答案 0 :(得分:1)
我不知道您要通过在1
元素内添加li
列表而不需要ul
容器来实现的目标。
只需用代码中的img
元素替换文本就可以证明它是有效的。
你无法滚动1
左/右列表的原因是因为它正在包装。如果你增加高度,你可以看到它包裹在下面。因为它已经结束了,所以没有任何东西可以左右滚动。
解决方案是删除float
上的li
并添加display:inline;
,这会使它们全部停留在一行中。然后将white-space: nowrap;
添加到容器中以防止包装。
答案 1 :(得分:0)
您的滚动量太小,您无法注意到移动。
此外,您可以设置为+=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" />