自动轮播延迟时间问题
来源：2-2 编程练习
hayha西蒙
2019-05-27 10:13:52
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/idangerous.swiper2.7.6.min.js"></script>
<script type="text/javascript" src="js/idangerous.swiper.3dflow.js"></script>
<script type="text/javascript" src="js/idangerous.swiper.progress.min.js"></script>
<script type="text/javascript" src="js/idangerous.swiper.scrollbar-2.4.1.min.js"></script>
<link rel="stylesheet" href="css/idangerous.swiper2.7.6.css">
<link rel="stylesheet" href="css/idangerous.swiper.3dflow.css">
<link rel="stylesheet" href="css/idangerous.swiper.scrollbar-2.4.1.css">
<title>Document</title>
<style>
@charset "utf-8";
*{
padding: 0;
margin:0;
}
html,body,.swiper-container,.swiper-wrapper,.swiper-slide{
width: 100%;
height: 100%;
}
.swiper-slide{
background-color: red;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="http://climg.mukewang.com/59f2f3c60001e51206000600.jpg" alt=""></div>
<div class="swiper-slide"><img src="http://climg.mukewang.com/59f2f3dc0001512e06000533.jpg" alt=""></div>
<div class="swiper-slide"><img src="http://climg.mukewang.com/59f2f3fb0001725305000707.jpg" alt=""></div>
</div>
</div>
<script>
var swiper=new Swiper('.swiper-container',{
speed:500,
loop:true,
autoplay:{
delay:2000
},
});
</script>
</body>
</html>
一丶为什么前两张图片显示不完全，下面缺一节
二丶为什么无论delay设置多少都没有用，切换延迟都是一秒
1回答
-
同学你好， 1、 图片不一样大小是因为同学没有为图片设置相同的宽高， 图片以自己本身的大小显示， 导致不一样。 建议： 可以统一设置图片的大小。
2、老师这边测试同学的代码， 可以设置不同的delay值， 因为浏览器会有缓存， 同学修改完delay值后清除缓存，在试一试哦， 如果不行， 同学可以查看一下引入的swiper版本是多少， 老师测试的时候使用的是4.0.2版本的， 直接在官网可以找到， 同学也可以试试哦
如果帮助到了你， 欢迎采纳!
祝学习愉快~~~
0
相似问题