移动端滑屏demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<title></title>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
*{
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
}
ul, ol {
list-style: none;
}
/*清除浮动*/
.box{
height: 50vh;
width: 100vw;
background: red;
}
.box1{
background: yellow;
}
.box2{
background: yellowgreen;
}
.box3{
background: cyan;
}
.box4{
background: orange;
}
/*轮播图*/
.banner{
position: relative;
/*top: 10vh;
width: 100vw;*/
width:100% ;
height: 100%;
overflow: hidden;
}
.li{
position: absolute;
left: 0;
top:0;
}
.li:nth-of-type(1){
left:0;
}
.li:nth-of-type(2){
left:375px;
}
.li:nth-of-type(3){
left:750px;
}
.li:nth-of-type(4){
left:1125px;
}
.ol{
position: absolute;
left: 50%;
top: 50%;
}
.oli{
width: 30px;
height: 30px;
background: red;
float: left;
text-align: center;
line-height: 30px;
margin-left: 5px;
}
.activeOli{
background: darkred;
color: #FFF;
}
</style>
</head>
<body>
<div class="banner">
<ul class="ul1">
<li class="li">
<div class="box box1">1111</div>
</li>
<li class="li">
<div class="box box2">2222</div>
</li class="li">
<li class="li">
<div class="box box3">3333</div>
</li>
<li class="li">
<div class="box box4">444</div>
</li>
</ul>
<div class="ol">
<span class="oli activeOli">1</span>
<span class="oli">2</span>
<span class="oli">3</span>
<span class="oli">4</span>
</div>
</div>
</body>
</html>
<script>
var banner = document.querySelector('.banner');
var width = banner.offsetWidth;
var ul1Node = banner.querySelector('.ul1');
var liNode = document.querySelectorAll('.li');
var liLength = liNode.length;
var startX = 0;//开始坐标
var moveX = 0;//移动时x的坐标
var distancex = 0;//移动距离
var isMove = false;//是否滑动过
var index = 0;//当前图片索引
document.addEventListener('touchstart',(e) => {
startX = e.touches[0].clientX;
})
document.addEventListener('touchmove',(e) => {
moveX = e.touches[0].clientX;
distancex = moveX - startX;
translateX(ul1Node,-index * width + distancex);
})
document.addEventListener('touchend',(e) => {
if( Math.abs(distancex) > (width/10) ){
if (distancex > 0) {
if(index >= 1){
index --;
}else{
index = 0
}
} else {
if(index < liLength-1){
index ++;
}else{
index =liLength-1
}
}
addTransition();
translateX(ul1Node,-index * width);
}else {
addTransition();
translateX(ul1Node,-index * width);
}
console.log(index);
showCurrentDot (index);
})
/*公用方法*/
//添加过渡
var addTransition = function () {
ul1Node.style.webkitTransition = 'all .2s ';
ul1Node.style.transition = "all .2s";
}
//删除过渡
var removeTransition = function () {
ul1Node.style.webkitTransition = 'none';
ul1Node.style.transition = "none";
}
// 设置定位
var translateX = function (ul1Node,x) {
ul1Node.style.webkitTransform = 'translateX(' + x + 'px)';
ul1Node.style.transform = 'translateX(' + x + 'px)';
}
var dots = document.getElementsByTagName("span");
function showCurrentDot (index) {
for(var i = 0, len = dots.length; i < len; i++){
dots[i].className = "oli";
}
dots[index].className = "oli activeOli";
}
</script>
以上的demo放在具体项目中可能会遇到小问题，例如移动端滑动的图片还要实现点击到下一个页面，就会出现点击先滑动然后才会触发click。在移动端，手指点击一个元素，会经过：touchstart --> touchmove -> touchend -->click。手机浏览器上，两次轻触是放大操作，在第一次被轻触后，浏览器需要先等一段时间，检测是否有第二次连续触碰，才会触发click时间，click时间通常会延迟300ms左右。
解决方法：在touchstart和touchend时记录时间和手指位置，在touchend时进行比较，如果手指为同一位置且时间很短，且期间未触发touchmove事件，则可以认为触发click事件
