因为公司需要自定义两个轮播图联动，又不想引入第三方库，所以自己研究了下。
下面只是一个简单的轮播图，由此再拓展一下即可实现两个轮播图联动。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>Document</title> </head> <style> html{height:100%;} body{width: 100%;height:100%;margin:0;overflow: hidden;} .wrap{position: relative;overflow: hidden;} .box{position: absolute;list-style: none;left:0;top:0;padding:0;margin:0;} .box li{float:left;} .box{ position: relative; height: 200px; width: 100%; top: 0; bottom: 0; left: 0; right: 0; background: red; transition: left 0.5s; -moz-transition: left 0.5s; /* Firefox 4 */ -webkit-transition: left 0.5s; /* Safari 和 Chrome */ -o-transition: left 0.5s; /* Opera */ } .box1{ height: 200px; } .box2{ background: yellow; } .box3{ background: yellowgreen; } .box4{ background: orange; } .box5{ background: cyan; } </style> <body> <div class="wrap"> <ul class="box"> <li><div class="box1 box2">11111</div></li> <li><div class="box1 box3">2222</div></li> <li><div class="box1 box4">3333</div></li> <li><div class="box1 box5">4444</div></li> </ul> </div> <script> // 获取dom对象 var aLi = document.querySelectorAll('.box li'); var box = document.querySelector('.box'); var wrap = document.querySelector('.wrap'); var aLiWidth = box.offsetWidth; var disX = 0; //滑动距离 var currNum = 0; //当前索引 // 布局 wrap.style.height = aLi[0].offsetHeight+'px'; box.style.width = aLi.length*100+'%'; aLi.forEach(function(item,index){ item.style.width = aLiWidth+'px'; }) // 初始化手指坐标点 var startPoint = 0; var startEle = 0; // 手指按下--获取手指位置和box的位置 wrap.addEventListener('touchstart',function(e){ startPoint = e.changedTouches[0].pageX; startEle = box.offsetLeft; console.log(startEle); }); // 手指滑动 wrap.addEventListener('touchmove',function(e){ var currPoint = e.changedTouches[0].pageX; disX = currPoint-startPoint; var left = startEle+disX/2; box.style.transition = 'left 0s'; box.style.left = left + 'px'; // console.log(disX); //手指滑动距离 }); //当手指抬起的时候，判断图片滚动离左右的距离 wrap.addEventListener('touchend',function(e){ var left = box.offsetLeft; // 判断正在滚动的图片的滚动距离和方向，以及是否是第一张或最后一张 if(disX>100){ //向右滑动100px时 currNum = Math.floor(-left/aLiWidth); currNum = currNum<=0 ? 0 : currNum; }else if(disX<-100){ //向左滑动100px时 currNum = Math.floor(-left/aLiWidth)+1; currNum = currNum>=(aLi.length-1) ? aLi.length-1 : currNum; }; box.style.transition = 'left 0.5s'; box.style.left = -currNum*wrap.offsetWidth + 'px'; }) </script> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
</head>
<style>
html{height:100%;}
body{width: 100%;height:100%;margin:0;overflow: hidden;}
.wrap{position: relative;overflow: hidden;}
.box{position: absolute;list-style: none;left:0;top:0;padding:0;margin:0;}
.box li{float:left;}
.box{
position: relative;
height: 200px;
width: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: red;
transition: left 0.5s;
-moz-transition: left 0.5s; /* Firefox 4 */
-webkit-transition: left 0.5s; /* Safari 和 Chrome */
-o-transition: left 0.5s; /* Opera */
}
.box1{
height: 200px;
}
.box2{
background: yellow;
}
.box3{
background: yellowgreen;
}
.box4{
background: orange;
}
.box5{
background: cyan;
}
</style>
<body>
<div class="wrap">
<ul class="box">
<li><div class="box1 box2">11111</div></li>
<li><div class="box1 box3">2222</div></li>
<li><div class="box1 box4">3333</div></li>
<li><div class="box1 box5">4444</div></li>
</ul>
</div>
<script>
// 获取dom对象
var aLi = document.querySelectorAll('.box li');
var box = document.querySelector('.box');
var wrap = document.querySelector('.wrap');
var aLiWidth = box.offsetWidth;
var disX = 0; //滑动距离
var currNum = 0; //当前索引
// 布局
wrap.style.height = aLi[0].offsetHeight+'px';
box.style.width = aLi.length*100+'%';
aLi.forEach(function(item,index){
item.style.width = aLiWidth+'px';
})
// 初始化手指坐标点
var startPoint = 0;
var startEle = 0;
// 手指按下--获取手指位置和box的位置
wrap.addEventListener('touchstart',function(e){
startPoint = e.changedTouches[0].pageX;
startEle = box.offsetLeft;
console.log(startEle);
});
// 手指滑动
wrap.addEventListener('touchmove',function(e){
var currPoint = e.changedTouches[0].pageX;
disX = currPoint-startPoint;
var left = startEle+disX/2;
box.style.transition = 'left 0s';
box.style.left = left + 'px';
// console.log(disX); //手指滑动距离
});
//当手指抬起的时候，判断图片滚动离左右的距离
wrap.addEventListener('touchend',function(e){
var left = box.offsetLeft;
// 判断正在滚动的图片的滚动距离和方向，以及是否是第一张或最后一张
if(disX>100){ //向右滑动100px时
currNum = Math.floor(-left/aLiWidth);
currNum = currNum<=0 ? 0 : currNum;
}else if(disX<-100){ //向左滑动100px时
currNum = Math.floor(-left/aLiWidth)+1;
currNum = currNum>=(aLi.length-1) ? aLi.length-1 : currNum;
};
box.style.transition = 'left 0.5s';
box.style.left = -currNum*wrap.offsetWidth + 'px';
})
</script>
</body>
</html>