我试了一个示例的代码可是报了一堆错，不知道该改什么了

引用的这个https://2.swiper.com.cn/demo/smooth/demo-4.html

以下是我的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="js/js/swiper/idangerous.swiper2.7.6.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide bg-1">1</div>
            <div class="swiper-slide bg-2">2</div>
            <div class="swiper-slide bg-3">3</div>
        </div>
    </div>

    <script src="js/js/swiper/idangerous.swiper2.7.6.min.js"></script>
    <script src="js/js/swiper/idangerous.swiper.progress.min.js"></script>
    <script src="js/js/index.js"></script>
</body>
</html>

index.css

@charset "utf-8";

* {
    margin: 0;
    left: 0;
}

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

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

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

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

.bg-1 {
    background: url('http://img1.sycdn.imooc.com/climg//59f2f3c60001e51206000600.jpg');
}

.bg-2 {
    background: url('http://img1.sycdn.imooc.com/climg//59f2f3dc0001512e06000533.jpg');
}

.bg-3 {
    background: url('http://img1.sycdn.imooc.com/climg//59f2f3fb0001725305000707.jpg');
}

index.js

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('.swiper-slide'), '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('.swiper-slide'), 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('.swiper-slide'), speed);
       }
     }
});

那些css、js文件都是使用的源码里的

Aurora_Meteor 2020-04-27

源自：Swiper快速切换插件 2-3 progress插件使用

收起

5回答

好帮手慕言回答被采纳获得+3积分 2020-04-27 19:08:56

同学你好，同学的结构和官方的不一样，建议：直接粘贴官方的代码(view-source:https://2.swiper.com.cn/demo/smooth/demo-4.html)，修改路径进行测试。

祝学习愉快~

收起回答

Aurora_Meteor 提问者 #1

html结构是必须要和官网上的那个完全一样才行是吗？不能少一点点？

2020-04-27 19:39:40

好帮手慕言 2020-04-28 09:35:06

同学你好，建议不要修改，避免出现问题。祝学习愉快~

收起回答

提问者 Aurora_Meteor 2020-04-27 18:41:11

老师您看我的文件结构是这样的，我引入的路径是没有问题的呀，其他几个编程练习也是一样的路径，运行的时候就不会报错，但是这个我把那个网页的js代码复制以后运行就会报出我上面的错误，是那段js代码还有什么要修改的地方我没改吗？

我之前以为是index.js的引入路径错了，改为js/index.js以后却显示找不到index.js了。

您看我在这个编程练习里http://class.imooc.com/course/qadetail/218246使用的相同的文件、相同的路径，它就没有报错的呀

收起回答

提问者 Aurora_Meteor #1

源码的html结构是好多层嵌套的，js代码中用到了flip-container类，然后我在swipe-slide里面又嵌套了一层flip-container，并且把背景图片的类给到了这个，然后控制台不报错了，但是实现效果却不对，一直只能第一张背景图片在左右翻页，但是翻页完显示的还是第一张图片不显示第二张。以下是修改后的html结构 <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="flip-container bg-1">1</div> </div> <div class="swiper-slide"> <div class="flip-container bg-2">2</div> </div> <div class="swiper-slide"> <div class="flip-container bg-3">3</div> </div> </div> </div> 然后在css文件中添加了下面这个： .flip-container { width: 100%; height: 100%; background-size: cover; } 其他的都和上面最初的代码一样的，麻烦老师看一下是怎么回事

2020-04-27 18:50:02