（六）swiper切换效果和进度
2018-09-29 本文已影响0人
我拥抱着我的未来
(1) 本节知识点
- swiper切换效果 effect
--"slide" 位移
-- "fade" 淡入
-- " cube" 3d方块
-- "coverflow" 3d流
-- "flip" 3d翻转 - 进度
- watchSlidesProgress
--mySwiper.progress
--mySwipwe.slides[n].progress - onProgress
(2) 效果开始 代码
(i) 切换效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/swiper.min.js"></script>
</head>
<style>
* {
margin: 0px;
padding: 0px;
}
.swiper-container {
width: 350px;
height: 300px;
}
.swiper-slide {
font-size: 50px;
}
.swiper-slide {
background: yellow;
}
</style>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
</body>
<script>
window.onload = function() {
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal',
effect: "coverflow", //默认就是slide位移,fade淡入淡出,cube3d方块,coverflow 3d流
})
}
</script>
</html>
(ii) 自定义自定义滑块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/swiper.min.js"></script>
</head>
<style>
* {
margin: 0px;
padding: 0px;
}
.swiper-container {
width: 350px;
height: 300px;
}
.swiper-slide {
font-size: 50px;
}
.swiper-slide {
background: yellow;
}
</style>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
<button id="btn">按钮</button>
</body>
<script>
window.onload = function() {
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal',
watchSlidesProgress: true,
onProgress: function(swiper, progress) {
for (var i = 0; i < swiper.slides.length; i++) {
//因为活动的就是0
swiper.slides[i].style.transform = "scale(" + (swiper.slides[i].progress + 1) + ")";
}
}
})
document.querySelector("#btn").onclick = function() {
//window.alert(mySwiper.progress); //progress就是运动的百分比，比如上边那个开始就是0 然后到了第二个0.5 接着第三个就是1 他是按照百分比走
//获取到每一个slide的进度,然后属性必须加上watchSlidesProgress:true,序号就是当前元素的为0,然后逐次减1
//开始就是 0，-1，-2 滑动一个后变成 1,0,-1 在画就是 2,1,0
console.log(mySwiper.slides[0].progress + "||" + mySwiper.slides[1].progress + "||" + mySwiper.slides[
2].progress);
}
}
</script>
</html>
