Swiper 之 banner轮播图 五图效果

实现效果:
Swiper 之 banner轮播图 五图效果_第1张图片
资源下载地址:https://download.csdn.net/my

代码:


<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>swiper-5pictitle>

  <link rel="stylesheet" type="text/css" href="http://css.lotour.com/2018/swiper.min.css" media="all" />
  <link rel="stylesheet" href="swiper-5pic.css">
  <script type="text/javascript" src="http://js.lotour.com/2018/swiper.min.js">script>
head>

<body>

  <div id="certify">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="http://img1.lotour.net/Brand/2019/0829/201908291423349263f.jpg" />
        div>
        <div class="swiper-slide">
          <img src="http://img1.lotour.net/Brand/2019/0829/201908291415367945a.jpg" />
        div>
        <div class="swiper-slide">
          <img src="http://img1.lotour.net/inspiration/2019/0502/20190502193511822393585_590_590.jpg" />
        div>
        <div class="swiper-slide">
          <img src="http://img1.lotour.net/inspiration/2019/0508/20190508213358547403820_590_590.jpg" />
        div>
        <div class="swiper-slide">
          <img src="http://img1.lotour.net/Brand/2019/0829/20190829142654747ac.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',
      },
      // pagination: {
      //     // el: '.swiper-pagination',
      //     //clickable :true,
      // },
      on: {
        progress: function (progress) {
          for (i = 0; i < this.slides.length; i++) {
            var slide = this.slides.eq(i);
            var slideProgress = this.slides[i].progress;
            modify = 1;
            if (Math.abs(slideProgress) > 1) {
              modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
            }
            translate = slideProgress * modify * 260 + '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>

css:

@charset "utf-8";
/* CSS Document */

#certify {
  position: relative;
  width: 1200px;
  margin: 0 auto
}

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

#certify .swiper-slide {
  width: 520px;
  height: 304px;
}

#certify .swiper-slide img {
  display: block;
  width: 520px;
  height: 304px;
  /* box-shadow: 0 8px 30px #ddd; */
}

#certify .swiper-slide p {
  line-height: 98px;
  padding-top: 0;
  text-align: center;
  color: #636363;
  font-size: 1.1em;
  margin: 0;
}

#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: -30px;
  width: 45px;
  height: 45px;
  background: url(../imgs/wm_button_icon.png) no-repeat;
  background-position: 0 0;
  background-size: 100%;
}

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

#certify .swiper-button-next {
  right: -30px;
  width: 45px;
  height: 45px;
  background: url(../imgs/wm_button_icon.png) no-repeat;
  background-position: 0 -93px;
  background-size: 100%;
}

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

此外,还实现了七图效果,后续更新。。

你可能感兴趣的:(javascript,Swiper,jQuery)