轮播图简单版

最新推荐文章于 2024-05-20 22:08:52 发布

萌新且暴龙战士

最新推荐文章于 2024-05-20 22:08:52 发布

阅读量42

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_68314577/article/details/131402665

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
          .slider {
    width: 100%;
    height: 400px;
    overflow: hidden;
    position: relative;
  }
  .slider .slides {
    display: flex;
    width: 100%;
    height: 100%;
  }
  .slider .slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
  }
  .slider .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .slider .nav {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    z-index: 1;
  }
  .slider .nav button {
    border: none;
    background-color: rgba(255, 255, 255, 0.5);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 10px;
    cursor: pointer;
  }
  .slider .nav button.active {
    background-color: white;
  }
    </style>
</head>
<body>
    <div class="slider">
        <div class="slides"></div>
        <div class="nav"></div>
      </div>
<script>
      const slider = document.querySelector(".slider");
      const slides = document.querySelector(".slides");
      const nav = document.querySelector(".nav");
      const navButtons = nav.children;
      let currentIndex = 0;
      let intervalId = null;
    
      // 加载数据
      fetchData();
    
      // 启动自动轮播
      startAutoPlay();
    
      // 鼠标悬停时停止轮播
      slider.addEventListener("mouseover", stopAutoPlay);
      slider.addEventListener("mouseout", startAutoPlay);
    
      /**
       * 加载图片数据
       */
      function fetchData() {
        // 模拟从后端获取数据的过程
        const data = [
          { url: "/images/op1/1.jpg", alt: "Image 1" },
          { url: "/images/op1/2.jpg", alt: "Image 2" },
          { url: "/images/op1/3.jpg", alt: "Image 3" },
          { url: "/images/op1/4.jpg", alt: "Image 4" },
        ];
    
        // 遍历数据生成幻灯片
        for (let i = 0; i < data.length; i++) {
          const slide = document.createElement("div");
          slide.className = "slide";
          slide.innerHTML = `<img src="${data[i].url}" alt="${data[i].alt}">`;
          slides.appendChild(slide);
    
          // 生成导航按钮
          const button = document.createElement("button");
          if (i === 0) {
            button.className = "active";
          }
          nav.appendChild(button);
        }
      }
    
      /**
       * 滚动到指定索引的幻灯片
       * @param {number} index 幻灯片索引
       */
      function goToSlide(index) {
        currentIndex = index;
        const slideWidth = slider.clientWidth;
        const offset = -currentIndex * slideWidth;
        slides.style.transform = `translateX(${offset}px)`;
    
        // 更新导航按钮状态
        for (let i = 0; i < navButtons.length; i++) {
          navButtons[i].className = i === currentIndex ? "active" : "";
        }
    
        // 停止自动轮播，重置自动轮播计时
        stopAutoPlay();
        startAutoPlay();
      }
    
      /**
       * 启动自动轮播
       */
      function startAutoPlay() {
        intervalId = setInterval(() => {
          currentIndex++;
          if (currentIndex >= slides.children.length) {
            currentIndex = 0;
          }
          goToSlide(currentIndex);
        }, 3000);
      }
    
      /**
       * 停止自动轮播
       */
      function stopAutoPlay() {
        clearInterval(intervalId);
      }
    </script>
      
</body>
</html>