JavaScript CSSでブロック画像カルーセルを設定する方法

インターネットの継続的な発展に伴い、画像カルーセルは Web サイトのデザインと開発の重要な部分になりました。この記事では、JavaScript と CSS を使用して画像カルーセルを作成する方法について説明します。

まず、HTML テンプレートと、カルーセルの外観を設定するための CSS が必要です。

<code class="html"><div class="slider-container">
   <div class="slider-wrapper">
      <div class="slider-slide">
         <img src="image1.jpg">
      </div>
      <div class="slider-slide">
         <img src="image2.jpg">
      </div>
      <div class="slider-slide">
         <img src="image3.jpg">
      </div>
      <div class="slider-slide">
         <img src="image4.jpg">
      </div>
   </div>
   <button class="slider-prev">&#10094;</button>
   <button class="slider-next">&#10095;</button>
</div></code>

この HTML テンプレートでは、別のスライドショーとして画像を含む <div> 要素を使用します。これらのスライドを、すべてのスライドを含む親要素に配置します。下部には、スライドショーを制御する 2 つの「前へ」ボタンと「次へ」ボタンもあります。 <div>元素作为一个单独的幻灯片。我们将把这些幻灯片放在一个包含所有幻灯片的父元素中。在底部，我们还有两个控制幻灯片的“prev”和“next”按钮。

接下来，我们将使用CSS来设置这个幻灯片的UI。

<code class="css">.slider-container {
   position: relative;
   width: 100%;
   height: 500px;
   overflow: hidden;
}

.slider-wrapper {
   display: flex;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   transition: transform 0.5s ease;
}

.slider-slide {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
}

.slider-slide img {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
}

.slider-prev,
.slider-next {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: rgba(0, 0, 0, 0.5);
   color: white;
   font-size: 20px;
   border: none;
   cursor: pointer;
   opacity: 0.5;
   transition: opacity 0.2s ease;
}

.slider-next {
   right: 20px;
}

.slider-prev {
   left: 20px;
}

.slider-prev:hover,
.slider-next:hover {
   opacity: 0.8;
}</code>

在这个CSS中，我们首先设置了包含轮播的<div>

次に、CSSを使用してこのスライドショーのUIを設定します。

<code class="javascript">var sliderWrapper = document.querySelector('.slider-wrapper');
var slides = document.querySelectorAll('.slider-slide');
var prevBtn = document.querySelector('.slider-prev');
var nextBtn = document.querySelector('.slider-next');
var slideIndex = 0;

function moveSlides() {
   sliderWrapper.style.transform = "translateX(" + (-slides[slideIndex].offsetLeft) + "px)";
}

nextBtn.addEventListener('click', function() {
   if (slideIndex >= slides.length - 1) {
      slideIndex = 0;
   } else {
      slideIndex++;
   }
   moveSlides();
});

prevBtn.addEventListener('click', function() {
   if (slideIndex <= 0) {
      slideIndex = slides.length - 1;
   } else {
      slideIndex--;
   }
   moveSlides();
});</code>

この CSS では、まずカルーセルを含む <div> 要素の位置とサイズを設定します。次に、スライダー ラッパー内の各スライドの位置とサイズを設定します。ここでのコツは、各スライドをフレックス コンテナにして、画像を中央に配置できるようにすることです。

最後に、「前へ」ボタンと「次へ」ボタンの位置、スタイル、機能を設定します。

カルーセル スライドショーの外観と UI を設定したので、JavaScript を使用してロジックを追加する必要があります。

<code class="javascript">var sliderInterval = setInterval(function() {
   if (slideIndex >= slides.length - 1) {
      slideIndex = 0;
   } else {
      slideIndex++;
   }
   moveSlides();
}, 5000);

sliderWrapper.addEventListener('mouseenter', function() {
   clearInterval(sliderInterval);
});

sliderWrapper.addEventListener('mouseleave', function() {
   sliderInterval = setInterval(function() {
      if (slideIndex >= slides.length - 1) {
         slideIndex = 0;
      } else {
         slideIndex++;
      }
      moveSlides();
   }, 5000);
});</code>

このコードは、スライドとボタン要素を選択し、スライドが前後に移動できるようにクリック アクションを追加します。各ボタンのクリックは、独自のイベント リスナーによって処理されます。クリック イベントでは、最初にスライドが最後のスライドに到達したかどうかを確認し、到達した場合はスライド インデックスを 0 にリセットします。それ以外の場合は、1 つのスライドを前後に移動し、moveSlides() 関数を呼び出してスライド グループを切り替えます。

最後に、ユーザーの介入なしでスライドを自動的に回転させる自動回転機能を追加する必要があります。

<code class="html"><div class="slider-container">
   <div class="slider-wrapper">
      <div class="slider-slide">
         <img src="image1.jpg">
      </div>
      <div class="slider-slide">
         <img src="image2.jpg">
      </div>
      <div class="slider-slide">
         <img src="image3.jpg">
      </div>
      <div class="slider-slide">
         <img src="image4.jpg">
      </div>
   </div>
   <button class="slider-prev">&#10094;</button>
   <button class="slider-next">&#10095;</button>
</div>

<style>
    .slider-container {
       position: relative;
       width: 100%;
       height: 500px;
       overflow: hidden;
    }
    
    .slider-wrapper {
       display: flex;
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       transition: transform 0.5s ease;
    }
    
    .slider-slide {
       flex: 1;
       display: flex;
       align-items: center;
       justify-content: center;
    }
    
    .slider-slide img {
       max-width: 100%;
       max-height: 100%;
       object-fit: contain;
    }
    
    .slider-prev,
    .slider-next {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       width: 50px;
       height: 50px;
       border-radius: 50%;
       background: rgba(0, 0, 0, 0.5);
       color: white;
       font-size: 20px;
       border: none;
       cursor: pointer;
       opacity: 0.5;
       transition: opacity 0.2s ease;
    }
    
    .slider-next {
       right: 20px;
    }
    
    .slider-prev {
       left: 20px;
    }
    
    .slider-prev:hover,
    .slider-next:hover {
       opacity: 0.8;
    }  
</style>

<script>
    var sliderWrapper = document.querySelector('.slider-wrapper');
    var slides = document.querySelectorAll('.slider-slide');
    var prevBtn = document.querySelector('.slider-prev');
    var nextBtn = document.querySelector('.slider-next');
    var slideIndex = 0;

    function moveSlides() {
       sliderWrapper.style.transform = "translateX(" + (-slides[slideIndex].offsetLeft) + "px)";
    }

    nextBtn.addEventListener('click', function() {
       if (slideIndex >= slides.length - 1) {
          slideIndex = 0;
       } else {
          slideIndex++;
       }
       moveSlides();
    });

    prevBtn.addEventListener('click', function() {
       if (slideIndex <= 0) {
          slideIndex = slides.length - 1;
       } else {
          slideIndex--;
       }
       moveSlides();
    });

    var sliderInterval = setInterval(function() {
       if (slideIndex >= slides.length - 1) {
          slideIndex = 0;
       } else {
          slideIndex++;
       }
       moveSlides();
    }, 5000);

    sliderWrapper.addEventListener('mouseenter', function() {
       clearInterval(sliderInterval);
    });

    sliderWrapper.addEventListener('mouseleave', function() {
       sliderInterval = setInterval(function() {
          if (slideIndex >= slides.length - 1) {
             slideIndex = 0;
          } else {
             slideIndex++;
          }
          moveSlides();
       }, 5000);
    });
</script></code>

ここでは、5 秒間隔で自動的にスライドを進める setInterval 関数を使用します。また、ユーザーがスライド上にマウスを置いたときに自動カルーセルを停止および実行するために、mouseover および Mouseout イベント リスナーも追加しました。

さて、画像カルーセルの設計と開発が完了しました。最終的なコードは次のとおりです: 🎜rrreee🎜 このコードをローカル ファイルにコピーし、スライドショーの画像とパスを独自のコンテンツに置き換えると、美しい JavaScript と CSS の画像カルーセルが得られます。 🎜

以上がJavaScript CSSでブロック画像カルーセルを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。