因为公司需要自定义两个轮播图联动,又不想引入第三方库,所以自己研究了下。
下面只是一个简单的轮播图,由此再拓展一下即可实现两个轮播图联动。
<!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
>