老师，有问题

老师，有问题

我在swiper官网的源码中粘贴像老师那样粘贴demo2的配置源码就没问题，但粘贴其他效果的源码就会报错，这是怎么回事？老师帮忙看一下非常感谢

相关截图：

这是我下载的demo4立体旋转的配置源码，但是就会报错

http://img1.sycdn.imooc.com//climg/604ada7b094e0b9708870151.jpg

http://img1.sycdn.imooc.com//climg/604ada7b09a6b6eb07710529.jpg

http://img1.sycdn.imooc.com//climg/604ada7c09b72fbc10740358.jpg

​
qq_慕仙8338401 2021-03-12
源自：Swiper快速切换插件   2-3 progress插件使用
16
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

2回答
好帮手慕星星 回答被采纳获得+3积分 2021-03-12 17:20:58

同学你好，测试粘贴的这段代码翻滚效果没有问题。老师这里报错是因为图片获取不到而已

http://img1.sycdn.imooc.com//climg/604b319109a02dfb11690074.jpg

自己本地用不了例子中的图片，换一个就好了。

建议使用下面的翻滚效果代码再测试一下（记得js文件地址更换为自己的）

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/2.7.0/idangerous.swiper.css" rel="stylesheet">
</head>

<body>
    <style>
        body {
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            color: #fff;
            padding: 0;
            margin: 0;
            font-size: 13px;
        }

        .swiper-container {
            width: 320px;
            height: 480px;
            background: #000;
            -webkit-perspective: 1200px;
            -moz-perspective: 1200px;
            -ms-perspective: 1200px;
            perspective: 1200px;
        }

        .swiper-wrapper,
        .swiper-slide,
        .flip-container {
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }

        .flip-container {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        .swiper-slide {
            position: relative;
        }

        .title {
            line-height: 480px;
            text-align: center;
            font-weight: 100;
        }

        .title span {
            font-size: 60px;
            line-height: 70px;
            display: inline-block;
            vertical-align: middle;
        }

        .inner {
            padding: 20px;
            font-size: 14px;
            font-weight: 300;
        }

        .caption {
            font-size: 50px;
            font-weight: 100;
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            text-align: center;
            background: rgba(0, 0, 0, 0.7);
            padding: 20px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        .device {
            padding: 30px 10px;
            background: #222;
            margin: 10px auto;
            width: 320px;
            border-radius: 20px;
            border: 4px solid #fff;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
        }
    </style>
    <div class="device">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="flip-container">
                        <div class="title">
                            <span>Start<br>Swiping</span>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="flip-container">
                        <div class="inner">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, tenetur aliquam possimus enim in atque fugiat et quos. Illum, perferendis, culpa esse quia ad impedit illo? Laborum iusto dicta sunt!</p>
                            <p>Mollitia, beatae, corporis, maxime quaerat laudantium amet impedit nisi animi rerum consequatur voluptates harum. Iste explicabo eveniet officiis architecto illum pariatur sint deleniti. Deserunt, nam dolor beatae excepturi
                                placeat aperiam!</p>
                            <p>Incidunt, corporis, rerum eaque unde quae repudiandae labore distinctio. A, libero, veritatis distinctio doloremque similique consequatur qui nihil totam obcaecati odio repellat accusantium iusto molestias cupiditate dolore
                                voluptatem eos natus?</p>
                            <p>Vel, harum, consequuntur velit aut ullam odit delectus nesciunt labore temporibus ab! Cum et inventore quasi. Maxime, quos, earum, dolore impedit quibusdam eveniet asperiores minus saepe nulla harum sint velit.</p>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="flip-container">
                        <div class="title">
                            <span>Keep<br>swiping</span>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="flip-container">
                        <img src="madonna320.jpg" alt="">
                        <div class="caption">Madonna</div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="flip-container">
                        <img src="michael320.jpg" alt="">
                        <div class="caption">Michael Jackson</div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="flip-container">
                        <div class="title">
                            <span>The End!</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/2.7.0/idangerous.swiper.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;
                    var rotate = -180 * progress;
                    if (rotate < -180) rotate = -180;
                    if (rotate > 180) rotate = 180;
                    var translate = progress * swiper.width;
                    swiper.setTransform(slide, 'translate3d(' + translate + 'px,0,' + -Math.abs(progress) * 500 + 'px)');
                    swiper.setTransform(slide.querySelector('.flip-container'), 'rotateY(' + rotate + 'deg)');
                }
            },
            onTouchStart: function(swiper) {
                for (var i = 0; i < swiper.slides.length; i++) {
                    swiper.setTransition(swiper.slides[i], 0);
                    swiper.setTransition(swiper.slides[i].querySelector('.flip-container'), 0);
                }
            },
            onSetWrapperTransition: function(swiper, speed) {
                for (var i = 0; i < swiper.slides.length; i++) {
                    swiper.setTransition(swiper.slides[i], speed);
                    swiper.setTransition(swiper.slides[i].querySelector('.flip-container'), speed);
                }
            }
        })
    </script>
</body>

</html>

​自己再试试，祝学习愉快！

0
收起回答
好帮手慕星星 2021-03-12 11:52:49

同学你好，指的是这个效果吗？

http://img1.sycdn.imooc.com//climg/604ae4d3099b54f304410325.jpg

老师这边下载代码测试是没有问题的，如下代码：

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./js/swiper/idangerous.swiper2.7.6.css">
</head>

<body>
    <style>
        body {
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            color: #fff;
            padding: 0;
            margin: 0;
            font-size: 13px;
        }

        .swiper-container {
            width: 320px;
            height: 480px;
            background: #000;
            -webkit-perspective: 1200px;
            -moz-perspective: 1200px;
            -ms-perspective: 1200px;
            perspective: 1200px;
        }

        .swiper-wrapper,
        .swiper-slide {
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }

        .swiper-slide {
            position: relative;
        }

        .title {
            line-height: 480px;
            text-align: center;
            font-weight: 100;
        }

        .title span {
            font-size: 60px;
            line-height: 70px;
            display: inline-block;
            vertical-align: middle;
        }

        .inner {
            padding: 20px;
            font-size: 14px;
            font-weight: 300;
        }

        .caption {
            font-size: 50px;
            font-weight: 100;
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            text-align: center;
            background: rgba(0, 0, 0, 0.7);
            padding: 20px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        .device {
            padding: 30px 10px;
            background: #222;
            margin: 10px auto;
            width: 320px;
            border-radius: 20px;
            border: 4px solid #fff;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
        }
    </style>
    <div class="device">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="title">
                        <span>Start<br>Swiping</span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="inner">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, tenetur aliquam possimus enim in atque fugiat et quos. Illum, perferendis, culpa esse quia ad impedit illo? Laborum iusto dicta sunt!</p>
                        <p>Mollitia, beatae, corporis, maxime quaerat laudantium amet impedit nisi animi rerum consequatur voluptates harum. Iste explicabo eveniet officiis architecto illum pariatur sint deleniti. Deserunt, nam dolor beatae excepturi placeat
                            aperiam!
                        </p>
                        <p>Incidunt, corporis, rerum eaque unde quae repudiandae labore distinctio. A, libero, veritatis distinctio doloremque similique consequatur qui nihil totam obcaecati odio repellat accusantium iusto molestias cupiditate dolore voluptatem
                            eos natus?</p>
                        <p>Vel, harum, consequuntur velit aut ullam odit delectus nesciunt labore temporibus ab! Cum et inventore quasi. Maxime, quos, earum, dolore impedit quibusdam eveniet asperiores minus saepe nulla harum sint velit.</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="title">
                        <span>Keep<br>swiping</span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="madonna320.jpg" alt="">
                    <div class="caption">Madonna</div>
                </div>
                <div class="swiper-slide">
                    <img src="michael320.jpg" alt="">
                    <div class="caption">Michael Jackson</div>
                </div>
                <div class="swiper-slide">
                    <div class="title">
                        <span>The End!</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <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;
                    var rotate = -90 * progress;
                    if (rotate < -90) rotate = -90;
                    if (rotate > 90) rotate = 90;
                    var translate = progress * swiper.width / 2;
                    var opacity = 1 - Math.min(Math.abs(progress), 1);
                    slide.style.opacity = opacity;
                    swiper.setTransform(slide, 'rotateY(' + rotate + 'deg) translate3d(' + translate + 'px,0,0)');
                }
            },
            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);
                }
            }
        })
    </script>
</body>

</html>

记得把css和两个js文件换为自己本地的文件哦，可能会和老师的地址不一样。

祝学习愉快！

0
收起回答
  • 提问者 qq_慕仙8338401 #1

    老师是这段代码，是翻滚效果的，就会报错

    onProgressChange: function (swiper) {

        for (var i = 0; i < swiper.slides.length; i++) {

          var slide = swiper.slides[i];

          var progress = slide.progress;

          var rotate = -180 * progress;

          if (rotate < -180) rotate = -180;

          if (rotate > 180) rotate = 180;

          var translate = progress * swiper.width;

          swiper.setTransform(slide, 'translate3d(' + translate + 'px,0,' + -Math.abs(progress) * 500 + 'px)');

          swiper.setTransform(slide.querySelector('.flip-container'), 'rotateY(' + rotate + 'deg)');

        }

      },

      onTouchStart: function (swiper) {

        for (var i = 0; i < swiper.slides.length; i++) {

          swiper.setTransition(swiper.slides[i], 0);

          swiper.setTransition(swiper.slides[i].querySelector('.flip-container'), 0);

        }

      },

      onSetWrapperTransition: function (swiper, speed) {

        for (var i = 0; i < swiper.slides.length; i++) {

          swiper.setTransition(swiper.slides[i], speed);

          swiper.setTransition(swiper.slides[i].querySelector('.flip-container'), speed);

        }

      }


    2021-03-12 12:03:00
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

老师，跟着教程操作后，有几个问题。
13 0 3
老师。有个问题
1 0 3
老师有问题
14 0 5
我想咨询下，有没QQ群，有问题要提问
0 0 3
老师 ，定时器问题
13 0 5

登录后可查看更多问答，登录/注册

前端工程师2020
  • 参与学习           人
  • 提交作业       7889    份
  • 解答问题       15276    个

前端技术快速更迭，人才紧缺。带你从0基础开始，成为Web全栈工程师，转行就业更顺畅。

了解课程

本课精华内容

问答 作业

老师，我在xhr.send()出错了

93 2

老师好，这里虽然老师给了方法，但我想问问关于定位后的宽高

44 2

函数里面的参数是函数,那么里面作为参数的函数是如何调用的?

74 4

老师请检查

30 1

老师，关于ctx.set()我存在困惑

32 1

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师