老师，有一个报错
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Swiper demo2</title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0" name="viewport">
<link rel="stylesheet" href="css/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-red">1</div>
<div class="swiper-slide bg-blue">2</div>
<div class="swiper-slide bg-green">3</div>
</div>
</div>
<script type="text/javascript" src="js/idangerous.swiper2.7.6.min.js"></script>
<script type="text/javascript" src="js/idangerous.swiper.progress.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
css:
@charset "UTF-8";
*{margin: 0;padding: 0;}
html,body,.swiper-container,.swiper-wrapper,.swiper-slide,img{width: 100%;height: 100%;}
.bg-red{background: red;}
.bg-blue{background: blue;}
.bg-green{background: green;}
js:
var swiper = new Swiper(".swiper-container",{
//设定progress参数为true时启用 Smooth Progress 插件
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);
}
}
});
老师，我粘贴了一个翻滚效果从swiper2里面，粘贴上就报错了
idangerous.swiper2.7.6.min.js:16 Uncaught TypeError: Cannot read property 'style' of null
at Swiper.setTransform (idangerous.swiper2.7.6.min.js:16)
at onProgressChange (index.js:21)
at Swiper.D.fireCallback (idangerous.swiper2.7.6.min.js:15)
at c (idangerous.swiper.progress.min.js:15)
at Object.onFirstInit (idangerous.swiper.progress.min.js:15)
at Swiper.D.callPlugins (idangerous.swiper2.7.6.min.js:15)
at Swiper.D.init (idangerous.swiper2.7.6.min.js:15)
at B (idangerous.swiper2.7.6.min.js:15)
at new Swiper (idangerous.swiper2.7.6.min.js:16)
at index.js:8
正在回答
同学你好，老师这边使用了谷歌和火狐都测试了一下，刷新显示正常。且刷新之后，可以滑动。同学是不是改错了，请查看老师上次的回复重新修改一下。如果还没找出问题，就把修改之后的粘贴到问答区，以便老师为你指导。
祝学习愉快 ！
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 209 份
- 解答问题 3299 个
本路径是通过ES6基础知识、运用Zepto、Swiper、fullPag等移动端常用工具包、以及当下流行框架Vue，结合多个实战案例，还原真实开发场景，最终实现手机端购物商城网页开发。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星