老师，为什么我的代码没有效果？
<!--
* @Author: your name
* @Date: 2020-09-11 10:00:18
* @LastEditTime: 2020-09-11 10:00:20
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \undefinedg:\慕课网\Untitled-3.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0" name="viewport">
<title>2-4编程练习</title>
<link rel="stylesheet" href="idangerous.swiper2.7.6.css">
<link rel="stylesheet" href="idangerous.swiper.progress.min.js">
<link rel="stylesheet" href="Untitled-1.css">
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="http://img1.sycdn.imooc.com/climg//59f2f3c60001e51206000600.jpg"></div>
<div class="swiper-slide"><img src="http://img1.sycdn.imooc.com/climg//59f2f3dc0001512e06000533.jpg"></div>
<div class="swiper-slide"><img src="http://img1.sycdn.imooc.com/climg//59f2f3fb0001725305000707.jpg"></div>
</div>
</div>
<script type="text/javascript" src="idangerous.swiper2.7.6.min.js"></script>
<script type="text/javascript" src="Untitled-1.js"></script>
</body>
</html>
------------------------------------------------------------
js
//Untitlled-1.html
// var swiper=new Swiper(".swiper-container",{
// autoplay:2000,
// speed:500,
// loop:true
// });
//Untitlled-3.html
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 translate, boxShadow;
if (progress>0) {
translate = progress*swiper.width;
boxShadowOpacity = 0;
}
else {
translate=0;
boxShadowOpacity = 1 - Math.min(Math.abs(progress),1);
}
slide.style.boxShadow='0px 0px 10px rgba(0,0,0,'+boxShadowOpacity+')';
swiper.setTransform(slide,'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);
}
}
})
// Set Z-Indexes
for (var i = 0; i < mySwiper.slides.length; i++){
mySwiper.slides[i].style.zIndex = i;
}
-----------------------------------------------
css
@charset "utf-8" ;
*{margin: 0; padding: 0;}
html,body,.swiper-container,.swiper-wrapper,.swiper-slide,img{
width: 100%;
height: 100%;
}
正在回答
同学你好，黄色是警告，不是报错，不需要管。
另外非常抱歉，老师一开始也以为是滑动效果，所以按照正确的回复了。如果想要实现遮盖效果，需要引入idangerous.swiper.progress.min.js文件，然后添加样式。参考
这是按照老师的路径引入的，同学修改为自己的路径即可。然后使用3d效果
自己测试下，祝学习愉快！
- 参与学习 人
- 提交作业 209 份
- 解答问题 3299 个
本路径是通过ES6基础知识、运用Zepto、Swiper、fullPag等移动端常用工具包、以及当下流行框架Vue，结合多个实战案例，还原真实开发场景，最终实现手机端购物商城网页开发。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星