我希望使用 jQuery.SerialScroll 实现水平滚动(基于jQuery.ScrollTo)。
我目前使用 liScroll 进行连续水平滚动,正如我在 this post 中讨论的那样.
但是,现在我需要离散滚动,并且 SerialScroll 可以完美地用于垂直滚动。
出于某种原因,如果“axis”属性指定为“x”,则不会发生任何情况。
我什至无法获取 SerialScroll example for right to left scrolling去工作。
我有这样的 HTML:
<div id="pane">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
我有这样的 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);
});
有什么想法吗?
//编辑(接受答案)
对于那些出现的人,接受的答案不再需要“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);
将 #news ul li 替换为适当的选择器。
最佳答案
我最近正在使用scrollTo 来实现一个类似Coda 的 slider 向导。
这是我采取的步骤:
- 将包含 div 设置为我希望 slider 显示的尺寸。溢出:自动;有助于测试,但您最终可能需要使用溢出:隐藏。
- 在该位置放置另一个 div,使其足够大以水平容纳所有元素。
- float 面板。给它们明确的尺寸。
我的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;}
我的JS:
function sliderScroll(target){
if(target.length <1)return false;
$(".current").removeClass("current");
target.addClass("current");
$(".scroller").scrollTo(target,500,{axis:'x'});
return false;
}
我的 HTML:
<div class="scroller">
<div class="modal-content">
<div>...</div>
...
</div>
</div>
关于jQuery.ScrollTo/jQuery.SerialScroll 水平滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/211111/