4

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>

軸が「y」のときに機能する、このようなjQueryがあります

 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 を適切なセレクターに置き換えます。

4

1 に答える 1

11

最近、scrollTo を使って Coda のようなスライダー ウィザードを実装していました。

私が取った手順は次のとおりです。

  1. 含む div を、スライダーを表示したい寸法に設定します。オーバーフロー:自動; テストには役立ちますが、おそらく最後に overflow:hidden を使用することをお勧めします。
  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>
于 2008-10-18T01:12:13.887 に答える