jQuery.ScrollTo / jQuery.SerialScroll 水平滚动

Question

我正在寻找使用实现水平滚动 jQuery.SerialScroll （基于 jQuery.ScrollTo).

我目前使用 liScroll 进行连续水平滚动，正如我在 这个帖子.

但是，现在我需要离散滚动，并且 SerialScroll 可以完美地用于垂直滚动。

由于某种原因，如果“axis”属性指定为“x”，则不会发生任何情况。

我什至无法得到 从右向左滚动的 SerialScroll 示例 上班。

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

Answer 1

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

这是我采取的步骤：

1. 将包含 div 设置为我希望滑块显示的尺寸。溢出：自动；有助于测试，但您最终可能需要使用溢出：隐藏。
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：

<div class="scroller">
  <div class="modal-content">
     <div>...</div>
     ...
  </div>
</div>