我希望使用
jQuery.SerialScroll(基于
jQuery.ScrollTo)实现水平滚动.
我在this post讨论时,目前正在使用liScroll进行连续水平滚动.
但是,现在我需要离散滚动,我使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的滑块向导.
这是我采取的步骤：
>将包含div设置为我希望滑块显示为的尺寸.溢出：汽车;有助于测试,但你可能想要使用overflow：隐藏到最后.
>在那里放置另一个div,使它足够大,可以水平放置所有元素.
>浮动面板.给他们明确的维度.
我的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>