我有一系列的div悬浮在水平线上,我有一个固定宽度的div容器,overflow:hidden。最终,我想按左右div/button来滚动这些项目(而不是使用滚动条)。我无法让 .animate() 正常工作。我希望每次点击都可以使列表项移动。它应该类似于亚马逊的“购买此商品的顾客还买了”列表,您可以以同样的方式滚动它。我曾尝试过使用 .mousedown 并在按住时移动它(类似于真正的滚动),但想先尝试更简单的方法。以下是fiddle和代码:http://jsfiddle.net/stfzy/16/
HTML:
CSS:
任何帮助都将不胜感激。谢谢!
<div id="container">
<div id="arrowL">
</div>
<div id="arrowR">
</div>
<div id="list-container">
<div class='list'>
<div class='item'>
</div>
<div class='item'>
</div>
<div class='item'>
</div>
<div class="item">
</div>
</div>
</div>
CSS:
#container{
width:340px;
height:50px;
}
#list-container {
overflow:hidden;
width: 300px;
float:left;
}
.list{
background:grey;
min-width:700px;
float:left;
}
#arrowR{
background:yellow;
width:20px;
height:50px;
float:right;
cursor:pointer;
}
#arrowL{
background:yellow;
width:20px;
height:50px;
float:left;
cursor:pointer;
}
.item{
background:green;
width:140px;
height:40px;
margin:5px;
float:left;
}
jQuery
$(document).ready(function() {
$('div#arrowR').click(function(){
$('div.item').animate({'left':'-=300px'});
});
$('div#arrowR').click(function(){
$('div.item').animate({'left':'+=300px'});
});
});
任何帮助都将不胜感激。谢谢!