移动端滑屏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事件

猜你喜欢