jQuery.ScrollTo / jQuery.SerialScroll水平滚动

时间:2008-10-17 04:50:14

标签: jquery scrollto serialscroll

我希望使用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替换为适当的选择器。

1 个答案:

答案 0 :(得分:11)

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

以下是我采取的步骤:

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