思路
1.用ul ,li 来装载滑动的图片，超出部分隐藏
2.滑动是通过改变ul的位置来实现
布局
模块
1: 根据li元素个数去设置ul的宽度
1.1 获取ul元素
1.2 获取li元素的个数
1.3 设置ul元素的宽度
2: ul实现拖拽移动功能
Ul元素移动的距离 = 鼠标移动横坐标只差
Ul元素的新位置 = Ul的位置标 + Ul元素移动的距离
Ul元素可以通过translateX 来进行动画
2.1: 获取ul元素的旧位置(触碰ul元素时的translateX值)
2.2: 获取手指触碰的坐标x1
2.3: 获取手指移动的坐标x2
2.4: 计算Ul的新位置
2.5: 设置Ul的位置
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>手机滑动插件swiper</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body,
.content{
display: flex;
align-items: center;
100vw;
height: 100vh;
}
.swiper{
100%;
height: 100%;
overflow: hidden;
}
.swiper ul{
300%;
height: 100%;
list-style: none;
}
.swiper ul li{
display: flex;
justify-content: center;
align-items: center;
float: left;
calc( 100% / 3);
height: 100%;
}
.swiper ul li img{
display: block;
60%;
height: 60%;
}
</style>
</head>
<body>
<div class="content">
<div class="swiper">
<ul>
<li><img src="images/01.jpg" alt=""></li>
<li><img src="images/02.jpg" alt=""></li>
<li><img src="images/03.jpg" alt=""></li>
</ul>
</div>
</div>
</body>
<script>
var data = {
oUl : document.querySelector('ul'),
aLi : document.querySelectorAll('li'),
time : '0.5s'
}
swiper(data);
function swiper(data){
data.oUl.style.width = data.aLi.length+'00%';
for (var index = 0 ; index < data.aLi.length ; index++) {
data.aLi[index].style.width = 100/(data.aLi.length)+'%';
}
data.oUl.addEventListener('touchstart',touch); //当手指触摸屏幕时候触发
data.oUl.addEventListener('touchmove',touch); //当手指在屏幕上滑动的时候连续地触发
data.oUl.addEventListener('touchend',touch); //当手指从屏幕上离开的时候触发
data.startX = 0; //移动存放初始位置
data.oUl.transform = {}; //存放transform的变化值
};
function touch(ev){
ev = ev || window.event ; //获取手指事件
switch (ev.type) {
case 'touchstart':
data.startX = cssTransform(data.oUl,'translateX') || 0 ;
x1 = ev.changedTouches[0].pageX;
data.oUl.style.transition = '0s';
break;
case 'touchmove':
var x2 = ev.changedTouches[0].pageX;
var nowX = data.startX + x2 - x1;
cssTransform(data.oUl,'translateX',nowX);
break;
case 'touchend': //松开时 图片是拉取还是回撤
var offset = data.oUl.transform['translateX'];
offset = Math.min( 0 , offset );
offset = Math.max( -(data.aLi.length-1) * data.aLi[0].offsetWidth , offset );
var num = Math.round( - offset / data.aLi[0].offsetWidth );
cssTransform(data.oUl,'translateX',-num*data.aLi[0].offsetWidth);
data.oUl.style.transition = data.time;
break;
}
}
/*****
*@paran:设置或获取一个元素的transform的值
*@obj:待操作的元素
*@attr:待操作的属性
*@var:待设置的值
*传两个参数是获值，三个参数是这是值
**/
function cssTransform(obj , attr , val){
switch (arguments.length) { //传参的个数
case 3:
obj.transform[attr] = val;
var str = '' ; //待设置的属性值,拼接而成
for (var key in obj.transform) {
switch (key) {
case 'translate':
case 'translateX':
case 'translateY':
case 'translateZ':
str += key+'('+obj.transform[key]+'px)';
}
}
obj.style.transform = str;
break;
case 2:
var val = obj.transform[attr];
if ( typeof val === 'undefined' ) {
val = 0;
}
return val;
break;
}
};
</script>
</html>