jQuery.ScrollTo / jQuery.SerialScroll水平滚动

我期待使用jQuery.SerialScroll （基于jQuery.ScrollTo ）实现水平滚动。

我在这篇文章中讨论过，目前我正在使用liScroll进行连续水平滚动。

但是，现在我需要离散滚动，我使SerialScroll完美地适用于垂直滚动。

出于某种原因，如果’axis’属性被指定为’x’，则不会发生任何事情。

我甚至无法获得从右到左滚动工作的SerialScroll示例 。

我有像这样的HTML：

 
Item 1
 
Item 2
 
Item 3
  

我有这样的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替换为适当的选择器。

Answer 1

我最近使用scrollTo来实现类似Coda的滑块向导。

这是我采取的步骤：

1. 将包含div设置为我希望滑块显示为的尺寸。 溢出：汽车; 有助于测试，但你可能想要使用overflow：隐藏到最后。
2. 在那个地方里面另一个div，使它足够大，可以水平放置所有元素。
3. 浮动面板。 给他们明确的维度。

我的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：

 
 
 
...
 ...