自动循环轮播图

作者:admin 发布日期:2023年11月7日 14:46 浏览量:61
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="applicable-device" content="pc,mobile">
  <title>Document</title>
  <style>
    /* 添加样式 */
    .slider {
      width: 100%; /* 设置轮播容器的宽度 */
      position: relative;
      overflow: hidden;
    }
    .slider img {
      width: 100%;
      overflow: hidden;
    }
    .slide-track {
      display: flex;
      transition: transform 0.5s ease;
    }
    .slide {
      flex: 0 0 100%; /* 图片自适应容器宽度 */
    }
    .prev, .next {
      cursor: pointer;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      display: none;
      opacity: .5;
      border: 0;
    }
    .prev:hover, .next:hover {
      opacity: 1;
    }
    .prev {
      left: 10px;
      width: 40px;
      height: 40px;
      background-image: url(icon/left.svg);
      background-size:40px 40px;
      background-repeat:no-repeat;
    }
    .next {
      right: 10px;
      width: 40px;
      height: 40px;
      background-image: url(icon/right.svg);
      background-size:40px 40px;
      background-repeat:no-repeat;
    }
    .indicators {
      text-align: center;
      position: absolute;
      bottom: 10px;
      left: 0;
      right: 0;
    }
    .indicator {
      display: inline-block;
      width: 12px;
      height: 8px;
      margin: 0 3px;
      -webkit-transition: background .5s ease;
      -moz-transition: background .5s ease;
      -o-transition: background .5s ease;
      transition: background .5s ease;
      border-radius: 10px;
      background: #EAEFFE;
      cursor: pointer;
    }
    .indicator.active {
      width: 24px;
      height: 8px;
      background: #364cc6;
    }
    .slider:hover .prev, .slider:hover .next {
      display: block;
    }
    .slider__caption {
      margin-top: -160px;
      display: block;
      padding: 20px 10px 40px;
      text-align:center;
      color: #fff;
      background-image: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0.01) 5%, rgba(0, 0, 0, 0.6) 100%);
      background-image: -moz-linear-gradient(180deg, rgba(0, 0, 0, 0.01) 5%, rgba(0, 0, 0, 0.6) 100%);
      background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.01) 5%, rgba(0, 0, 0, 0.6) 100%);
    }
    .slider__caption h3:hover {
      background: rgba(255, 255, 255, 0.25);
    }
  </style>
</head>

<body style="transform: none;height: 2000px;">
  <div class="slider">
    <div class="slide-track">
      <a href="#" class="slide active">
        <img src="./images/1.jpg" alt="Image 1" />
        <div class="slider__caption">
          <h3>轮播图1</h3>
        </div>
      </a>
      <a href="#" class="slide">
        <img src="./images/2.jpg" alt="Image 2" />
        <div class="slider__caption">
          <h3>轮播图2</h3>
        </div>
      </a>
      <a href="#" class="slide">
        <img src="./images/2.jpg" alt="Image 2" />
        <div class="slider__caption">
          <h3>轮播图3</h3>
        </div>
      </a>
      <!-- 更多图片 -->
    </div>
    <button class="prev"><</button>
    <button class="next">></button>
    <div class="indicators"></div>
  </div>
</body>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
  $(document).ready(function() {
      const slideTrack = $('.slide-track');
      const slides = $('.slide');
      const prev = $('.prev');
      const next = $('.next');
      const indicators = $('.indicators');
      let currentSlide = 0;
      // 创建指示器
      slides.each(function(index) {
        indicators.append(`<div class="indicator"></div>`);
      });
      const indicatorItems = $('.indicator');
      indicatorItems.eq(currentSlide).addClass('active');
      // 切换到指定图片
      function goToSlide(index) {
        currentSlide = index;
        updateSlide();
      }
      // 点击指示器切换图片
      indicatorItems.click(function() {
        const index = $(this).index();
        goToSlide(index);
      });
      // 切换到前一张图片
      prev.click(function() {
        currentSlide = (currentSlide - 1 + slides.length) % slides.length;
        updateSlide();
      });
      // 切换到下一张图片
      next.click(function() {
        currentSlide = (currentSlide + 1) % slides.length;
        updateSlide();
      });
      // 更新轮播显示
      function updateSlide() {
        slideTrack.css('transform', `translateX(-${currentSlide * 100}%)`);
        slides.removeClass('active');
        slides.eq(currentSlide).addClass('active');
        indicatorItems.removeClass('active');
        indicatorItems.eq(currentSlide).addClass('active');
      }
       // 自动播放功能
       function startAutoPlay() {
        autoPlayInterval = setInterval(function() {
          currentSlide = (currentSlide + 1) % slides.length;
          updateSlide();
        }, 3000); // 自动播放间隔时间,单位:毫秒
      }
      function stopAutoPlay() {
        clearInterval(autoPlayInterval);
      }
      startAutoPlay();
      // 鼠标悬停时停止轮播
      $('.slider').hover(function() {
        stopAutoPlay();
      }, function() {
        startAutoPlay();
      });
    });
</script>


</html>
下一篇:更新数据库