HTML、CSS、jQuery を使用して自動スクロールカルーセルを作成する方法-jsチュートリアル-php.cn

HTML、CSS、jQuery を使用して自動スクロールカルーセルを作成する方法

WBOY

リリース： 2023-10-24 08:37:58

オリジナル

1379 人が閲覧しました

HTML、CSS、jQuery を使用して自動スクロールカルーセルを作成する方法

HTML、CSS、jQuery を使用して自動的にスクロールするカルーセルを作成する方法

インターネットの発展に伴い、カルーセルは Web デザインで一般的かつ必要なものになりました。準備の要素。 Web サイトのホームページや製品表示ページでカルーセルを使用すると、複数の画像やコンテンツを鮮やかに表示してユーザーの注意を引き、ユーザーエクスペリエンスを向上させることができます。この記事では、HTML、CSS、jQuery を使用して自動スクロールするカルーセルチャートを作成する方法と具体的なコード例を紹介し、初心者の参考になれば幸いです。

まず、HTML ファイル内のカルーセルの基本構造を確立する必要があります。以下は簡単な HTML コードの例です。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>自动滚动轮播图</title>
  <style>
    .slider {
      width: 600px;
      height: 400px;
      overflow: hidden;
      position: relative;
    }
    .slider .slides {
      width: 300%;
      height: 100%;
      display: flex;
    }
    .slider .slides .slide {
      width: 33.33%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div class="slider">
    <div class="slides">
      <div class="slide">
        <img src="slide1.jpg" alt="Slide 1">
      </div>
      <div class="slide">
        <img src="slide2.jpg" alt="Slide 2">
      </div>
      <div class="slide">
        <img src="slide3.jpg" alt="Slide 3">
      </div>
    </div>
  </div>
  
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

ログイン後にコピー

上記のコードでは、.slider という名前のカルーセルコンテナーを作成し、コンテナーの幅と高さを 600px ～ 400px に設定しました。 overflow: hidden を設定して、コンテナーサイズを超えるコンテンツを非表示にします。 .slides クラスでは、カルーセル画像のコンテナ幅が 300% (つまり、各画像の幅の 3 倍) に設定されます。 # クラスから 33.33% 3 つの画像を一列に均等に配置します。次に、jQuery を使用してカルーセルの自動スクロール効果を実現する必要があります。コードは、

script.js

という名前の外部 JavaScript ファイルに記述します (HTML ファイル内の <script> タグに記述することもできます)。簡単な jQuery コードの例を次に示します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'>$(document).ready(function() { var slideCount = $('.slide').length; var slideWidth = $('.slide').width(); var slideHeight = $('.slide').height(); var slideContainerWidth = slideCount * slideWidth; $('.slides').css({ width: slideContainerWidth, marginLeft: -slideWidth }); function slideNext() { $('.slides').animate({ left: -slideWidth }, 1000, function() { $('.slide:first-child').appendTo('.slides'); $('.slides').css('left', ''); }); } setInterval(slideNext, 2000); });</pre><div class="contentsignin">ログイン後にコピー</div></div> 上記のコードでは、最初に $(document).ready()<p> メソッドを使用して、ページが作成された後にコードが実行されることを確認します。ロードされています。次に、カルーセル画像の総数、画像の幅、画像の高さ、カルーセル画像コンテナーの幅を取得します。 <code>.slides の幅を slideContainerWidth に設定し、その marginLeft プロパティを -slideWidth に設定することで、最初の画像の一部をコンテナーから非表示にします。次に、カルーセルのスクロール効果を実装するために、

slideNext()

という名前の関数を定義します。 .animate() メソッドを使用して、.slides を slideWidth 距離だけ左に 1000 ミリ秒 (つまり 1 秒) 移動します。アニメーションが完了したら、最初の画像を .slides の最後に移動し、.slides の左側のプロパティを空にリセットします。これにより、画像のシームレスなスクロール効果が実現します。最後に、

setInterval()

関数を使用して slideNext() 関数をループし、2 秒ごとにスクロールします。上記のコードを使用すると、自動スクロール効果のあるカルーセルチャートを作成して実行できます。必要に応じて、カルーセルコンテナーのサイズ、画像の数、スクロール速度をカスタマイズできます。この記事が、HTML、CSS、jQuery を使用してカルーセルを作成する方法を学ぶのに役立つことを願っています。

以上がHTML、CSS、jQuery を使用して自動スクロールカルーセルを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。