文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js写触摸滑动切换图片

基础概念

触摸滑动切换图片是一种常见的交互方式，特别是在移动设备上。它允许用户通过手指在屏幕上的滑动动作来切换显示的图片。这种功能通常涉及到以下几个基础概念：

  1. 触摸事件（Touch Events）：这些事件包括 touchstart、touchmove 和 touchend，它们分别在用户触摸屏幕、移动手指和停止触摸时触发。
  2. 滑动检测（Swipe Detection）：通过分析触摸事件的坐标变化，可以判断用户是在进行水平滑动还是垂直滑动，以及滑动的方向。
  3. 图片切换逻辑：根据滑动的方向和距离，决定切换到上一张还是下一张图片。

相关优势

  • 用户体验好：直观自然的交互方式，符合用户的直觉。
  • 响应速度快：相比传统的点击按钮切换，滑动操作更为迅速和流畅。
  • 节省空间：不需要额外放置切换按钮，使得界面更加简洁。

类型与应用场景

  • 水平滑动：常见于图片轮播、相册浏览等场景。
  • 垂直滑动：适用于内容列表的分页浏览。
  • 混合滑动：同时支持水平和垂直方向的滑动切换。

示例代码

以下是一个简单的JavaScript示例，展示了如何实现水平滑动切换图片的功能：

代码语言：txt
复制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swipe Image Slider</title>
<style>
  #slider {
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  .slide {
    width: 100%;
    float: left;
  }
  img {
    width: 100%;
    display: block;
  }
</style>
</head>
<body>

<div id="slider">
  <div class="slide"><img src="image1.jpg" alt="Image 1"></div>
  <div class="slide"><img src="image2.jpg" alt="Image 2"></div>
  <div class="slide"><img src="image3.jpg" alt="Image 3"></div>
</div>

<script>
  let startX, currentTranslate, prevTranslate = 0;
  let animationID = 0;
  const slider = document.getElementById('slider');
  const slides = document.querySelectorAll('.slide');
  let currentIndex = 0;

  slider.addEventListener('touchstart', touchStart);
  slider.addEventListener('touchmove', touchMove);
  slider.addEventListener('touchend', touchEnd);

  function touchStart(event) {
    startX = event.touches[0].clientX;
    cancelAnimationFrame(animationID);
  }

  function touchMove(event) {
    const currentX = event.touches[0].clientX;
    currentTranslate = prevTranslate + currentX - startX;
  }

  function touchEnd() {
    const movedBy = currentTranslate - prevTranslate;
    if (movedBy < -100 && currentIndex < slides.length - 1) currentIndex += 1;
    if (movedBy > 100 && currentIndex > 0) currentIndex -= 1;
    prevTranslate = currentTranslate;
    setSliderPosition();
  }

  function setSliderPosition() {
    slider.style.transform = `translateX(${currentIndex * -100}%)`;
  }
</script>

</body>
</html>

可能遇到的问题及解决方法

问题1：滑动不够灵敏

  • 原因：可能是由于触摸事件处理不够及时或计算逻辑有误。
  • 解决方法：优化触摸事件的处理函数，确保它们能够快速响应；同时检查滑动距离的计算是否准确。

问题2：图片切换时出现闪烁

  • 原因：可能与CSS样式设置不当或JavaScript执行效率有关。
  • 解决方法：使用硬件加速（如 translate3d）来提高动画性能；确保图片加载完成后再进行切换操作。

问题3：多指触摸导致误操作

  • 原因：未对多点触摸进行处理，导致滑动判断不准确。
  • 解决方法：在触摸事件中加入对触摸点数量的判断，只处理单点触摸的情况。

通过上述方法，可以有效提升触摸滑动切换图片功能的稳定性和用户体验。

相关搜索:js图片滑动切换js 图片滑动切换js触摸图片左右滑动插件html触摸滑动图片jquery 触摸滑动图片js 滑动 图片旋转切换js滑动切换图片js实现图片滑动切换js图片左右滑动切换js图片滑动切换效果图片滑动切换js触摸滑动js左右滑动切换图片js鼠标滑动切换图片手机滑动切换图片jsjs实现图片滑动切换效果js手指滑动切换图片js滑动切换图片插件js点击图片左右滑动切换zepto.js图片触摸切换演示
相关搜索:
页面内容是否对你有帮助？
有帮助
没帮助

相关·内容

iOS小技能：查看大图浏览器（图片支持滑动切换）

157526 从CSDN下载Demo源码:https://download.csdn.net/download/u011018979/16039540 应用场景：查看多张大图，比如查看风险商户的证明材料，图片支持滑动切换...文章：https://blog.csdn.net/z929118967/article/details/115077471 主要功能：进入查看器之后，可左右滑动查看上/下张，并支持下滑视图退出查看器...在这里插入图片描述 I 用法 /** 初始化查看大图的controller @param imageUrls 所有大图的数组 @param originImageViews 所有小图原始的imageView...*/ @property(nonatomic,copy)NSString * urlStr; /** 小图原始的imageView，用于加载大图时的占位图片 */ @property(nonatomic...查看大图浏览器)] 从CSDN下载Demo源码:https://download.csdn.net/download/u011018979/16039540 应用场景：查看多张大图，比如查看风险商户的证明材料，图片支持滑动切换

1.2K30

    • 图片轮播(左右切换)--JS原生和jQuery实现

    图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似，只不过修改了一些特定的部分 ?...）跟淡入淡出式就不一样了 淡入淡出只需要显示或者隐藏对应序号的图片就行了，直接通过display来设定 左右切换式则是采用图片li 浮动，父层元素ul 总宽为总图片宽，并设定为有限banner宽度下隐藏超出宽度的部分...然后当想切换到某序号的图片时，则采用其ul 定位 left样式设定相应属性值实现 比如显示第一张图片初始定位left为0px, 要想显示第二张图片则需要left:-400px 处理 切换的函数实现了，比如要切换到序号为num的图片 //左右切换处理函数 function changeTo(num){ //设置image var...js原生(左右切换) 6 7 body,div,ul,li,a,img{margin: 0;padding: 0;}

    81.3K20

    JavaScript之移动端网页特效(1)

    学习目标: 触屏事件概述: 移动端浏览器兼容性较好,我们不需要考虑以前JS的兼容性问题,可以放心的使用原生JS的书写效果,但是移动端也有自己独特的地方,比如触屏事件touch(也称触摸事件),Android...touch对象代表一个触摸点,触摸点可能是一根手指,也可能是一根触摸笔.触屏事件可相应用户手指(或触控笔),对屏幕或者触控板操作 常见的触屏事件如下: 试着写一下,切换成模拟手机调试 再来试试触摸滑动事件...接下来做移动端的轮播图案例: 先搭建结构,虽然用的是以前的携程的案例,但我还是单独在页面中写吧,不然很麻烦....接下来就是手指滑动轮播图的部分: 移动也做好了,但是我们平常手机里的轮播图的滑动效果并不是这样的,而是当我们滑动很小距离时,图片会回弹回去,滑动的距离大了才会下一张,所以我们要根据moveX...但其实还是有很多bug...比如滑动着就消失了的小圆点,图片滑动到最后返回时还是没衔接上,但是太累了.明天复盘一次

    2.6K20

    前端成神之路-WebAPIs07

    该属性用于在元素中添加，移除及切换 CSS 类。...手指滑动轮播图 本质就是ul跟随手指移动，简单说就是移动端拖动元素 触摸元素touchstart： 获取手指初始坐标 移动手指touchmove： 计算手指的滑动距离，并且移动盒子...原理就是： 当我们手指触摸屏幕，记录当前触摸时间 当我们手指离开屏幕， 用离开的时间减去触摸的时间 如果时间小于150ms，并且没有滑动过屏幕， 那么我们就定义为点击 代码如下: //封装tap，解决click...我们以前写的animate.js 也算一个最简单的插件 fastclick 插件解决 300ms 延迟。...但是外观样式，还有暂停，播放，全屏等功能我们只能自己写代码解决。 这个时候我们可以使用插件方式来制作。 我们可以通过 JS 修改元素的大小、颜色、位置等样式。 1.6.

    3.6K10

    「JavaScript 」动画基础 - 03

    然后用盒子原来的位置 + 手指移动的距离 手指移动的距离： 手指滑动中的位置 减去 手指刚开始触摸的位置 拖动元素三步曲： 触摸元素 touchstart： 获取手指初始坐标，同时获得盒子原来的位置...该属性用于在元素中添加，移除及切换 CSS 类。...手指滑动轮播图 // 触摸元素 touchstart： 获取手指初始坐标 var startX = 0; var moveX = 0; // 后面我们会使用这个移动距离所以要定义一个全局变量 var...我们以前写的animate.js 也算一个最简单的插件 fastclick 插件解决 300ms 延迟。...但是外观样式，还有暂停，播放，全屏等功能我们只能自己写代码解决。 这个时候我们可以使用插件方式来制作。 我们可以通过 JS 修改元素的大小、颜色、位置等样式。 1.6.

    1.2K20

    bxslider使用帮助

    “bxSlider”就是一款响应式的幻灯片js插件 bxSlider特性 充分响应各种设备，适应各种屏幕； 支持多种滑动模式，水平、垂直以及淡入淡出效果； 支持图片、视频以及任意html内容； 支持触摸滑动...，'horizontal':水平, 'vertical':垂直, 'fade':淡入淡出 horizontal speed 内容切换速度，数字，ms 500 startSlide 初始滑动位置，数字 0...randomStart 随机初始滑动位置 true infiniteLoop 循环滑动，如果设置为true时，则到最后滑动位置时会切换到初始位置 true easing 切换动画扩展，可以借助jQuery...Easing 动画效果扩展设置不同的切换动画效果 null captions 设置显示图片标题，当滑动内容为图片时并设置属性title，可以显示图片标题 false video 支持视频，当设置为true...时，需要jquery.fitvids.js支持 false pager 设置是否显示分页，设置为true时，会在滑动内容下方显示分页图标 true controls 设置是否显示上一副和下一幅按钮 true

    1.5K20

    js十大邪术之一 图片隐写术

    还有大众点评也是通过图片隐写术来保护自身合法权益。所以图片隐写术是一个双刃剑，就看你用它做什么了。 比如下面这张图片： ?...2、图片隐写术是怎么做到的？ 　　 图片隐写有多种方式，我这里介绍的是采用图片的最低有效位（LSB）进行隐写。...QmUG1TKotQYsp6bSw6pX4crFWfhJRNTnJre7buEaYYBV72 使用示例 `js...隐写一章3千多字的小说内容后的图片效果 ? （隐写什么小说内容，各位有兴趣的将图片保存下来，然后在演示页面里读出来即可知道。）...5、附加说明 　　1）、LSB方式的隐写图片只能存储为PNG或者BMP图片格式，并且不允许再采用有损压缩（比如JPEG），否则会丢失隐写的数据！

    2.2K20

    移动端轮播图笔记

    1.触屏事件 1.1触屏事件概述 移动端浏览器兼容性好，我们不需要考虑以前JS的兼容问题，可以放心使用原生JS书写效果，但是移动端也有自己独特的地方，比如触屏事件touch(也叫触摸事件)，Android...触屏事件可以相应用户手指对屏幕或者触控板操作 常见的触屏事件： 1.touchstart：手指触摸到一个DOM元素时触发 2.touchmove：手指在一个DOM元素上滑动时触发 3.touchend：...然后用盒子原来的位置+手指移动的距离 4.手指移动的距离：手指滑动中的位置减去手指刚开始触摸的位置 拖动元素三部曲： （1）触摸元素touchstart：获取手指初始坐标，同时获得盒子原来的位置...判断条件：如果索引号等于3说明走到最后一张图片，此时索引号要复原为0 此时图片，去掉过渡效果，然后移动 如果索引号小于0，说明是倒着走，索引号改为2 此时图片，去掉过渡效果，然后移动 无缝滚动实现完之后接着实现改变...： 1.本质就是ul跟着手指移动，简单说就是移动拖动元素 2.触摸元素touchstart：获取手指初始坐标 3.移动手指touchmove：计算手指的滑动距离，并且移动盒子 4.手指离开touchend

    2.5K21

    vue-awesome-swiper实现轮播图片

    前言 最近在学习Node.js (Express.js) + Vue.js (Element UI) 全栈开发王者荣耀手机端官网和管理后台时，学习到第三章 3.7-首页顶部轮播图片（vue-swipper...Swiper目前已经更新到版本5了，Swiper常用于移动端网站的内容触摸滑动，Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。...Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！...简单配置即可实现手机、电脑网页大部分滑动功能，焦点图、tab、触摸导航等。其官网对于Swipper5的介绍如下： ? ? ?...，每隔3秒钟轮播另外一张图片，当在浏览器中左右滑动鼠标或者在手机端左右滑动时会看到不同的图片，起来轮播的效果 最终的轮播效果图如下所示： 图片1： ?

    5.3K40

    小程序开发基础-swiper 滑块视图容器

    autoplay="{{autoplay}}"为是否可以自动切换的效果，如果不设置，那就只有一张图片显示到界面中。...interval="{{interval}}"为自动切换时间的间隔，表示每张图片显示到它设定的时间就开始切换到下一个视图即图片，如果设定为3000即3秒，那么图片展示到3秒后，进入到下一个图片。...duration="{{duration}}"为滑动动画时长，怎么理解呢？就是第一张图片切换到第二张图片的时长，即第一张滑出，第二张滑入到完，所用的时间长而已。... autoplay // 滑动进度，这个按钮效果用于更改自动切换时间间隔 <slider bindchange="...current-item-id 当前所在滑块的 item-id，不能与current被同时指定 interval 表示自动切换时间间隔 duration 表示为滑动动画时长 circular 表示是否采用衔接滑动

    2K20
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券