jQueryでカルーセルを行う方法

モバイル デバイスの普及に伴い、カルーセルは多くの Web サイトやアプリケーションで一般的な機能の 1 つになりました。 jQuery は広く使用されている JavaScript ライブラリであり、多くの便利で実用的なメソッドを提供し、カルーセルの開発を非常にシンプルかつ簡単にします。

次の手順では、jQuery を使用して単純なカルーセル チャートを作成する方法を示します。まず、基本的な HTML と CSS コードを準備する必要があります。

HTML コード

<div class="slider">
  <div class="slides">
    <div class="slide"><img src="image1.jpg" alt="Slide 1"></div>
    <div class="slide"><img src="image2.jpg" alt="Slide 2"></div>
    <div class="slide"><img src="image3.jpg" alt="Slide 3"></div>
  </div>
  <div class="controls">
    <span class="prev">Previous</span>
    <span class="next">Next</span>
  </div>
</div>

CSS コード

.slider {
  position: relative;
  height: 300px;
  width: 600px;
  overflow: hidden;
}

.slides {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 300%;
  display: flex;
  flex-wrap: nowrap;
  transition: transform 0.6s ease;
}

.slide {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide img {
  max-height: 100%;
  max-width: 100%;
}

.controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
}

.controls span {
  margin: 0 10px;
  cursor: pointer;
}

上記の HTML コードには、3 つの画像を含むカルーセルがあります。画像は img タグに保存され、各画像は slide クラス名を持つ div 要素でラップされます。カルーセルのコントロール ボタンは div 要素の下部にあり、prev および next クラス名を持つ span 要素によって表されます。 。

CSS コードでは、カルーセル コンテナーの高さと幅を 300px と 600px に設定し、overflow: hidden を次のように設定します。 div 要素が 1 つだけ表示されるようにしてください。すべての slide 要素は同じ高さを持ち、Flex レイアウトを使用して親要素内で水平にレイアウトされます。コントロール ボタンは、Flex レイアウトを使用して中央に配置され、水平方向に配置されます。

これで、カルーセル コードを段階的に作成できます。

最初のステップでは、jQuery を使用してカルーセル内の関連要素を選択し、後続のコードで使用できるようにその参照を保存する必要があります。以下に示すように:

var $slider = $('.slider');
var $slides = $slider.find('.slides');
var $slide = $slides.find('.slide');
var $prev = $slider.find('.prev');
var $next = $slider.find('.next');

2 番目のステップでは、各 slide 要素の幅を計算し、それらを行に配置する必要があります。以下に示すように:

var slideWidth = $slide.width();
$slides.css('width', slideWidth * $slide.length + 'px');

3 番目のステップでは、コントロール ボタンがクリックされたときにカルーセル画像が移動できるように、next 関数と prev 関数を記述する必要があります。 。ここでの具体的な実装には、オフセットを計算するための複雑な数学的演算が含まれますが、animate() 関数を使用して実現できます。以下に示すように:

$next.on('click', function() {
  $slides.animate({left: '-=' + slideWidth}, 600, function() {
    $slides.append($slides.find('.slide:first-of-type'));
    $slides.css('left', '');
  });
});

$prev.on('click', function() {
  $slides.animate({left: '+=' + slideWidth}, 600, function() {
    $slides.prepend($slides.find('.slide:last-of-type'));
    $slides.css('left', '');
  });
});

4 番目のステップでは、next 関数を時々自動的に実行するループ タイマーを設定する必要があります。以下に示すように:

var interval = setInterval(function() {
  $next.click();
}, 3000);

最後のステップは、アニメーションの重なりやカルーセル エラーを防ぐために、カルーセル画像の移動中にユーザーがコントロール ボタンをクリックすることを禁止することです。以下に示すように:

$slider.on('mouseenter', function() {
  clearInterval(interval);
});

$slider.on('mouseleave', function() {
  interval = setInterval(function() {
    $next.click();
  }, 3000);
});

これで、簡単なカルーセル チャートが完成しました。コード スニペット全体は次のとおりです。

var $slider = $('.slider');
var $slides = $slider.find('.slides');
var $slide = $slides.find('.slide');
var $prev = $slider.find('.prev');
var $next = $slider.find('.next');

var slideWidth = $slide.width();
$slides.css('width', slideWidth * $slide.length + 'px');

$next.on('click', function() {
  $slides.animate({left: '-=' + slideWidth}, 600, function() {
    $slides.append($slides.find('.slide:first-of-type'));
    $slides.css('left', '');
  });
});

$prev.on('click', function() {
  $slides.animate({left: '+=' + slideWidth}, 600, function() {
    $slides.prepend($slides.find('.slide:last-of-type'));
    $slides.css('left', '');
  });
});

var interval = setInterval(function() {
  $next.click();
}, 3000);

$slider.on('mouseenter', function() {
  clearInterval(interval);
});

$slider.on('mouseleave', function() {
  interval = setInterval(function() {
    $next.click();
  }, 3000);
});

上記の手順を完了すると、独自の CSS スタイルと HTML コードを使用してカルーセルの外観と機能をカスタマイズし、Web サイトにシームレスに統合できます。 。

以上がjQueryでカルーセルを行う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。