swiperCut

功能描述

swiper仿手机淘宝极有家图片滑动切换效果，用例见 swiperCut.html

依赖的模块

  1. ./libs/swiper.min.css
  2. ./libs/swiper.min.js

快速使用

引入swiper文件，以及样式文件

  1. <link rel="stylesheet" type="text/css" href="./libs/swiper.min.css">
  2. <link rel="stylesheet" type="text/css" href="./style.css">
  3. <script type="application/javascript" src="./libs/swiper.min.js"></script>

页面部分dom元素如下，完整参见下载用例

  1. <div class="swiper-container show-swiper swiper-container-horizontal swiper-container-ios">
  2.     <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(37px, 0px, 0px);">
  3.         <div class="swiper-slide swiper-slide-active" style="margin-right: 17px;">
  4.             <div class="goods" style="transform: scale3d(1.1, 1.1, 1); transition-duration: 0ms;">
  5.                 <a href="#">
  6.                     <div class="c-top">
  7.                         <div class="date">
  8.                             <div class="year">2017.12</div>
  9.                             <div class="day">15</div>
  10.                             <div class="oldyear">丁酉年</div>
  11.                             <div class="oldday">十月廿八</div>
  12.                         </div>
  13.                         <div class="img"><img src="./image/001.jpg" width="100%"><span>「宜一器两用」</span></div>
  14.                     </div>
  15.                     <div class="detail">
  16.                         <h2>好物推荐：多功能导热奶油刀</h2>
  17.                         <p>一把可以切水果、涂抹果酱的多功能刀具让你的生活从此变得简单</p>
  18.                         <ul>
  19.                             <li>一物多用</li>
  20.                             <li>迅速导热</li>
  21.                         </ul>
  22.                         <div class="btn">查看详情</div>
  23.                     </div>
  24.                 </a>
  25.             </div>
  26.         </div>
  27.     </div>
  28. </div>

swiper核心代码如下

  1. var swiperBg = new Swiper(".bg-swiper", {effect: "fade", fadeEffect: {crossFade: !1}}),
  2.     swiperShow = new Swiper(".show-swiper", {
  3.         slidesPerView: "auto",
  4.         watchSlidesProgress: !0,
  5.         slidesOffsetBefore: 37,
  6.         spaceBetween: 17,
  7.         resistanceRatio: 1,
  8.         controller: {control: swiperBg},
  9.         on: {
  10.             progress: function (b) {
  11.                 for (i = 0; i < this.slides.length; i++) {
  12.                  slide = this.slides.eq(i), slideProgress = this.slides[i].progress, prevIndent = 4 == i ? .3228 : .0898, scale = 1 > Math.abs(slideProgress + prevIndent) ? .1 * (1 - Math.abs(slideProgress + prevIndent)) + 1 : 1, slide.find(".goods").transform("scale3d(" +
  13.                     scale + "," + scale + ",1)")
  14.                 }
  15.             }, setTransition: function (b) {
  16.                 for (var a = 0; a < this.slides.length; a++) {
  17.                     this.slides.eq(a).find(".goods").transition(b)
  18.                 }
  19.             }, touchMove: function () {
  20.                 this.controller.control = .01 > this.progress ? "" : swiperBg
  21.             }, touchEnd: function () {
  22.                 -1515 > this.translate && alert("跳转")
  23.             }
  24.         }
  25.     });