移动端使用touchstart，touchmove，touchend实现图片轮播

最新推荐文章于 2025-05-30 13:48:01 发布
原创 最新推荐文章于 2025-05-30 13:48:01 发布 · 1.9w 阅读 · 16 ·
CC 4.0 BY-SA版权
本文为博主原创文章，转载请注明出处。
文章标签：

#移动端 #touchmove #图片滚动

本文介绍了如何利用移动端的touchstart、touchmove和touchend事件实现图片轮播功能。详细讲解了每个事件的含义，并提供了未封装的原始代码示例。通过函数封装优化了滑动体验，解决了速度调整和页面卡顿的问题。此外，为了兼容电脑端，增加了点击按钮切换图片的功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

移动端基础事件介绍

touchstart //手指触碰屏幕
touchmove //手指在屏幕上滑动
touchend //手指离开屏幕

移动端页面滑动图片滚动是再正常不过的事情了，这次碰巧写到这样一个滚动，就把代码放出来分享一下。首先做的是一个没有经过函数封装的单纯的滑屏轮播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 防止屏幕进行伸缩 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body,html,div,ul,li{
            padding:0;
            margin:0;
        }
        #pic{
            width:100%;
            height: 300px;
            overflow: hidden;
        }
        #pic #img{
            width:400%;
            height: 300px;
            position: relative;
        }
        #img div{
            width:25%;
            height: 300px;
            float: left;
            background-color: orange;
            text-align: center;
            line-height: 300px;
            color: white;
        }
        #circle{
            width:72px;
            height: 40px;
            margin:0 auto;
            position: relative;
            z-index: 2;
            top:-40px;
        }
        #circle ul li{
            width:8px;
            height: 8px;
            background-color: white;
            list-style: none;
            float: left;
            margin:15px 5px 0 5px;
        }
        #circle ul .active{
            background-color: gray;
        }
    </style>
</head>
<body>
    <div id="pic">
        <div id="img">
            <div>1111111</div>
            <div>2222222</div>
            <div>3333333</div>
            <div>4444444</div>
        </div>
    </div>
    <div id="circle">
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script type="text/javascript">
        window.onload = function(){
            var startPos = {};//开始位置
            var endPos = {};//结束位置
            var scrollDirection;//滚动方向
            var timr;//定时器，后面控制速度会使用
            var touch;//记录触碰节点
            var index = 0;//记录滑动到第几张图片
            var oImg = document.getElementById("img");
            var oCircle = document.getElementById("circle");
            var aCircle = oCircle.getElementsByTagName("li");
            var ImgWidth;//图片宽度
            var speed; //滑动速度
            var target;//目标
            oImg.ontouchstart = function(event){
                touch = event.targetTouches[0];//取得第一个touch的坐标值
                startPos = {x:touch.pageX,y:touch.pageY}
                scrollDirection = 0;
            }
            oImg.ontouchmove = function(event){
                // 如果有多个地方滑动，我们就不发生这个事件
                if(event.targetTouches.length > 1){
                    return
                }
                touch = event.targetTouches[0];
                endPos = {x:touch.pageX,y:touch.pageY}
                // 判断出滑动方向，向右为1，向左为-1
                scrollDirection = touch.pageX-startPos.x > 0 ? 1 : -1;
            }
            oImg.ontouchend = function(){
                if(scrollDirection == 1){
                    if(index >= 1 && index<=3){
                        index--;
                        for(var i=0;i<aCircle.length;i++){
                            aCircle[i].className = '';
                        }
                        aCircle[index].className = 'active';
                        ImgWidth = parseInt(oImg.offsetWidth / aCircle.length);
                        target = -ImgWidth * index;
                        // oImg.style.left = oImg.offsetLeft + ImgWidth +'px';
                        timer = setInterval(function(){
                            speed = parseInt((target-oImg.offsetLeft) / 5);
                            if(speed == 0){
                                speed = 4;
                            }
                            if(target == oImg.offsetLeft){
                                clearInterval(timer);
                            }else{
                                oImg.style.left = oImg.offsetLeft + speed +'px';
                            }
                        },30);
                    }else{
                        return
                    }
                }else if(scrollDirection == -1){
                    if(index >=0 && index <=2){
                        index++;
                        for(var i=0;i<aCircle.length;i++){
                            aCircle[i].className = '';
                        }
                        aCircle[index].className = 'active';
                        ImgWidth = parseInt(oImg.offsetWidth/4);
                        target = -ImgWidth * index;
                        timer = setInterval(function(){
                            speed = parseInt((oImg.offsetLeft-target) / 5);
                            if(speed == 0){
                                speed = 4;
                            }
                            if(target == oImg.offsetLeft){
                                clearInterval(timer);
                            }else{
                                oImg.style.left = oImg.offsetLeft - speed +'px';
                            }
                        },30);
                    }else{
                        return
                    }
                }
            }
        }
    </script>
</body>
</html>

作为一名程序员，函数封装那是肯定的，比较这里用了两次呢，那我们就简单封装一下。另外我们发现最后那里有点卡，因为当速度为0 的时候，我们一下提高到了4，另外有时候还有出现闪的情况。这里我们也适当修改一下。最后结果如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 防止屏幕进行伸缩 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body,html,div,ul,li{
            padding:0;
            margin:0;
        }
        #pic{
            width:100%;
            height: 300px;
            overflow: hidden;
        }
        #pic #img{
            width:400%;
            height: 300px;
            position: relative;
        }
        #img div{
            width:25%;
            height: 300px;
            float: left;
            background-color: orange;
            text-align: center;
            line-height: 300px;
            color: white;
        }
        #circle{
            width:72px;
            height: 40px;
            margin:0 auto;
            position: relative;
            z-index: 2;
            top:-40px;
        }
        #circle ul li{
            width:8px;
            height: 8px;
            background-color: white;
            list-style: none;
            float: left;
            margin:15px 5px 0 5px;
        }
        #circle ul .active{
            background-color: gray;
        }
    </style>
</head>
<body>
    <div id="pic">
        <div id="img">
            <div>1111111</div>
            <div>2222222</div>
            <div>3333333</div>
            <div>4444444</div>
        </div>
    </div>
    <div id="circle">
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script type="text/javascript">
        window.onload = function(){
            var startPos = {};//开始位置
            var endPos = {};//结束位置
            var scrollDirection;//滚动方向
            var timr;//定时器，后面控制速度会使用
            var touch;//记录触碰节点
            var index = 0;//记录滑动到第几张图片
            var oImg = document.getElementById("img");
            var oCircle = document.getElementById("circle");
            var aCircle = oCircle.getElementsByTagName("li");
            var ImgWidth;//图片宽度
            var speed; //滑动速度
            var target;//目标
            function slide(index){
                for(var i=0;i<aCircle.length;i++){
                    aCircle[i].className = '';
                }
                aCircle[index].className = 'active';
                ImgWidth = parseInt(oImg.offsetWidth / aCircle.length);
                target = -ImgWidth * index;
                // oImg.style.left = oImg.offsetLeft + ImgWidth +'px';
                timer = setInterval(function(){
                    speed = speed > 0 ? Math.floor((target-oImg.offsetLeft) / 5) : Math.ceil((target-oImg.offsetLeft) / 5);
                    if(target == oImg.offsetLeft){
                        clearInterval(timer);
                    }else{
                        oImg.style.left = oImg.offsetLeft + speed +'px';
                    }
                },30);
            }
            oImg.ontouchstart = function(event){
                touch = event.targetTouches[0];//取得第一个touch的坐标值
                startPos = {x:touch.pageX,y:touch.pageY}
                scrollDirection = 0;
            }
            oImg.ontouchmove = function(event){
                // 如果有多个地方滑动，我们就不发生这个事件
                if(event.targetTouches.length > 1){
                    return
                }
                touch = event.targetTouches[0];
                endPos = {x:touch.pageX,y:touch.pageY}
                // 判断出滑动方向，向右为1，向左为-1
                scrollDirection = touch.pageX-startPos.x > 0 ? 1 : -1;
            }
            oImg.ontouchend = function(){
                if(scrollDirection == 1){
                    if(index >= 1 && index <= aCircle.length-1){
                        index--;
                        slide(index);
                    }else{
                        return
                    }
                }else if(scrollDirection == -1){
                    if(index >=0 && index <= aCircle.length-2){
                        index++;
                        slide(index);
                    }else{
                        return
                    }
                }
            }
        }
    </script>
</body>
</html>

那么问题又来了，如果别人在电脑打开页面怎么办？电脑不支持滑动轮播啊，所以又增加一个，点击按钮的事件，这样我们就可以很好的支持电脑端和移动端了。因为封装了函数，这次写起来就很快啦

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 防止屏幕进行伸缩 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body,html,div,ul,li{
            padding:0;
            margin:0;
        }
        #pic{
            width:100%;
            height: 300px;
            overflow: hidden;
        }
        #pic #img{
            width:400%;
            height: 300px;
            position: relative;
        }
        #img div{
            width:25%;
            height: 300px;
            float: left;
            background-color: orange;
            text-align: center;
            line-height: 300px;
            color: white;
        }
        #circle{
            width:72px;
            height: 40px;
            margin:0 auto;
            position: relative;
            z-index: 2;
            top:-40px;
        }
        #circle ul li{
            width:8px;
            height: 8px;
            background-color: white;
            list-style: none;
            float: left;
            margin:15px 5px 0 5px;
        }
        #circle ul .active{
            background-color: gray;
        }
    </style>
</head>
<body>
    <div id="pic">
        <div id="img">
            <div>1111111</div>
            <div>2222222</div>
            <div>3333333</div>
            <div>4444444</div>
        </div>
    </div>
    <div id="circle">
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script type="text/javascript">
        window.onload = function(){
            var startPos = {};//开始位置
            var endPos = {};//结束位置
            var scrollDirection;//滚动方向
            var timr;//定时器，后面控制速度会使用
            var touch;//记录触碰节点
            var index = 0;//记录滑动到第几张图片
            var oImg = document.getElementById("img");
            var oCircle = document.getElementById("circle");
            var aCircle = oCircle.getElementsByTagName("li");
            var ImgWidth;//图片宽度
            var speed; //滑动速度
            var target;//目标
            function slide(index){
                for(var i=0;i<aCircle.length;i++){
                    aCircle[i].className = '';
                }
                aCircle[index].className = 'active';
                ImgWidth = parseInt(oImg.offsetWidth / aCircle.length);
                target = -ImgWidth * index;
                timer = setInterval(function(){
                    speed = speed > 0 ? Math.floor((target-oImg.offsetLeft) / 5) : Math.ceil((target-oImg.offsetLeft) / 5);
                    if(target == oImg.offsetLeft){
                        clearInterval(timer);
                    }else{
                        oImg.style.left = oImg.offsetLeft + speed +'px';
                    }
                },30);
            }
            oImg.ontouchstart = function(event){
                touch = event.targetTouches[0];//取得第一个touch的坐标值
                startPos = {x:touch.pageX,y:touch.pageY}
                scrollDirection = 0;
            }
            oImg.ontouchmove = function(event){
                // 如果有多个地方滑动，我们就不发生这个事件
                if(event.targetTouches.length > 1){
                    return
                }
                touch = event.targetTouches[0];
                endPos = {x:touch.pageX,y:touch.pageY}
                // 判断出滑动方向，向右为1，向左为-1
                scrollDirection = touch.pageX-startPos.x > 0 ? 1 : -1;
            }
            oImg.ontouchend = function(){
                if(scrollDirection == 1){
                    if(index >= 1 && index <= aCircle.length-1){
                        index--;
                        slide(index);
                    }else{
                        return
                    }
                }else if(scrollDirection == -1){
                    if(index >=0 && index <= aCircle.length-2){
                        index++;
                        slide(index);
                    }else{
                        return
                    }
                }
            }
            for(var i = 0;i < aCircle.length; i++){
                aCircle[i].index = i;
                aCircle[i].onclick = function(){
                    slide(this.index);
                }
            }
        }
    </script>
</body>
</html>
jQuery -- touch事件之轮播图效果
删库跑路
06-28 2571
废话不多说，下面放代码，注释很详细，不怕看不懂 效果图预览：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-
移动端touchmove事件边界touchend不触发
qjl_0805的博客
06-28 7478
做前端一年整，碰到不少问题，以前都是找资源，解决问题，不会去分享资源，这次是我第一次写博客，如果有什么问题，欢迎来交流。 在过去一年的时间里，我所接触的多有是移动端的项目，移动前端中，touch触摸事件经常会涉及到，轮播图，上拉加载，都要用到touch事件，有用过插件，也有自己写过一些事件。关于touch事件中关键的3个事件 touchstart, touchmove, touchend
touch 移动端web手势滑动完成轮播图切换效果
12-16
touch 移动端web手势滑动完成轮播图切换效果，此效果仅仅展示了touch功能的冰山一角，更多功能还需要朋友们努力挖掘。
鸿蒙OS&UniApp图文滚动视图实现：打造流畅的移动端浏览体验#三方框架 #Uniapp
最新发布
2501_92232234的博客
05-30 268
通过以上实现，我们不仅完成了一个功能完备的图文滚动视图，还在性能优化和用户体验上做了深入的探索。借鉴鸿蒙OS的设计理念，我们的实现更加符合现代移动应用的要求。在实际开发中，我们需要根据具体场景和需求，对上述实现进行适当的调整和优化。针对不同的业务场景选择合适的图片加载策略根据用户设备性能动态调整虚拟列表的参数结合具体的设计规范调整UI样式和交互效果希望这篇文章能够帮助大家更好地理解和实现UniApp中的图文滚动视图，同时也能够在实际开发中应用这些优化策略，打造出更好的用户体验。
手写轮播图,左右滑动 和上下滑动处理 滑动
web修理工
06-26 629
1.手写轮播图 2.左右滑动 和上下滑动处理 转载:https://blog.youkuaiyun.com/qq_38128179/article/details/114287812 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&
使用view的OnTouchListener来实现图片的移动和多点触控放大图片
Volkssturm的博客
06-09 957
首先写一个内部类继承View.OnTouchListener private final class TouchListener implements View.OnTouchListener { /** * 记录是拖拉照片模式还是放大缩小照片模式 */ private int mode = 0;// 初始状态
JavaScript实现移动端轮播效果
10-19
在电脑端，我们通常会使用鼠标事件（如鼠标点击或滑动）来控制轮播，而在移动端，由于触摸屏的特性，我们需要使用新的触摸事件：touchstart、touchmove和touchend。 - `touchstart`事件：当用户的手指触摸屏幕时...
使用纯CSS3实现图片轮播效果源码免费下载
11-04
5. **触控支持**：为了使轮播在触摸设备上可用，需要添加相应的事件处理，如`touchstart`, `touchmove`, `touchend`等，这些可以通过CSS3的`pointer-events`属性控制。 6. **控制按钮**：虽然使用纯CSS3可以实现...
html手机移动端轮播器,原生js实现移动端Touch轮播图的方法步骤
weixin_39618456的博客
06-15 594
Touch 轮播图touch轮播图其实就是通过手指的滑动，来左右切换轮播图，下面我们通过一个案例，来实现下。1. html 结构结构上，还是用ul、li来存放轮播图片，ol、li来存放轮播小圆点：2. 样式初始化html的一些标签，都会有一些默认样式，比如body标签默认是有一个边距的，为了不影响美观，我们需要清除掉。/* 清除标签默认边距 */body,ul,li,ol,img {margin:...
vue移动端轮播图（触摸滑动滚动、自动轮播、无缝滚动、循环无回滚）
qq_42586895的博客
02-11 7881
移动端轮播图——Vue 喜欢的小伙伴可以和我互相关注哦 有任何疑问都可以私聊我 互相学习，共同进步 pc端轮播图主页里也有哦 还是老样子，先看效果图 具体实现代码解析 HTML结构<div class="swiper"> <div class="container"> <ul ref="imgBox" @transitionen...
移动web学习(二) --- 手指触摸相关的touch事件并实现滑动轮播图,以及移动端中tap和click事件
WjiaoJ的学习
04-25 834
一.touch事件 1. 移动端新增的4个与手指触摸相关的事件 1. touchstart : 手指放在屏幕上时触发 2. touchmove : 手指在屏幕上滑动时触发(会触发多次) 3. touchend : 手指离开屏幕时触发 4. touchcancel : 系统取消touch事件时候触发,比如电话 2. 每次触摸被触发后,会生成...
web移动端轮播图之touch触摸事件
qq_38008818的博客
08-14 843
touch是移动端触摸事件，而且是一组事件 touchstart//当手指触摸屏幕时触发 touchmove//当手指在屏幕中来回滑动时候触发 touchend//当手指离开屏幕时候触发 touchcancel//当在屏幕上滑动被迫终止的时候（来电话、有消息） 利用touch相关事件实现移动端常见的滑动效果和常见手势 1.绑定事件：box.addEventListener('touch...
小程序图片轮播特效swiper(纯手打)
weixin_34162228的博客
01-22 684
前言 一个月前还是用vue做微信H5,后面公司业务发展,入坑小程序，做了几款小程，跑了不少坑, 也会陆续在后面几节跟大家分享。 在这节给大家分享这个 小程序图片轮播实现方案 初步的实现思路 我要实现的效果 能看到 左右两边如果有图，会显示一部分出来，本来也想用 小程序自带的swiper 组件，无法达到，左右两边 看到上（下）图片的效果，无...
原生touch事件实现简易轮播
luck_lin
05-08 440
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scal
触摸事件touchstart、touchmove、touchend
weixin_43160562的博客
12-06 1200
vue
触屏Touch事件总结（touchstart、touchmove、touchend 区别和使用场景）
yqdid的博客
12-16 3702
web开发过程遇到触屏适配，需要使用到touch相关一系列事件，以下是开发过程查询的资料总结，以及遇到问题和解决方案。
移动端事件touchstart touchmove touchend 动画事件 过渡事件
前端小99的博客
09-10 857
在移动端新增了touch事件，因为手指的行为叫做“触摸”， 鼠标的行为叫做“点击” 但是它仍然支持点击事件，有300ms的延迟，检测是否双击 移动端的三个事件 touchstart：触摸开始 绑定方式： dom.addEventListener(“touchstart”, fn) touchmove: 触摸移动 绑定方式： dom.addEventListener(“touchmove”, fn) touchend: 触摸结束 绑定方式: dom.addEven...
Html5 ontouchstart与ontouchend
热门推荐
Je_WangZhe的专栏
06-30 1万+
一开始做项目时，还是把项目当初PC端的项目来做，然后PM方面提出了一个需求说是手指触摸屏幕上的某条信息时，背景色需求切换成另外一种颜色，当手指离开时变回原来的颜色，我一想，这个好简单。。。搞个a标签用伪类hover就可以实现了，好吧，一开始想简单了，就这样弄上去了，运行项目，发现没有想要的效果。。。然后就各种检查(代码)，发现没问题之后，就开始着手是不是移动端的跟PC端的有什么区别没有，最后定位到
Bootstrap实现移动端响应式图片轮播
在技术实现上，这通常涉及到监听触摸事件（如touchstart、touchmove、touchend），并通过JavaScript来计算滑动方向并执行相应的图片切换逻辑。 ####响应式图片的处理 在移动设备上使用轮播图时，图片的尺寸和质量...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值