为什么我的没有效果？

来源：2-3 progress插件使用

昏睡红茶厘米

2020-05-30 12:01:19

直接下载老师的代码也是没有效果。就跟demo1的效果一样，没有progress的效果。是还要设置什么别的吗？

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <title>swiper基础滑动</title>
    <link href="../js/swiper/idangerous.swiper2.7.6.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .swiper-container,
        .swiper-wrapper,
        .swiper-slide {
            width: 100%;
            height: 100%;
        }

        .swiper-slide img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="http://climg.mukewang.com/59f2f3c60001e51206000600.jpg"></div>
            <div class="swiper-slide"><img src="http://climg.mukewang.com/59f2f3dc0001512e06000533.jpg"></div>
            <div class="swiper-slide"><img src="http://climg.mukewang.com/59f2f3fb0001725305000707.jpg"></div>
        </div>
    </div>
    <script src="../js/jquery-3.5.1.min.js"></script>
    <script src="../js/swiper/idangerous.swiper2.7.6.min.js"></script>
    <script src="../js/swiper/idangerous.swiper.progress.min.js"></script>
    <script>
        var myswiper = new Swiper('.swiper-container', {
            progress: true,

            onProgressChange: function (swiper) {
                for (var i = 0; i < swiper.slides.length; i++) {
                    var slide = swiper.slides[i];
                    var progress = slide.progress;
                    swiper.setTransform(slide, 'translate3d(0px,0,' + (-Math.abs(progress * 1500)) + 'px)');
                }
            },
            onTouchStart: function (swiper) {
                for (var i = 0; i < swiper.slides.length; i++) {
                    swiper.setTransition(swiper.slides[i], 0);
                }
            },
            onSetWrapperTransition: function (swiper, speed) {
                for (var i = 0; i < swiper.slides.length; i++) {
                    swiper.setTransition(swiper.slides[i], speed);
                }
            }
        })
        for (var i = 0; i < myswiper.slides.length; i++) {
            myswiper.slides[i].style.zIndex = myswiper.slides.length - i;
        }
    </script>
</body>

</html>

写回答

2回答

好帮手慕慕子

2020-05-30

已采纳

同学你好，对于你的问题解答如下：

因为transform-style: preserve-3d; 该属性设置在父级元素中，它的子级元素具有3d效果。perspective: 1200px; 设置观察者到物体的距离。所以设置这两个属性后，js中通过translate3d改变元素位置时，会有一个3d的效果。
源码中只保留了最后一个例子的js代码，前面示例代码都被注释了，同学想要查看第二个demo的效果，可以打开js中这段注释，测试下效果即可。
同学的代码与老师的js代码不一样，所以实现的效果会有些差别，具体的可以参考源码对比下。