当前位置: 首页 > news >正文

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等。

相关文章:

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

在移动端实现轮播图滑动事件&#xff0c;我们通常使用 touchstart、touchmove 和 touchend 这三个事件。下面是一个基本的示例&#xff0c;展示了如何使用原生JavaScript来创建一个简单的移动端轮播图滑动效果&#xff1a; HTML结构&#xff1a; <div id"carousel&qu…...

2024.6.10学习记录

1、代码随想录二刷 2、项目难点 review 3、计组复习...

RapidJSON

要在项目中使用 RapidJSON 库&#xff0c;需要首先下载并包含该库的头文件。以下是详细的步骤&#xff0c;包括如何下载、引用和使用 RapidJSON&#xff1a; 使用 CMake 引用 RapidJSON 如果你的项目使用 CMake 构建系统&#xff0c;可以按照以下步骤引用 RapidJSON&#xff…...

二叉树的创建

目录 一、二叉树的定义 二、代码定义 三、遍历二叉树 1、前序遍历 2、中序遍历 3、后序遍历 四、方法的使用 一、二叉树的定义 二叉树&#xff08;binary tree&#xff09;是指树中节点的度不大于2的有序树&#xff0c;它是一种最简单且最重要的树。二叉树的递归定义为&a…...

adb shell进入设备后的命令

目录 一、查看删除手机 /data/local/tmp/下的文件 二、设置权限 三、查看手机设备正在运行的服务 四、可能需要的adb 命令 一、查看删除手机 /data/local/tmp/下的文件 可以通过以下命令&#xff1a; adb shell # 进入设备 ls /data/local/tmp/ # 查看文件夹下的内容…...

【Android面试八股文】Java中静态内部类是什么?和非静态内部类的区别是什么?

文章目录 Java中静态内部类是什么?和非静态内部类的区别是什么?这道题想考察什么?考察的知识点考生应该如何回答什么是内部类,什么是静态内部类?静态内部类非静态内部类静态内部类和非静态内部类的区别静态内部类和普通内部类都有各自的用途和优势扩展一:使用静态内部类来…...

IDEA启动项目报java.lang.OutOfMemoryError: GC overhead limit exceeded

idea编译项目时报j ava.lang.OutOfMemoryError: GC overhead limit exceeded错误&#xff0c;教你两步搞定&#xff01; 第一步&#xff1a;打开help -> Edit Custom VM Options ,修改xms和xmx的大小&#xff0c;如下图&#xff1a; 第二步&#xff1a;File -> Settings…...

基于R语言BIOMOD2 及机器学习方法的物种分布模拟与案例分析

原文链接&#xff1a;基于R语言BIOMOD2 及机器学习方法的物种分布模拟与案例分析https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247606139&idx4&snf94ec30bfb5fa7ac0320403d49db3b66&chksmfa821e9ccdf5978a44a9ba96f6e04a121c0bbf63beea0940b385011c0b…...

【笔记2】Python编程:从入门到实践(第2版) - 埃里克·马瑟斯

第二部分 1、外星人入侵 Pygame包 2、数据可视化 Matplotlib 、Plotly 3、Web应用程序 Django 项目1&#xff1a;外星人入侵 第12章&#xff5e;第14章 使用Pygame包来开发一款2D游戏。 它在玩家每消灭一群向下移动的外星人后&#xff0c;将玩家提高一个等级。等级越高&…...

优质免费的 5 款翻译 API 接口推荐

当谈到翻译API时&#xff0c;我们通常指的是一种编程接口&#xff0c;它允许开发者将文本从一种语言翻译成另一种语言。这些API通常由专业的翻译服务提供商提供&#xff0c;如谷歌翻译 API、实时翻译API、腾讯翻译API、DeepL翻译API、Azure翻译API等。 这些API通常提供多种语言…...

雷电模拟器中控实现,直通源码

目录 前言 开发 需求 初始环境 UI搭建 功能实现 前言 本篇为易语言雷电模拟器中控项目实现操作&#xff0c;一般用于&#xff1a;脚本开发多线程模拟操作等起始模板框架&#xff0c;使用易语言原因为其前后端一体化&#xff0c;对于脚本开发而言更为方便。 开发 需求 以…...

从渲染管线到着色器Shader实践

浏览器渲染管线原理 浏览器渲染管线是浏览器将HTML、CSS和JavaScript转换为用户可见的网页的过程。这一过程涉及多个步骤,包括解析、布局、绘制和合成等。下面是浏览器渲染管线的详细原理: 解析(Parsing): HTML解析:浏览器下载HTML内容后,首先进行HTML解析,将HTML文本…...

LabVIEW开发实验室超导体电流特性测试系统

本系统旨在为学校实验室提供一个基于LabVIEW的超导体电流特性测试平台&#xff0c;通过精确测量超导体在不同温度和电流条件下的电学特性&#xff0c;帮助学生和研究人员深入理解超导体的物理性质。本文将从背景、目标、工作原理、使用方法、操作流程和注意事项等方面详细介绍该…...

C语言之main函数的返回值(在linux中执行shell脚本并且获取返回值)

一&#xff1a;函数为什么要返回值 &#xff08;1&#xff09;函数 在设计的时候是设计了参数和返回值&#xff0c;参数是函数的输入&#xff0c;返回值是数据的输出 &#xff08;2&#xff09;因为函数需要对外输出数据&#xff08;实际上是函数运行的一些结果值&#xff09;…...

【手撕面试题】Vue(高频知识点五)

每天10道题&#xff0c;100天后&#xff0c;搞定所有前端面试的高频知识点&#xff0c;加油&#xff01;&#xff01;&#xff01;在看文章的同时&#xff0c;希望不要直接看答案&#xff0c;先思考一下自己会不会&#xff0c;如果会&#xff0c;自己的答案是什么&#xff1f;想…...

C#有哪些方式实现回调函数、处理异步操作或响应某些条件时的动作

在C#中&#xff0c;除了使用event关键字来定义事件和回调函数&#xff08;事件处理器&#xff09;之外&#xff0c;还有几种其他方式来处理异步操作或响应某些条件时的动作&#xff1a; 委托&#xff08;Delegates&#xff09;&#xff1a; 委托类似于C/C中的函数指针&#x…...

Java:110-SpringMVC的底层原理(上篇)

SpringMVC的底层原理 在前面我们学习了SpringMVC的使用&#xff08;67章博客开始&#xff09;&#xff0c;现在开始说明他的原理&#xff08;实际上更多的细节只存在67章博客中&#xff0c;这篇博客只是讲一点深度&#xff0c;重复的东西尽量少说明点&#xff09; MVC 体系结…...

【HarmonyOS】鸿蒙应用子模块module资源如何获取

【HarmonyOS】鸿蒙应用子模块module资源如何获取 一、问题背景&#xff1a; 在多模块项目工程中&#xff0c;单个模块的资源不会放在主模块中&#xff0c;所以我们需要在子模块中访问自己的资源。如果使用默认的资源获取api&#xff0c;会提示找不到资源。 那如何获取子模块下…...

Centos X系统yum安装mysql数据库

安装之前需要将系统自带的mariadb-libs软件包删除。 检查是否存在mariadb-libs包。 yum list installed|grep mariadb-libs 删除mariadb-libs包 yum -y remove mariadb-libs 声明&#xff1a; 系统&#xff1a;CentOS-7-x86_64-DVD-2009 安装为最小化安装&#xff0c;没…...

Python语言在金融领域的应用探索

Python语言在金融领域的应用探索 Python语言&#xff0c;以其简洁、易读和强大的功能库&#xff0c;近年来在金融领域崭露头角。它不仅为数据分析师、量化分析师和交易员提供了强大的工具&#xff0c;还在风险管理、投资组合优化等方面发挥了重要作用。本文将深入剖析Python语…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

【前端异常】JavaScript错误处理:分析 Uncaught (in promise) error

在前端开发中&#xff0c;JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作&#xff08;如 Promise、async/await 等&#xff09;&#xff0c;开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝&#xff08;r…...

Java详解LeetCode 热题 100(26):LeetCode 142. 环形链表 II(Linked List Cycle II)详解

文章目录 1. 题目描述1.1 链表节点定义 2. 理解题目2.1 问题可视化2.2 核心挑战 3. 解法一&#xff1a;HashSet 标记访问法3.1 算法思路3.2 Java代码实现3.3 详细执行过程演示3.4 执行结果示例3.5 复杂度分析3.6 优缺点分析 4. 解法二&#xff1a;Floyd 快慢指针法&#xff08;…...

ArcGIS Pro+ArcGIS给你的地图加上北回归线!

今天来看ArcGIS Pro和ArcGIS中如何给制作的中国地图或者其他大范围地图加上北回归线。 我们将在ArcGIS Pro和ArcGIS中一同介绍。 1 ArcGIS Pro中设置北回归线 1、在ArcGIS Pro中初步设置好经纬格网等&#xff0c;设置经线、纬线都以10间隔显示。 2、需要插入背会归线&#xf…...