移动开发，touchstart轮播图，移动端拖拽应用

最新推荐文章于 2023-03-13 14:05:24 发布

xyphf_和派孔明

最新推荐文章于 2023-03-13 14:05:24 发布

阅读量2.6k

点赞数

分类专栏：常用特效 DOM&BOM操作 HTML5 Java全栈之路文章标签：移动开发

本文链接：https://blog.csdn.net/xyphf/article/details/51723409

版权

DOM&BOM操作同时被 3 个专栏收录

64 篇文章 0 订阅

订阅专栏

Java全栈之路

55 篇文章 11 订阅

订阅专栏

HTML5

52 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>和派孔明</title>
<style>
*{margin:0;padding:0;list-style:none;}
#div1{position:relative;width:320px;height:150px;
background:#ccc;margin:0 auto;overflow:hidden;}
#div1 ul{position:absolute;left:0;top:0;width:3200px;
height:150px;}
#div1 ul li{float:left;width:320px;height:100%;line-height:150px;text-align:center;font-size:20px;}
</style>
<script>
window.onload = function(){
    var oDiv = document.getElementById("div1");
    var oUl  = oDiv.children[0];
    var aLi  = oUl.children;
    var len  = aLi.length;
    oUl.addEventListener("touchstart",function(ev){
        //取消运动
        oUl.style.transition = "none";
        var disX = ev.targetTouches[0].pageX - oUl.offsetLeft;
        function fnMove(ev){
            oUl.style.left = ev.targetTouches[0].pageX - disX + "px";   
        }
        function fnEnd(){
        oUl.removeEventListener("touchmove",fnMove,false);
oUl.removeEventListener("touchend",fnEnd,false);
            //确定显示第几个
            var n = Math.round(-oUl.offsetLeft/aLi[0].offsetWidth);
            if(n < 0){
                n = 0;
            } else if(n >= len){
                n = len - 1;
            }
            console.log(n);
            //添加运动 transition:0.7s all ease;
            oUl.style.transition = "0.7s all ease"; 
            oUl.style.left = -n*aLi[0].offsetWidth + "px";
        }   
        oUl.addEventListener("touchmove",fnMove,false);
        oUl.addEventListener("touchend",fnEnd,false);
        ev.preventDefault();    
    },false);
};
</script>
</head>
<body>
    <div id="div1">
        <ul>
            <li style="background:#F3dab9;">0</li>
            <li style="background:#Fdfab9;">1</li>
            <li style="background:#F3ABF9;">2</li>
            <li style="background:#3AFBF9;">3</li>
        </ul>
    </div>
</body>
</html>