JQUERY 轮播图片淡入淡出效果

最新推荐文章于 2023-08-10 09:35:41 发布

蠢北

最新推荐文章于 2023-08-10 09:35:41 发布

阅读量166

点赞数

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/qq_60485359/article/details/131800461

版权

<!DOCTYPE html>
<html>

<head>
  <title>轮播图</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    .slideshow {
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      position: relative;
    }

    .slideshow .slideshow-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-position: 50% 50%;
      background-size: cover;
      opacity: 0;
      transform: scale(1.5);
      transition: opacity 10s, transform 10s;
      z-index: 1;
    }

    .slideshow .active {
      opacity: 1;
      transform: scale(1);
      z-index: 2;
    }
  </style>
</head>

<body>
  <div class="slideshow">
    <div class="slideshow-image active"
      style="background-image: url('http://www.mhk.gov.cn/kzyy/tbbjtp/202112/W020211228618378748939.jpg')"></div>
    <div class="slideshow-image"
      style="background-image: url('http://www.mhk.gov.cn/kzyy/tbbjtp/202112/W020211228618577301419.jpg')"></div>
    <div class="slideshow-image"
      style="background-image: url('http://www.mhk.gov.cn/kzyy/tbbjtp/202112/W020211228618762607681.jpg')"></div>
    <div class="slideshow-image"
      style="background-image: url('http://www.mhk.gov.cn/kzyy/tbbjtp/202112/W020211228618577301419.jpg')"></div>
    <div class="slideshow-image"
      style="background-image: url('http://www.mhk.gov.cn/kzyy/tbbjtp/202112/W020211228618762607681.jpg')"></div>
    <div class="slideshow-image"
      style="background-image: url('http://www.mhk.gov.cn/kzyy/tbbjtp/202112/W020211228618577301419.jpg')"></div>
    <div class="slideshow-image"
      style="background-image: url('http://www.mhk.gov.cn/kzyy/tbbjtp/202112/W020211228618762607681.jpg')"></div>
    <div class="slideshow-image"
      style="background-image: url('http://www.mhk.gov.cn/kzyy/tbbjtp/202112/W020211228618577301419.jpg')"></div>
    <div class="slideshow-image"
      style="background-image: url('http://www.mhk.gov.cn/kzyy/tbbjtp/202112/W020211228618762607681.jpg')"></div>
  </div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function () {
      var images = $('.slideshow-image');
      var currentIndex = 0;
      var delay = 5000;
      function cycleImages() {
        var activeImage = images.eq(currentIndex);
        var nextIndex = (currentIndex + 1) % images.length;
        var nextImage = images.eq(nextIndex);
        activeImage.animate({
          opacity: 1,
          transform: 'scale(1.5)'
        }, 500, function () {
          activeImage.removeClass('active').css({
            opacity: '',
            transform: ''
          })
        });

        nextImage.addClass('active').css({
          opacity: 1,
          transform: 'scale(1)'
        }).animate({
          opacity: 1,
          transform: 'scale(1)'
        }, 2000, function () {
          activeImage.removeClass('active');
          setTimeout(cycleImages, delay);
        });

        currentIndex = nextIndex;
      }
      cycleImages();
    });
  </script>
</body>

</html>