完整项目下载
运行效果
知识点
-
slideTo()：控制Swiper切换到指定slide。
mySwiper.slideTo(index, speed, runCallbacks)数名 类型 是否必填 描述 ndex num 必选 指定将要切换到的slide的索引 peed num 可选 切换速度(单位ms) unCallbacks boolean 可选 设置为false时不会触发transition回调函数 -
touchMove：移动端触摸移动事件
-
watchSlidesProgress：开启这个参数来计算每个slide的progress(进度、进程)，Swiper的progress无需设置即开启。
-
swiper的progress值为0-1，当前展示的slide的progress值为0，下一个为-1，上一个为1，以此类推。
-
setTranslate()
当设置wrapper的偏移量时执行。可选swiper对象和wrapper的偏移量作为参数。 -
activeIndex。返回当前活动块(激活块)的索引。loop模式下注意该值会被加上复制的slide数。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/swiper.css">
<style>
* {
margin: 0;
padding: 0;
}
html, body, #banner, #banner .swiper-slide{
height: 100%;
}
body{
background-color: #000;
overflow: hidden;
}
#main{
max-width: 640px;
margin: 0 auto;
height: 100%;
position: relative;
}
#banner .swiper-slide img{
width: 100%;
}
.thumb-list{
position: absolute;
width: 100%;
left: 0;
bottom: 5%;
}
.thumb-list .thumb{
width: 20%;
float: left;
margin-left: 4%;
}
.thumb-list .thumb img{
width: 100%;
display: block;
}
</style>
</head>
<body>
<div id="main">
<div id="banner" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img/j1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img/j2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img/j3.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img/j4.jpg" alt="">
</div>
</div>
</div>
<div class="thumb-list">
<div class="swiper-container thumb">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img/thumb1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img/thumb1_h.jpg" alt="">
</div>
</div>
</div>
<div class="swiper-container thumb">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img/thumb2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img/thumb2_h.jpg" alt="">
</div>
</div>
</div>
<div class="swiper-container thumb">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img/thumb3.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img/thumb3_h.jpg" alt="">
</div>
</div>
</div>
<div class="swiper-container thumb">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img/thumb4.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img/thumb4_h.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
<script src="js/swiper.js"></script>
<script>
window.addEventListener('load', function (ev) {
// 1. 内容的滚动
var bannerSwiper = new Swiper('#banner', {
// 1.1 开启鼠标滚轮控制Swiper切换
mousewheel: true,
// 1.2 slide的切换效果
effect : 'coverflow',
// 1.3 速度
speed: 300,
// 1.4 监视进度
watchSlidesProgress : true,
// 1.5 监听事件
on: {
// 触摸移动
touchMove: function () {
for(var i=0, len = this.slides.length; i < len; i++){
var slideProgress = Math.abs(this.slides[i].progress);
console.log(slideProgress);
if(slideProgress < 1){
thumbSwiper[i].setTranslate(thumbSwiper[i].width * (slideProgress -1));
}
}
},
// 开始移动
transitionStart: function () {
// console.log(this.activeIndex);
var activeIndex = this.activeIndex;
for(var i=0; i < thumbSwiper.length; i++){
if(i === activeIndex){
thumbSwiper[i].slideTo(1);
}else {
thumbSwiper[i].slideTo(0);
}
}
}
}
});
// 2. 编号的滚动
var thumbSwiper = new Swiper('.thumb', {
// 2.1 监视进度
watchSlidesProgress : true,
// 2.2 slide的切换效果
effect : 'cube',
// 2.3 无法触摸
touchRatio : 0,
// 2.4 按事件
on: {
tap: function () {
// console.log(this.$el.index());
bannerSwiper.slideTo(this.$el.index());
}
}
});
// 3. 控制第一个滚动切换到反面
thumbSwiper[0].slideTo(1, 0);
});
</script>
</body>
</html>
