Bagaimana untuk menetapkan blok karusel imej dalam javascript css

Dengan pembangunan berterusan Internet, karusel imej telah menjadi bahagian penting dalam reka bentuk dan pembangunan tapak web. Dalam artikel ini, kami akan membincangkan cara membuat karusel imej menggunakan JavaScript dan CSS.

Pertama, kami memerlukan templat HTML dan beberapa CSS untuk menetapkan rupa karusel.

<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>

Dalam templat HTML ini, kami menggunakan elemen <div> yang mengandungi imej sebagai tayangan slaid berasingan. Kami akan meletakkan slaid ini dalam elemen induk yang mengandungi semua slaid. Di bahagian bawah, kami juga mempunyai dua butang "sebelumnya" dan "seterusnya" yang mengawal tayangan slaid.

Seterusnya, kami akan menggunakan CSS untuk menyediakan UI tayangan slaid ini.

<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>

Dalam CSS ini, kami mula-mula menetapkan kedudukan dan saiz elemen <div> yang mengandungi karusel. Kemudian kami menetapkan kedudukan dan saiz setiap slaid dalam pembungkus gelangsar. Caranya di sini adalah untuk menjadikan setiap slaid sebagai bekas fleksibel supaya mereka boleh memusatkan imej.

Akhir sekali, kami menetapkan kedudukan, gaya dan kefungsian butang "sebelumnya" dan "seterusnya".

Sekarang kami mempunyai rupa dan UI yang disediakan untuk tayangan slaid karusel kami, kami perlu menambah sedikit logik menggunakan JavaScript.

<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>

Kod ini memilih elemen slaid dan butang kami dan menambahkan tindakan klik supaya slaid boleh bergerak ke hadapan atau ke belakang. Setiap klik butang dikendalikan oleh pendengar acaranya sendiri. Dalam acara klik kami mula-mula menyemak sama ada slaid telah mencapai yang terakhir, jika ya kami menetapkan semula indeks slaid kepada sifar. Jika tidak, kami hanya menggerakkan satu slaid ke hadapan atau ke belakang dan memanggil fungsi moveSlides() untuk bertukar antara kumpulan slaid.

Akhir sekali, kami perlu menambah ciri autoputar, yang akan memutarkan slaid secara automatik tanpa campur tangan pengguna.

<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>

Di sini kita menggunakan fungsi setInterval yang secara automatik menggerakkan slaid ke hadapan pada selang masa 5 saat. Kami juga menambah pendengar acara alih tetikus dan keluar tetikus untuk menghentikan dan menjalankan karusel automatik apabila pengguna menuding di atas slaid.

Baiklah, kami telah menyelesaikan reka bentuk dan pembangunan karusel imej kami. Kod akhir adalah seperti berikut:

<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>

Kini jika anda menyalin kod ini ke dalam fail setempat anda dan menggantikan imej tayangan slaid dan laluan dengan kandungan anda sendiri, maka anda akan mendapat karusel imej JavaScript dan CSS yang kelihatan cantik.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan blok karusel imej dalam javascript css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!