7
イメージのスライダを作成して（前/次）、「前」をクリックするとイメージが左にスライドし、右は0.5sで「次」をクリックするとゆっくりとしているので、アニメーションがかかります。最後の画像に到達して「次へ」をクリックすると、画像が最初の画像に戻るようにしたいのですが、最初の画像をクリックして「前の画像」をクリックすると、最後の一つ。未定義の高さを持つスライダ
私は同じ動作をしたいですthis JSFiddleが表示されます。 （ただし、画像を自動的に移動させるタイマーは不要で、「トリガー」ボタンは不要で、「前」と「次」のみ）。
ここでの問題は、自分の画像が固定サイズでないことです。私はパーセンテージで幅を定義し、レスポンシブデザインであるため高さを定義できません。ブラウザウィンドウのサイズを変更すると画像のサイズが変更されます。
以前の/次のアクションへのjQueryは簡単ですが、画像に「アクティブ」クラスを削除/追加するときにこのアニメーションを追加する方法を見つけることができません。
私は既に、すべての画像を並べて表示し、最初のものだけを表示しようとしました（コンテナの幅は画像の幅に等しい）ので、「次へ」をクリックするとコンテナが左に移動します次の画像を表示することはできますが、画像の高さを定義することができなければ、それらは横並びではなく、互いの下に表示されるため動作しません。
HTML
<div class="images">
<img class="active" src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>
<div class="previous">previous</div>
<div class="next">next</div>
CSS
img {
width: 100px;
display: none;
float: left;
}
img.active {
display: block;
}
jQueryの
$('.next').on('click', function() {
var active = $('img.active');
var next = active.next('img');
if (next.length) {
active.removeClass('active');
next.addClass('active');
} else {
active.removeClass('active');
$('.images img:first').addClass('active');
}
});
スライディングエフェクトが必要な場合は、すべてのイメージを左側にオフセットしてから、 'img.active'のcss3トランジションを使用して、' left：0px; '上の各アクティブイメージを取得する必要があります。スキルは私が人々が使用すると思うコンセプトです。 – ArchNoob