526互联

Swiper横向循环焦点图片展示

发布时间 2023-10-07 14:43:23作者: 猖狂的小山猪

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Swiper的切换</title>
  <link rel="stylesheet" href="css/swiper.min.css">
  <link rel="stylesheet" href="css/certify.css">
  <script src="js/swiper.min.js"></script>

</head>
<body>
<div id="certify">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="images/1.jpg" /></div>
      <div class="swiper-slide"><img src="images/2.jpg" /></div>
      <div class="swiper-slide"><img src="images/3.jpg" /></div>
      <div class="swiper-slide"><img src="images/4.jpg" /></div>
      <div class="swiper-slide"><img src="images/5.jpg" /></div>
    </div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

<script>
  certifySwiper = new Swiper('#certify .swiper-container', {
    watchSlidesProgress: true,
    slidesPerView: 'auto',
    centeredSlides: true,
    loop: true,
    loopedSlides: 5,
    autoplay: true,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    on: {
      progress: function(progress) {
        for (i = 0; i < this.slides.length; i++) {
          var slide = this.slides.eq(i);
          var slideProgress = this.slides[i].progress;

          if (Math.abs(slideProgress) > 1) {
            modify = (Math.abs(slideProgress) - 1) * 0.4 + 1;
          }
          translate = slideProgress * modify * 318 + 'px';
          scale = 1 - Math.abs(slideProgress) / 5;
          zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
          slide.transform('translateX(' + translate + ') scale(' + scale + ')');
          slide.css('zIndex', zIndex);
          slide.css('opacity', 1);
          if (Math.abs(slideProgress) > 3) {
            slide.css('opacity', 0);
          }
        }
      },
      setTransition: function(transition) {
        for (var i = 0; i < this.slides.length; i++) {
          var slide = this.slides.eq(i)
          slide.transition(transition);
        }

      }
    }

  })
</script>
</body>
</html>

@charset "utf-8";
/* CSS Document */
body{
    margin:0;}
#certify {
    position: relative;
    width: 1123px;/*判断宽度设置响应式效果*/
    margin: 60px auto
}

#certify .swiper-container {
    padding-bottom: 60px;
}

#certify  .swiper-slide {
    width: 641px;
    height: 347px;
    background: #fff;
    border:1px solid #c2c2c2;
}
#certify  .swiper-slide img{
    width: 637px;
    height: 343px;
    display:block;
    border:2px solid #fff;
}

#certify .swiper-pagination {
    width: 100%;
    bottom: 20px;
}

#certify .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 5px;
    border: 3px solid #fff;
    background-color: #d5d5d5;
    width: 10px;
    height: 10px;
    opacity: 1;
}

#certify .swiper-pagination-bullets .swiper-pagination-bullet-active {
    border: 3px solid #00aadc;
    background-color: #fff;
}

#certify .swiper-button-prev {
    left: 140px;
    width: 60px;
    height: 111px;
    top:133px;
    background: url(../images/lunbo_17.png) no-repeat;

    background-size: 100%;
}

#certify .swiper-button-prev:hover {
    /*background-position: 0 -46px;*/
    /*background-size: 100%*/
}

#certify .swiper-button-next {
    right: 140px;
    width: 60px;
    height: 111px;
    top:133px;
    background: url("../images/lunbo_20.png") no-repeat;

    background-size: 100%;
}

#certify .swiper-button-next:hover {
    /*background-position: 0 -139px;*/
    /*background-size: 100%*/
}