JS实现移动端的轮播图滑动事件

在移动端实现轮播图滑动事件,我们通常使用 touchstarttouchmovetouchend 这三个事件。下面是一个基本的示例,展示了如何使用原生JavaScript来创建一个简单的移动端轮播图滑动效果:

HTML结构

<div id="carousel" class="carousel">  <div class="carousel-items">  <div class="carousel-item">Item 1</div>  <div class="carousel-item">Item 2</div>  <div class="carousel-item">Item 3</div>  <!-- 更多轮播项 -->  </div>  
</div>

CSS样式(简单示例,仅用于展示):

.carousel {  position: relative;  overflow: hidden;  width: 100%; /* 假设为全屏宽度 */  height: 200px; /* 根据需要设置高度 */  
}  .carousel-items {  display: flex;  transition: transform 0.3s ease; /* 平滑过渡效果 */  
}  .carousel-item {  flex: 0 0 100%; /* 初始每个轮播项占据全屏宽度 */  height: 100%;  display: flex;  align-items: center;  justify-content: center;  font-size: 2em;  background-color: #f0f0f0;  margin-right: 10px; /* 用于模拟间隙,实际中可能使用其他方法 */  
}

JavaScript代码

let carousel = document.getElementById('carousel');  
let carouselItems = carousel.querySelector('.carousel-items');  
let currentX = 0; // 记录手指当前位置  
let startX = 0; // 记录手指开始位置  
let isMoving = false; // 是否正在移动  
let carouselWidth = carouselItems.getBoundingClientRect().width; // 轮播图总宽度  
let itemWidth = carousel.querySelector('.carousel-item').getBoundingClientRect().width; // 单个轮播项宽度  carousel.addEventListener('touchstart', function(e) {  startX = e.touches[0].clientX;  isMoving = true;  
});  carousel.addEventListener('touchmove', function(e) {  if (!isMoving) return;  currentX = e.touches[0].clientX - startX;  // 根据滑动距离更新轮播图位置  carouselItems.style.transform = `translateX(-${currentX}px)`;  
});  carousel.addEventListener('touchend', function(e) {  isMoving = false;  // 判断滑动方向并进行相应的处理(例如切换到下一张或上一张)  if (currentX > itemWidth / 4) { // 假设滑动超过1/4个轮播项宽度则切换  // 切换到下一张(需要编写逻辑)  } else if (currentX < -itemWidth / 4) {  // 切换到上一张(需要编写逻辑)  }  // 重置轮播图位置  carouselItems.style.transform = `translateX(0)`;  
});

注意:以上代码是一个基础示例,用于展示如何使用触摸事件来创建一个简单的滑动效果。在实际应用中,你可能需要添加更多的功能和优化,例如:

  • 滑动动画的平滑处理(使用requestAnimationFrame)。
  • 边界检查,确保轮播图不会滑出边界。
  • 添加指示器(例如小圆点)来显示当前显示的轮播项。
  • 自动播放功能。
  • 滑动到指定轮播项的功能。
  • 更好的滑动体验(例如,惯性滑动)。

对于更复杂的需求,你可能需要考虑使用现成的轮播图库,如Swiper、Slick等。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/25976.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微信小程序录音机

微信小程序是一种非常流行的移动应用&#xff0c;它具有强大的功能和便捷的使用体验。其中&#xff0c;录音功能是其重要的一部分&#xff0c;用户可以通过微信小程序进行录音&#xff0c;这为用户提供了一个便捷的交流和沟通方式。 一、录音功能的应用场景 录音功能可以应用…

ElasticSearch聚合方式

聚合方式 ES支持灵活的聚合方式,它不仅支持聚合和查询相结合,而且还可以使聚合的过滤条件不影响搜索条件,并且还支持在聚合后的结果中进行过滤筛选。 1.1 直接聚合 直接聚合指的是聚合时的DSL中国没有query子句,是直接对索引内的所有文档进行聚合。 比如下面的DSL: 1.2 先…

入门级的卷积神经网络训练识别手写数字-小白轻松上手-含数据集+pyqt界面

代码下载地址&#xff1a; https://download.csdn.net/download/qq_34904125/89374845 本代码是基于python pytorch环境安装的。 下载本代码后&#xff0c;有个requirement.txt文本&#xff0c;里面介绍了如何安装环境&#xff0c;环境需要自行配置。 或可直接参考下面博文…

苹果WWDC大会AI亮点:大揭晓

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

Java网络通信实现

UDP UDPServer import java.io.IOException; import java.net.DatagramPacket; import java.net.DatagramSocket;public class UDPServer {public static void main(String[] args) throws IOException {System.out.println("UdpServer启动");// 创建upd套接字Data…

两台电脑通过网线直连共享数据(超详细)- 我的实践记录

原文链接 按照原文的操作&#xff0c;成功通过直连网线连接了两台windows电脑并共享传输数据。 ping不通可能是防火墙没关闭导致的&#xff0c;但是完全关闭防火墙又不安全。 那么有没有不关闭防火墙&#xff0c;能够上网&#xff0c;又能直连另一台电脑呢&#xff1f; 我们…

拓扑排序-java

主要通过宽度优先搜索&#xff08;BFS&#xff09;来实现有向无环图的拓扑序列&#xff0c;邻接表存储图。数组模拟单链表、队列&#xff0c;实现BFS基本操作。 文章目录 前言 一、有向图的拓扑序列 二、算法思路 1.拓扑序列 2.算法思路 三、使用步骤 1.代码如下&#xff08;示…

大模型实战-【Langchain4J中Using AI Services in Spring Boot Application②】

Using AI Services in Spring Boot Application LangChain4j Spring Boot starter greatly simplifies using AI Services in Spring Boot applications. @SystemMessage Now, let’s look at a more complicated example. We’ll force the LLM reply using slang 😉 Th…

QT 使用资源文件的注意点

不要存放没有使用的资源文件 即使在代码中没有使用到的资源文件&#xff0c;也会编译到执行文件或者DLL里面去这样会增大它的体积。如下 在代码没有使用这个资源文件(10.4M的2k图片)&#xff0c;但是编译出来的程序有 12M左右的大小 1 假设我们有一个比较复杂的项目&#…

Web前端学习之路:深入探索学习时长与技能进阶的奥秘

Web前端学习之路&#xff1a;深入探索学习时长与技能进阶的奥秘 在数字化时代&#xff0c;Web前端技术成为了连接用户与互联网世界的桥梁。对于初学者来说&#xff0c;学习Web前端究竟需要多久&#xff0c;以及如何高效掌握相关技能&#xff0c;一直是困扰他们的难题。本文将从…

ReentrantLock底层原理

ReentrantLock public ReentrantLock() {sync new NonfairSync(); }public ReentrantLock(boolean fair) {sync fair ? new FairSync() : new NonfairSync(); }ReentrantLock 的默认实现是非公平锁&#xff0c;实际上 ReentrantLock 中的方法&#xff0c;几乎都让 sync 实现…

springboot高校运动会信息管理系统设计与实现-计算机毕业设计源码92968

摘 要 本论文介绍了一个高校运动会信息管理系统的设计和实现过程。首先是高校运动会的需求分析和可行性分析&#xff0c;通过比较运动会的各个工作流程&#xff0c;确定了系统的数据流程和数据库结构&#xff0c;然后介绍了高校运动会信息管理系统开发所使用的软件开发工具&…

Java实现数据结构——顺序表

目录 一、前言 二、实现 2.1 增 2.2 删 2.3 查 2.4 改 2.5 销毁顺序表 三、Arraylist 3.1 构造方法 3.2 常用操作 3.3 ArrayList遍历 四、 ArrayList具体使用 4.1 杨辉三角 4.2 简单洗牌算法 一、前言 笔者在以前的文章中实现过顺序表 本文在理论上不会有太详细…

TCP是如何保证可靠传输的

TCP&#xff08;传输控制协议&#xff09;通过多种机制来保证数据的可靠传输&#xff0c;以下是TCP确保可靠性的主要特点&#xff1a; 数据包编号&#xff1a; TCP给每个字节的数据分配一个序号&#xff0c;确保数据能够按照正确的顺序被接收。 确认应答&#xff08;ACK&#x…

vscode侧边栏错乱重制

vscode 重制命令面板 View: Reset View Locations

13_1 Linux 邮件服务与NTP时间服务

13_1 Linux 邮件服务与NTP时间服务 文章目录 13_1 Linux 邮件服务与NTP时间服务[toc]1. 邮件服务器2. NTP时间服务器 1. 邮件服务器 邮件服务器的作用&#xff1a; 为用户提供电子邮箱存储空间&#xff08;用户名邮件域名&#xff09;处理用户发出的邮件 —— 传递给收件服务器…

三星系统因何而成?或许是因为吞噬了第四颗恒星

相比于其他的类似星体&#xff0c;这个特殊的三星系统拥有更大更紧密的星体。 三星 天文学家发现了前所未见的三星系统。相比于其他典型的三星系统&#xff0c;这一三星系统拥有更大的体积&#xff0c;并且排列也更加紧密&#xff0c;这也使得这一系统更加特别。科学家推测&am…

【题解】—— LeetCode一周小结23

&#x1f31f;欢迎来到 我的博客 —— 探索技术的无限可能&#xff01; &#x1f31f;博客的简介&#xff08;文章目录&#xff09; 【题解】—— 每日一道题目栏 上接&#xff1a;【题解】—— LeetCode一周小结22 3.分糖果 II 题目链接&#xff1a;1103. 分糖果 II 排排坐…

MySQL-数据处理(1)

029-数据处理函数之获取字符串长度 select length(我是Cupid); select char_length(我是Cupid);concat (concatenate) select concat(cu, pid, so, handsome);030-去除字符串前后空白-trim select trim( a b c );select trim(leading 0 from 000110); select t…

C++设计模式---策略模式

1、介绍 策略模式&#xff08;Strategy Pattern&#xff09;是一种行为设计模式&#xff0c;它使你能在运行时改变对象的内部算法。策略模式定义了一系列的算法&#xff0c;并将每一个算法封装起来&#xff0c;使它们可以互相替换。策略模式使得算法可以独立于使用它的客户端变…