swiperCut

功能描述

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

依赖的插件

./libs/swiper.min.css
./libs/swiper.min.js

快速使用

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

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

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

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

swiper核心代码如下

var swiperBg = new Swiper(".bg-swiper", {effect: "fade", fadeEffect: {crossFade: !1}}),
    swiperShow = new Swiper(".show-swiper", {
        slidesPerView: "auto",
        watchSlidesProgress: !0,
        slidesOffsetBefore: 37,
        spaceBetween: 17,
        resistanceRatio: 1,
        controller: {control: swiperBg},
        on: {
            progress: function (b) {
                for (i = 0; i < this.slides.length; i++) {
                 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(" +
                    scale + "," + scale + ",1)")
                }
            }, setTransition: function (b) {
                for (var a = 0; a < this.slides.length; a++) {
                    this.slides.eq(a).find(".goods").transition(b)
                }
            }, touchMove: function () {
                this.controller.control = .01 > this.progress ? "" : swiperBg
            }, touchEnd: function () {
                -1515 > this.translate && alert("跳转")
            }
        }
    });
是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18