开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js触屏左右滑动图片

基础概念

JavaScript 触屏左右滑动图片主要涉及到触摸事件（Touch Events）和页面元素的动画效果。触摸事件包括 touchstart、touchmove 和 touchend，这些事件允许开发者响应用户的触摸操作。通过监听这些事件并计算触摸点的移动距离和方向，可以实现图片的左右滑动效果。

相关优势

用户体验：触屏滑动操作直观且自然，符合移动设备用户的使用习惯。
交互性：增强了应用的交互性，使用户能够更轻松地浏览内容。
性能：相比传统的点击或滚动，滑动操作通常具有更快的响应速度。

类型

基于 CSS 的过渡和动画：利用 CSS3 的 transition 和 transform 属性实现平滑的滑动效果。
基于 JavaScript 的动画库：如 GSAP、anime.js 等，提供更复杂的动画控制。
原生 JavaScript 实现：直接操作 DOM 元素和样式属性来实现滑动效果。

应用场景

图片轮播：在电商网站、社交媒体等展示多张图片。
滑动菜单：导航栏或侧边栏的展开与收起。
滚动页面：实现类似滚动视差的效果。

示例代码（基于原生 JavaScript）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>触屏左右滑动图片</title>
<style>
  .slider {
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  .slider-container {
    display: flex;
    transition: transform 0.3s ease;
  }
  .slider-container img {
    width: 100%;
    flex-shrink: 0;
  }
</style>
</head>
<body>

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

<script>
  let startX = 0;
  let currentTranslate = 0;
  let prevTranslate = 0;
  let animationID = 0;
  const sliderContainer = document.getElementById('sliderContainer');
  const images = document.querySelectorAll('.slider-container img');
  let currentIndex = 0;

  sliderContainer.addEventListener('touchstart', touchStart);
  sliderContainer.addEventListener('touchmove', touchMove);
  sliderContainer.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 < images.length - 1) currentIndex += 1;
    if (movedBy > 100 && currentIndex > 0) currentIndex -= 1;
    prevTranslate = currentTranslate;
    setSliderPosition();
  }

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

</body>
</html>

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

问题1：滑动不够流畅

原因：可能是由于页面重绘和回流导致的性能问题。

解决方法：

使用 transform 和 opacity 属性来实现动画，因为这些属性不会触发重绘和回流。
使用 requestAnimationFrame 来优化动画性能。

问题2：滑动方向判断不准确

原因：触摸点的移动距离计算不准确。

解决方法：

在 touchmove 事件中精确计算触摸点的移动距离。
设置一个阈值来判断滑动方向，避免误判。

通过以上方法，可以有效解决触屏左右滑动图片时可能遇到的问题，并提升用户体验。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Bootstrap幻灯轮播如何支持触屏左右滑动手势？

bootstrap是封装好的框架，需要某些功能只需调用相应的组件就可以，但有些还是没加入，比如幻灯轮播触屏左右滑动手势就不支持，大家用的设备基本是触屏的了，能用滑动交互在小屏幕上体验会更好，那么如何实现呢...一个比较简单的方法是增加一个滑动手势js插件：hammer.js，网上有很多cdn调用地址，像//cdn.bootcss.com/hammer.js/2.0.8/hammer.min.js，我们在head...Next 　　关键的步骤来了，我们需要写一个javascript命令调用hammer.js...需要注意的是，jquery版本最好是1.9版本的jquery-1.9.1.min.js，否则可能在电脑上可以实现手势滑动，而在手机上无法触摸滑动　　javascript命令这个是关键，不会写不会改就不好玩了

3.7K5 0

仿优酷Android客户端图片左右滑动（自动滑动）

android.widget.ImageView; import android.widget.ImageView.ScaleType; import android.widget.TextView; /** * 仿优酷Android客户端图片左右滑动...class MyViewPagerActivity extends Activity { private ViewPager viewPager; // android-support-v4中的滑动组件...private List imageViews; // 滑动的图片集合 private String[] titles; // 图片标题 private...int[] imageResId; // 图片ID private List dots; // 图片标题正文的那些点 private TextView tv_title;...private int currentItem = 0; // 当前图片的索引号 // An ExecutorService that can schedule commands to

8.9K7 0

Android 使用ViewPager实现左右循环滑动图片

ViewPager这个小demo实现的是可以左右循环滑动图片，下面带索引，滑到最后一页在往右滑动就要第一页，第一页往左滑动就到最后一页，先上效果图，用美女图片是我一贯的作风，呵呵 1....private ImageView[] tips; /** * 装ImageView数组 */ private ImageView[] mImageViews; /** * 图片资源...设置监听，主要是设置点点的背景 viewPager.setOnPageChangeListener(this); //设置ViewPager的默认项, 设置为长度的100倍，这样子开始就能往左滑动...(ViewPager)container).removeView(mImageViews[position % mImageViews.length]); } /** * 载入图片进去...2张图片的时候，滑动存在BUG问题的修改如下 destroyItem(View container, int position, Object object)方法中不removeView @Override

2.6K3 0

css+js实现左右滑动卡片组件

最近的一个活动页面需要做一个可以左右滑动的抽签效果，故通过用css的transform属性和js结合来模拟可以无限滚动的效果。...结构与样式结构：卡片分前后两排，每列插入10个div结点，以便做左右位移效果。样式：设置每一列都恰好好在中间位置（或中间位置附近），如下所示。 a....目标位移与帧位移为了做出滑动后到停留位置的缓动效果，所以当用户左右滑动屏幕时，会记录滑动距离，计算出卡片该到的目标位移位置，目标位移位置是有规则的，因为这里有10张卡片均分宽度，位置必须是(100%/...连续滑动判断当在上次滑动动画还未播放结束时用户又进行了第二次滑动时，需要执行一下操作： 1)....下图是chrome cpu6倍减速调试效果，没有触发layout，FPS基本维持在60左右。

30.7K10 2

js实现底部带圆点的左右滑动效果

2015-04-17 10:42:04 在一些商品展示和微信开发中经常会用到图片的展示和页面的滑动效果，前面我介绍了一种手机端上下滑动效果，今天我来给大家介绍一种手机端左右滑动并且底部有圆点，实心的圆点随着图片的变化而移动...html> 落帆亭实现的图片左右滑动底部带圆点...li class="on"> js.../swipe.js"> var slider = Swipe(document.getElementById('slider'), { auto...document.getElementById('position').getElementsByTagName('li'); 代码中用到了一个swipe.js

7.9K2 0

第145天：jQuery.touchSlider触屏满屏左右滚动幻灯片

4 5 jQuery.touchSlider触屏满屏左右滚动幻灯片... 6 7 js/jquery.min.js..."> 8 js/jquery.event.drag-1.5.min.js"> 9 js/jquery.touchSlider.js.../images/hover_right.png) no-repeat right top; 94 right:100px; 95 } 3、js插件下载引入： js/jquery.min.js..."> js/jquery.event.drag-1.5.min.js"> js/jquery.touchSlider.js

2.6K2 0

在触屏设备上面利用html5裁剪图片

前言如今触屏设备越来越流行，并且大多数已经支持html5了。针对此。对触屏设备开发图片裁剪功能，让其能够直接处理图片。减轻服务端压力。技术点浏览器必须支持html5，包含fileReader。...思路利用filereader直接读取本地图片。然后赋予一个图片。该图片及裁剪框的位置计算跟pc端一样，可是触发的事件不一样，触屏版是依据触屏事件触发的。...html5"); } js...点击图片上传选择后将载入预览图片 var Options={ width:300, height:300, cutWidth:150, cutHeight:200,...document.getElementById("processBar");var processPoint=document.getElementById("processPoint");//--加入触屏事件

1.4K2 0

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

图片轮播(左右切换)--js原生和jquery实现左右切换的做法基本步骤跟上一篇文章淡入淡出类似，只不过修改了一些特定的部分 ?...（1）首先是页面的结构部分对于我这种左右切换式 1.首先是个外围部分（其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方（也就是一个banner吧） 3.然后是一个图片组（可以用新的...）跟淡入淡出式就不一样了淡入淡出只需要显示或者隐藏对应序号的图片就行了，直接通过display来设定左右切换式则是采用图片li 浮动，父层元素ul 总宽为总图片宽，并设定为有限banner宽度下隐藏超出宽度的部分...5.接下来就是切换的函数实现了，比如要切换到序号为num的图片 //左右切换处理函数 function changeTo(num){ //设置image var...js原生(左右切换) 6 7 body,div,ul,li,a,img{margin: 0;padding: 0;}

81.3K2 0

软件界面设计手动触摸屏图片实现左右划动效果。

1、点击[复制] 2、点击[复制] 3、点击[文本] 4、点击[状态1] 5、点击[文本] 6、点击[文本] 7、点击[单击] 8、点击[右滑] ...

7562 0

vue-awesome-swiper实现轮播图片

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

5.3K4 0

微信小程序左右滑动切换图片酷炫效果（附效果）

（开发小程序的时候，注意class的命名，尽量不要使用层级嵌套，所以class取名的时候要注意唯一性） View Code 　　　　 js部分：该效果基于小程序的组件 scroll-view 开发的，利用...//滑动获取选中商品 getSelectItem:function(e){ var that = this; var itemWidth = e.detail.scrollWidth

6.3K6 0

前端成神之路-WebAPIs07

07 - Web APIs 学习目标: 能够写出移动端触屏事件能够写出常见的移动端特效能够使用移动端开发插件开发移动端特效能够使用移动端开发框架开发移动端特效能够写出 sessionStorage...触屏事件 1.1.1 触屏事件概述移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。...比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。...触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。常见的触屏事件如下： ?...可以自动播放图片手指可以拖动播放轮播图 1.2.2.

3.6K1 0

js解决切换背景图片，发生闪屏问题

原因问题出现在本站首页，切换lol人物台词，会重新获取背景图片并切换。...而下一张图片加载完成之前，会将原背景色暴露出来，从而形成所谓的闪屏解决先创建一个Image实例，进行预加载，完成后再挂载到背景上 1 const img = new Image(); 2

5K2 0

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

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

2.6K2 0

「JavaScript 」动画基础 - 03

触屏事件1.1.1 触屏事件概述移动端浏览器... 请注意，本文编写于 2082 天前，最后修改于 173 天前，其中某些信息可能已经过时。 1.1....触屏事件 1.1.1 触屏事件概述移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。...比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。...触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。...常见的触屏事件如下： 1.1.2 触摸事件对象（TouchEvent） TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。

1.2K2 0

微信小程序从零开始开发步骤（五）轮播图

Swiper是滑动特效插件，面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。是目前应用较广泛的移动端网页触摸内容滑动插件。实例： ?...图片.png 更多样式，可以查看官方的API 参考链接：https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html?...swiper-item> 第二步：js...autoplay Boolean false 是否自动切换 interval Number 5000 自动切换时间间隔 duration Number 500 滑动动画时长

1.8K3 0

前端成神之路-WebAPIs06

功能需求： 1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。 2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。 ...3.图片播放的同时，下面小圆圈模块跟随一起变化。 4.点击小圆圈，可以播放相应图片。 5.鼠标不经过轮播图，轮播图也会自动播放图片。 6.鼠标经过，轮播图模块，自动播放停止。...触屏事件 1.3.1. 触屏事件概述移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。...比如触屏事件 touch（也称触摸事件），Android和 IOS 都有。 touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。...触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。常见的触屏事件如下： ? 1.3.2.

1.3K4 0

移动端轮播图笔记

1.触屏事件 1.1触屏事件概述移动端浏览器兼容性好，我们不需要考虑以前JS的兼容问题，可以放心使用原生JS书写效果，但是移动端也有自己独特的地方，比如触屏事件touch(也叫触摸事件)，Android...触屏事件可以相应用户手指对屏幕或者触控板操作常见的触屏事件： 1.touchstart：手指触摸到一个DOM元素时触发 2.touchmove：手指在一个DOM元素上滑动时触发 3.touchend：...手指从一个DOM元素上移开时触发 1.2触摸事件对象（TochEvent） TouchEvent是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。...判断条件：如果索引号等于3说明走到最后一张图片，此时索引号要复原为0 此时图片，去掉过渡效果，然后移动如果索引号小于0，说明是倒着走，索引号改为2 此时图片，去掉过渡效果，然后移动无缝滚动实现完之后接着实现改变...，根据移动距离去判断是回弹还是播放上一张下一张 5.如果移动距离小于某个像素就回弹 6.如果移动距离大于某个像素就上一张或者下一张 js代码： //1.获取元素 var

2.5K2 1

iOS-UIWebView加载HTMLString图片显示超过屏幕宽度，导致webView可以左右滑动处的理方法

主要解决的是当加载的HTMLString既有文字又有图片时，图片没有缩放，导致图片宽度超过屏幕宽度，使得webView整体左右都可以滑动，这样效果非常不好（见下图）： ?...01-图片过宽导致webView可以左右滑动.gif ?...01-图片过宽导致webView可以左右滑动.gif 效果不好的代码如下：注：以下方法是在网络请求成功回调里面调用的 // 网络请求加载的数据,进行字典转模型 NSDictionary *...mj_objectWithKeyValues:dict]; /** model.details就是后台返回的HTMLString " $img[p].style.width = '100%%';\n"--->就是设置图片的宽度的

1.8K7 0

把笔记本触摸板用起来

大部分的笔记本用户对于触摸板都是当作没有鼠标时的一个替代品，但是现在的windows触摸板內置了不少的快捷功能，比自己去鼠标找然后点击效率会高一点，如果没有外接键盘，双手随便可以触碰的到的话，使用触摸板会把体验提升一个档次...单指单，双击和滑动这是我们使用最多的一个情景了，平时用来移动鼠标，选中，打开文件双指操作双指操作可以模拟鼠标的滚轮双指左右，上下移动当页面存在滚动条或者打开了图片查看器，可以触发滚动屏幕或者查看下一张图片...，作用可以在虚拟桌面中来回切换，前提虚拟桌面必须大于1个) 三指左划：打开最近的任务，相当于快捷键alt + tab 四指操作：四指点击：呼出快捷中心四指左右滑动：切换虚拟桌面，和三指的...隐藏菜单 WIN + D : 显示桌面 WIN + M : 最小化所有窗口 WIN + SHIFT + M : 还原最小化的窗口 WIN + E : 打开资源管理器 WIN + L : 锁屏...WIN + 右 : 右半屏窗口

1.7K4 2

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭