使用swiper5进行3d轮播图,轮播切换.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Swiper的3D切换</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/certify01.png" />
                    <p>非常难得又值钱的认证证书</p>
                </div>
                <div class="swiper-slide"><img src="images/certify02.png" />
                    <p>深圳市优秀互联网企业认定证书</p>
                </div>
                <div class="swiper-slide"><img src="images/certify03.png" />
                    <p>质量管理体系认证荣誉证书</p>
                </div>
                <div class="swiper-slide"><img src="images/certify04.png" />
                    <p>计算机软件著作权登记证书</p>
                </div>
                <div class="swiper-slide"><img src="images/certify05.png" />
                    <p>增值电信业务经营许可证</p>
                </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: false,
            navigation: {
     
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
     
                el: '.swiper-pagination',
                //clickable :true,
            },
            on: {
     
                progress: function(progress) {
     

                    //通过循环给每个元素添加相对应的style样式。
                    //slide 当前slide 
                    //slideProgress:图片所对应的索引
                    //modify: 起始值
                    //translate  轮播图平移的水平距离
                    //scale  两边图片缩放的比例
                    //zIndex 两边图片的层级关系
                    for (i = 0; i < this.slides.length; i++) {
     
                        var slide = this.slides.eq(i);
                        var slideProgress = this.slides[i].progress;
                        console.log(slideProgress)
                        var modify = 1;
                        //这里的260指的是两个元素之间平移的距离
                        var translate = slideProgress * modify * 260 + 'px';
                        var scale = 1 - Math.abs(slideProgress) / 5;
                        var zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
                        //设置轮播图单图的样式
                        slide.transform('translateX(' + translate + ') scale(' + scale + ')');
                        slide.css('zIndex', zIndex);
                        slide.css('opacity', 1);
                        //隐藏多余的轮播图.  1就是两边只剩一个,加上中间一个,就是三个。
                        //                  2就是两边只剩两个,加上中间一个,就是五个。
                        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>

你可能感兴趣的:(css3,js,html)