jQuery 水平滚动（单击并设置动画）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13438135/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Horizontal Scrolling (click and animate)
提问by jstacks
I have a series of divs floating to infinity in a horizontal line. I have a fixed width div container them, overflow:hidden. Ultimately, I'd like to press divs/buttons on left and right to scroll through the items (vs. using scrollbar).
我有一系列 div 在水平线上浮动到无穷大。我有一个固定宽度的 div 容器它们，溢出：隐藏。最终，我想按左右的 div/按钮来滚动项目（与使用滚动条相比）。
I am having trouble getting .animate() to work. I want each click to move the items within the list over.
我无法让 .animate() 工作。我希望每次单击都将列表中的项目移过。
It should work similar to Amazons "Customers Who Bought This Item Also Bought" list that you can scroll through in the same manner. I was tempted to try using .mousedown and have it move while holding (similar to true scrolling) but want do this easier approach first.
它应该类似于亚马逊的“购买此商品的客户也购买”列表，您可以以相同的方式滚动浏览。我很想尝试使用 .mousedown 并让它在按住时移动（类似于真正的滚动），但想要先做这个更简单的方法。
Here is the fiddle and code:
这是小提琴和代码：
HTML:
HTML：
<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:
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
jQuery
$(document).ready(function() {
$('div#arrowR').click(function(){
$('div.item').animate({'left':'-=300px'});
});
$('div#arrowR').click(function(){
$('div.item').animate({'left':'+=300px'});
});
});
Any and all help appreciated. Thanks!
任何和所有的帮助表示赞赏。谢谢！
回答by Matthew Blancarte
Add position:relativeto .item, like so:
添加position:relative到.item，如下所示：
.item{
background:green;
width:140px;
height:40px;
margin:5px;
float:left;
position:relative; /* Put me here! */
}
Working example: http://jsfiddle.net/mattblancarte/stfzy/21/
工作示例：http: //jsfiddle.net/mattblancarte/stfzy/21/
There are a few more bugs in your setup, but this should get you unstuck. :)
您的设置中还有一些错误，但这应该会让您摆脱困境。:)
Edit::
编辑：：
Here is a quick solution to solve the bug where the list will slide too far in either direction:
这是解决列表向任一方向滑动太远的错误的快速解决方案：
$(document).ready(function() {
var $item = $('div.item'), //Cache your DOM selector
visible = 2, //Set the number of items that will be visible
index = 0, //Starting index
endIndex = ( $item.length / visible ) - 1; //End index (NOTE:: Requires visible to be a factor of $item.length... You can improve this by rounding...)
$('div#arrowR').click(function(){
if(index < endIndex ){
index++;
$item.animate({'left':'-=300px'});
}
});
$('div#arrowL').click(function(){
if(index > 0){
index--;
$item.animate({'left':'+=300px'});
}
});
});
