1

スクロール カルーセルを作成しようとしていますが、他のカルーセルとは異なり、これはスライドからスライドにジャンプするのではなく、ユーザーが 50px の速度でゆっくりと水平方向に移動することしかできません。

http://codepen.io/anon/pen/pyLfz

問題は、[次へ] をクリックしたときです。番号 6 のボックスが完全に表示されると、スクリプトはユーザーがそれ以上進むことを許可しないようにする必要があります。番号 1 のボックスが完全に表示されているときに前のリンクをクリックした場合と同様に、ユーザーは許可されません。もうスクロールバックします。

今のところ、それを行う方法がわかりません。

HTML:

<div class="carousel">
    <div class="slide">
        <article class="pod">1</article>
        <article class="pod">2</article>
        <article class="pod">3</article>
        <article class="pod">4</article>
        <article class="pod">5</article>
        <article class="pod">6</article>   
    </div>
</div>

<a href="#" class="prev">Prev</a>
<a href="#" class="next">Next</a>

CSS:

.carousel { 
  position: relative; 
  border: 1px solid red; 
  width: 250px;
  height: 100px;
  overflow: hidden;
}
.carousel .slide { 
  overflow: hidden; 
  position: absolute;
  width: 600px;
}
.carousel .slide .pod { 
  width: 100px; 
  height: 100px; 
  line-height: 100px;
  text-align: center;
  background: blue; 
  box-shadow: 0 0 18px white;
  color: #fff; 
  float: left; 
}

jQuery:

$('.next').on('click', function() {
  $('.slide').animate({
    left: '-=50'
  });
});
$('.prev').on('click', function() {
  $('.slide').animate({
    left: '+=50'
  });
});
4

2 に答える 2

0

最後に到達したかどうかを判断するには、いくつかの計算を使用する必要があります。

これが分岐したペンです: http://codepen.io/chrisrockwell/pen/dxqbp

主な部分は、ifあなたの行動の声明にありますnext：

if (Math.abs(slideOffset.left) <= ($slide.width() - $('.carousel').width() - moveBy)) { 
  $slide.animate({
    left: next
  }); 
}

この構造を使用する.podと、CSS で.slide途方もなく大きな幅 (たとえば 10000em) を指定でき、それでも機能するため、簡単に を追加できます。.podCSS 以外を変更することなく、 の幅を変更することもできます。最後に、変数を 1 つ変更するだけで、必要に応じて移動量を変更できます。

すべてのシナリオをカバーするには、さらにチェックを追加する必要がありますが、これで作業を開始できます。

于 2013-09-12T17:38:26.043 に答える