jQuery.ScrollTo / jQuery.SerialScroll 水平滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/211111/
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.ScrollTo / jQuery.SerialScroll Horizontal Scrolling
提问by Matt Mitchell
I am looking to implement horizontal scrolling using jQuery.SerialScroll(based on jQuery.ScrollTo).
我希望使用jQuery.SerialScroll（基于jQuery.ScrollTo）实现水平滚动。
I currently have a continuous horizontal scrolling working with liScroll as I discuss in this post.
正如我在这篇文章中所讨论的，我目前使用 liScroll 进行连续水平滚动。
However, now I need discrete scrolling and I have SerialScroll working perfectly for vertical scrolling.
但是，现在我需要离散滚动，并且 SerialScroll 可以完美地用于垂直滚动。
For some reason, if the 'axis' property is specified as 'x' nothing happens.
出于某种原因，如果将 'axis' 属性指定为 'x'，则不会发生任何事情。
I can't even get the SerialScroll example for right to left scrollingto work.
我什至无法获得从右向左滚动的SerialScroll 示例。
I have HTML like this:
我有这样的 HTML：
<div id="pane">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
I have jQuery like this, that works when axis is 'y'
我有这样的 jQuery，它在轴为 'y' 时有效
jQuery(function($) {
var $pane = $('#pane');
$pane.serialScroll({
items: 'div',
next: $pane, // the container itself will get bound
duration: 2100,
force: true,
axis: 'x',
step: 1, //scroll 1 news each time
event: 'showNext' //just a random event name
});
setInterval(function() {//scroll each 12 seconds
$pane.trigger('showNext');
}, 12000);
});
Any ideas?
有任何想法吗？
//Edit (answer accepted)
//编辑（接受答案）
For those that come along, the accepted answer gets rid of the need for "serialScroll" (just need scrollTo). Heights weren't required. Be sure to change $('scroller') to something like $('mywrap') or $(target.parent().parent()). You can also set up automatic scrolling like this:
对于那些出现的人，接受的答案不需要“serialScroll”（只需要scrollTo）。不需要高度。请务必将 $('scroller') 更改为 $('mywrap') 或 $(target.parent().parent()) 之类的内容。您还可以像这样设置自动滚动：
var index = 2;
setInterval(function() {//scroll each 5 seconds
index = index > $('#news ul li').length ? 1 : index;
sliderScroll($('#news ul li:nth-child(' + index + ')'));
index ++;
}, 5000);
replacing #news ul li to your appropriate selector.
将#news ul li 替换为合适的选择器。
回答by Jethro Larson
I was recently working with scrollTo to implement a Coda-like slider wizard.
我最近在使用 scrollTo 来实现类似 Coda 的滑块向导。
Here's the steps I took:
这是我采取的步骤：
- Set a containing div to the dimensions I wanted the slider to appear as. overflow:auto; helps for testing, but you'll probably want to use overflow:hidden in the end.
- Inside that place another div, make it big enough to hold all your elements horizontally.
- Float the panels. give them explicit dimensions.
- 将包含 div 设置为我希望滑块显示的尺寸。溢出：自动；有助于测试，但您可能希望最终使用 overflow:hidden 。
- 在那个地方放置另一个 div，使其足够大以水平放置所有元素。
- 浮动面板。给他们明确的维度。
My CSS:
我的CSS：
.scroller{
position: relative;
overflow: hidden;
height: 410px;
width: 787px;}
.modal-content{width: 3400px;}
.modal-content div{float:left; width:728px; height: 405px; padding: 0 30px;}
My JS:
我的JS：
function sliderScroll(target){
if(target.length <1)return false;
$(".current").removeClass("current");
target.addClass("current");
$(".scroller").scrollTo(target,500,{axis:'x'});
return false;
}
My HTML:
我的 HTML：
<div class="scroller">
<div class="modal-content">
<div>...</div>
...
</div>
</div>
