溫馨提示×

js輪播圖簡單代碼怎么寫

js
小億
109
2023-08-08 23:46:34
欄目: 編程語言

以下是一個簡單的實現(xiàn)JavaScript輪播圖的代碼示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .slideshow-container {
      position: relative;
      width: 100%;
      height: 300px;
      overflow: hidden;
    }
    .slide {
      width: 100%;
      height: 100%;
      display: none;
    }
    .slide img {
      width: 100%;
      height: 100%;
    }
    .prev, .next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 30px;
      font-weight: bold;
      color: white;
      background-color: rgba(0, 0, 0, 0.5);
      padding: 10px 20px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    .prev:hover, .next:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }
  </style>
</head>
<body>
<div class="slideshow-container">
  <div class="slide">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="slide">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <div class="slide">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <a class="prev">&#10094;</a>
  <a class="next">&#10095;</a>
</div>
<script>
  var currentSlide = 0;
  var slides = document.querySelectorAll('.slide');
  var prevButton = document.querySelector('.prev');
  var nextButton = document.querySelector('.next');
  function showSlide(n) {
    slides[currentSlide].style.display = 'none';
    currentSlide = (n + slides.length) % slides.length;
    slides[currentSlide].style.display = 'block';
  }
  function prevSlide() {
    showSlide(currentSlide - 1);
  }
  function nextSlide() {
    showSlide(currentSlide + 1);
  }
  prevButton.addEventListener('click', prevSlide);
  nextButton.addEventListener('click', nextSlide);
  showSlide(currentSlide);
</script>
</body>
</html>

這段代碼使用了HTML和CSS來創(chuàng)建一個輪播圖容器，并通過JavaScript來控制輪播圖的切換。其中，.slide類設(shè)置為 display: none;來隱藏所有幻燈片，然后在 JavaScript 中，通過更改當(dāng)前幻燈片的display屬性來顯示或隱藏幻燈片。.prev 和 .next類用于綁定點擊事件，以便在點擊“上一個”和“下一個”按鈕時切換幻燈片。

你可以將 image1.jpg、image2.jpg 和 image3.jpg替換為你自己的圖片路徑，以及根據(jù)需要調(diào)整樣式和布局。


0 踩