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

移动端可互动轮播图

news 来源：原创 2025/5/14 19:57:19

首先通过事件监听获得到初始滑动位置，并关闭掉轮播图的自动轮播定时器

//设置事件代理
$(".slider").on("touchstart", function (e) {// 当滑动触发的时候关闭定时器clearInterval(time);// 开始时的pxstartX = e.touches[0].clientX;
});

然后通过事件监听，获得滑动停止的位置，同时打开节流阀，防止短时间内多次滑动导致出现问题，先获得到停止的位置，然后判断滑动距离是否超过一定的值，超过判断为用户滑动，然后判断正负，正值向下一张滑动，负值向上一张滑动，在内里调用自动轮播函数即可，随后重新启动定时器，确保用户滑动完一次松手以后，轮播图的自动轮播可以重新启动，最后在所有语句执行完成以后，过一秒，关闭节流阀

$(".slider").on("touchend", function (e) {// 判断是否开启节流阀if (silider_switch == true) {return;}// 开启节流阀silider_switch = true;// 结束时的pxendX = e.changedTouches[0].clientX;// 计算移动的pxlet move = startX - endX;// 判断用户滑动的距离,避免用户误触if (move > 60 || move < -60) {if (move > 0) {// 执行从左向右滑动auto_next();time = setInterval(auto_next, 2000);changeSlide(index);} else {// 执行从右向左滑动auto_next_prev();time = setInterval(auto_next, 2000);changeSlide(index);}}console.log(silider_switch);setTimeout(function () {// 1秒以后关闭节流阀silider_switch = false;}, 1000);
});

相关文章：

移动端可互动轮播图

首先通过事件监听获得到初始滑动位置&#xff0c;并关闭掉轮播图的自动轮播定时器 //设置事件代理 $(".slider").on("touchstart", function (e) {// 当滑动触发的时候关闭定时器clearInterval(time);// 开始时的pxstartX e.touches[0].clientX; }); 然…...

编程日记 2025/5/14 19:57:19

深入讲解 Docker 及实践

Docker 是现代化应用开发、测试和生产环境部署中不可或缺的工具。它能够为开发人员提供与生产环境一致的开发环境&#xff0c;同时支持高效的容器化部署、资源隔离、容器编排等高级功能。尤其在微服务架构和云原生应用中&#xff0c;Docker 更是提供了简化的流程和高效的可扩展…...

编程日记 2025/5/12 2:48:18

科大讯飞前端面试题及参考答案（ 上）

前端有用到哪些数据结构？ 在前端开发中，会运用到多种数据结构，以下是一些常见的类型及其应用场景。 数组（Array） 数组是一种有序的元素集合，可以存放不同类型的数据（在 JavaScript 等前端常用语言中）。比如在构建一个网页的列表展示时，像新闻列表、商品列表等，我们可…...

编程日记 2025/5/3 17:27:06

本地导入封装的模块 在docker内报错ImportError

本地封装了一个login方法 在写testcase的时候去复用这个方法 但是进入docker运行的时候一直报上面的错误 目录 出现的原因&#xff1a; 解决方法&#xff1a; 1. 根据docker的路径写绝对路径 2. 用sys 加入path到code 作用&#xff1a; 好处&#xff1a; 出现的原因…...

编程日记 2025/5/9 6:23:47

Java-日志技术大全

一&#xff1a;目录 1.jul的使用 2.log4j的使用 3.logback的使用 4.log4j2的使用 二&#xff1a;jul使用 jul是JDK自带的日志技术&#xff0c;不需要导入其他依赖&#xff0c;默认的级别为info 1.关键组件&#xff1a; (1).Logger&#xff1a;记录器 (2).Handler&…...

编程日记 2025/5/10 11:28:03

ARP-Batch-Retargeting 部署实战

git 地址&#xff1a; https://github.com/Shimingyi/ARP-Batch-Retargeting bpy安装&#xff1a; pypi上搜索 bpy bpy 4.3.0&#xff0c;4.2.0版本报错&#xff1a; Traceback (most recent call last):File "E:\project\jijia_4d\retarget\ARP-Batch-Retargeting-…...

编程日记 2025/5/11 6:01:17

二分查找题目：寻找峰值 II

文章目录 题目标题和出处难度题目描述要求示例数据范围 解法思路和算法证明代码复杂度分析 题目 标题和出处 标题&#xff1a;寻找峰值 II 出处&#xff1a;1901. 寻找峰值 II 难度 7 级 题目描述 要求 一个二维网格中的峰值元素是指其值严格大于相邻值&#xff08;左、…...

编程日记 2025/5/7 7:03:20

调和级数不为整数的证明

文章目录 1. 问题引入2. 证明2.1 引理12.2 引理22.3 引理3&#xff1a;2.4 核心证明&#xff1a; 3. 参考 1. 问题引入 s ( n ) 1 1 2 1 3 ⋯ 1 n , n ∈ N ∗ , n ≥ 2 s(n) 1\frac{1}{2}\frac{1}{3}\cdots\frac{1}{n}, \quad \\n \in N^*, n \ge2 s(n)121​31​⋯n1​,…...

编程日记 2025/5/10 8:15:09

Redis 源码分析-内部数据结构 dict

Redis 源码分析-内部数据结构 dict 在上一篇 Redis 数据库源码分析 提到了 Redis 其实用了全局的 hash 表来存储所有的键值对&#xff0c;即下方图示的 dict&#xff0c;dict 中有两个数组&#xff0c;其中 ht[1] 只在 rehash 时候才真正用到&#xff0c;平时都是指向 null&am…...

编程日记 2025/5/7 5:54:49

git相关操作笔记

git相关操作笔记 1. git init git init 是一个 Git 命令&#xff0c;用于初始化一个新的 Git 仓库。执行该命令后&#xff0c;Git 会在当前目录创建一个 .git 子目录&#xff0c;这是 Git 用来存储所有版本控制信息的地方。 使用方法如下&#xff1a; &#xff08;1&#xff…...

编程日记 2025/5/11 7:01:57

STM32小实验2

定时器实验 TIM介绍 TIM&#xff08;Timer&#xff09;定时器 定时器可以对输入的时钟进行计数&#xff0c;并在计数值达到设定值时触发中断 16位计数器、预分频器、自动重装寄存器的时基单元&#xff0c;在72MHz计数时钟下可以实现最大59.65s的定时 不仅具备基本的定时中断…...

编程日记 2025/5/9 8:34:34

Oracle Dataguard（主库为双节点集群）配置详解（2）：备库安装 Oracle 软件

Oracle Dataguard&#xff08;主库为双节点集群&#xff09;配置详解&#xff08;2&#xff09;&#xff1a;备库安装 Oracle 软件 目录 Oracle Dataguard&#xff08;主库为双节点集群&#xff09;配置详解&#xff08;2&#xff09;&#xff1a;备库安装 Oracle 软件一、Orac…...

编程日记 2025/5/11 9:53:08

基于 Pod 和 Service 注解的服务发现

基于 Pod 和 Service 注解的服务发现 背景 很多应用会为 Pod 或 Service 打上一些注解用于 Prometheus 的服务发现&#xff0c;如 prometheus.io/scrape: "true"&#xff0c;这种注解并不是 Prometheus 官方支持的&#xff0c;而是社区的习惯性用法&#xff0c;要使…...

编程日记 2025/5/11 2:41:41

操作系统之文件的逻辑结构

目录 无结构文件&#xff08;流式文件&#xff09; 有结构文件&#xff08;记录式文件&#xff09; 分类&#xff1a; 顺序文件 特点&#xff1a; 存储方式&#xff1a; 逻辑结构&#xff1a; 优缺点&#xff1a; 索引文件 目的&#xff1a; 结构&#xff1a; 特点…...

编程日记 2025/5/13 3:11:02

网络分析与监控：阿里云拨测方案解密

作者&#xff1a;俞嵩(榆松) 随着互联网的蓬勃发展&#xff0c;网络和服务的稳定性已成为社会秩序中不可或缺的一部分。一旦网络和服务发生故障&#xff0c;其带来的后果将波及整个社会、企业和民众的生活质量&#xff0c;造成难以估量的损失。 2020 年 12 月&#xff1a; Ak…...

编程日记 2025/5/9 13:30:22

vue实现虚拟列表滚动

<template> <div class"cont"> //box 视图区域Y轴滚动 滚动的是box盒子 滚动条显示的也是因为box<div class"box">//itemBox。 一个空白的盒子 计算高度为所有数据的高度 固定每一条数据高度为50px<div class"itemBox" :st…...

编程日记 2025/5/14 6:58:31

服务器/电脑与代码仓gitlab/github免密连接

git config --global user.name "xxxx" git config --global user.email "xxxxxx163.com" #使用注册GitHub的邮箱 生成对应邮箱的密码对 ssh-keygen -t rsa -b 4096 -C "xxxxxx163.com" 把公钥id_rsa.pub拷贝到github中 Setting----->…...

编程日记 2025/5/12 12:21:23

用户界面软件03

一种标准的满足不同的非功能性需求的技术是对子系统进行不同的考虑……但是一个用户 界面要求有大量的域层面的信息&#xff0c;以符合比较高的人机工程标准&#xff0c;所以&#xff0c;这些分开的子系统还是 紧密地耦合在一起的。 一个软件架构师的标准反应是将不同的非功能…...

编程日记 2025/5/11 9:10:12

年会抽奖Html

在这里插入图片描述 <!-- <video id"backgroundMusic" src"file:///D:/background.mp3" loop autoplay></video> --> <divstyle"width: 290px; height: 580px; margin-left: 20px; margin-top: 20px; background: url(D:/nianhu…...

编程日记 2025/5/14 5:23:22

（一）Ubuntu20.04版本的ROS环境配置与基本概述

前言 ROS不需要在特定的环境下进行安装&#xff0c;不管你是Ubuntu的什么版本或者还是虚拟机都可以按照教程进行安装。 1.安装ROS 一键安装ros及ros2 wget http://fishros.com/install -O fishros && . fishros 按照指示安装你想要的ros。 ros和ros2是可以兼容的…...

编程日记 2025/5/10 23:23:20

深入分析线程安全问题的本质

深入分析线程安全问题的本质 1. 并发编程背后的性能博弈2. 什么是线程安全问题&#xff1f;3. 源头之一&#xff1a;原子性问题3.1. 原子性问题示例3.2. 原子性问题分析3.3. 如何解决原子性问题&#xff1f; 4. 源头之二&#xff1a;可见性问题4.1. 为什么会有可见性问题&#…...

编程日记 2025/5/8 10:42:37

58. Three.js案例-创建一个带有红蓝配置的半球光源的场景

58. Three.js案例-创建一个带有红蓝配置的半球光源的场景 实现效果 本案例展示了如何使用Three.js创建一个带有红蓝配置的半球光源的场景&#xff0c;并在其中添加一个旋转的球体。通过设置不同的光照参数&#xff0c;可以观察到球体表面材质的变化。 知识点 WebGLRenderer …...

编程日记 2025/5/9 10:07:54

插入实体自增主键太长，mybatis-plaus自增主键

1、问题 spring-boot整合mybtais执行insert语句时&#xff0c;主键id为长文本数据。 2、分析问题 1)数据库主键是否自增 2&#xff09;数据库主键的种子值设置的多少 3、解决问题 1&#xff09;数据库主键设置的时自增 3&#xff09;种子值是1 所以排查是数据库的问题 4、继…...

编程日记 2025/5/8 12:03:52

【利用 Unity + Mirror 网络框架、Node.js 后端和 MySQL 数据库】

要实现一个简单的1v1战斗小游戏&#xff0c;利用 Unity Mirror 网络框架、Node.js 后端和 MySQL 数据库&#xff0c;我们可以将其分为几个主要部分&#xff1a;客户端&#xff08;Unity&#xff09;、服务器&#xff08;Node.js&#xff09;和数据库&#xff08;MySQL&#xf…...

编程日记 2025/5/14 6:34:48

https原理

一、基本概念 1、https概念 https&#xff08;全称&#xff1a; Hypertext Transfer Protocol Secure&#xff0c;超文本传输安全协议&#xff09;&#xff0c;是以安全为目标的http通道&#xff0c;简单讲是http的安全版。 2、为啥说http协议不安全呢&#xff1f; 我们用h…...

编程日记 2025/5/11 21:36:34

如何处理京东商品详情接口返回的JSON数据中的缺失值？

1.在 Python 中处理缺失值 使用if - else语句进行检查和处理 假设通过requests库获取了接口返回的 JSON 数据&#xff0c;并使用json模块进行解析&#xff0c;存储在data变量中。 import json import requestsurl "YOUR_API_URL" response requests.get(url) dat…...

编程日记 2025/5/14 5:37:59

window对象

bom dom部分学完了&#xff0c;来看看bom吧~ bom是整个浏览器&#xff0c;本质上bom与dom是包含的关系&#xff0c;window是里面最大的对象 调用的方法默认对象是window&#xff0c;一般都会省略前面的window 创建的全局变量也是属于window的&#xff0c;当然window也可以省…...

编程日记 2025/5/9 13:10:14

（五）ROS通信编程——参数服务器

前言 参数服务器在ROS中主要用于实现不同节点之间的数据共享&#xff08;P2P&#xff09;。参数服务器相当于是独立于所有节点的一个公共容器&#xff0c;可以将数据存储在该容器中&#xff0c;被不同的节点调用&#xff0c;当然不同的节点也可以往其中存储数据&#xff0c;关…...

编程日记 2025/5/11 6:00:33

MySQL常用命令之汇总（Summary of Commonly Used Commands in MySQL）

MySQL常用命令汇总 简介 ‌MySQL是一个广泛使用的开源关系型数据库管理系统&#xff0c;由瑞典的MySQL AB公司开发&#xff0c;现属于Oracle公司。‌ MySQL支持SQL&#xff08;结构化查询语言&#xff09;&#xff0c;这是数据库操作的标准语言&#xff0c;用户可以使用SQL进…...

编程日记 2025/5/13 15:09:57

更新至2023年，各省数字经济变量/各省数字经济相关指标数据集（20个指标）

更新至2023年&#xff0c;各省数字经济相关指标数据集&#xff08;20个指标&#xff09; 1、时间&#xff1a;更新至2023年&#xff0c;具体时间如下 2、指标&#xff1a;互联网宽带接入端口(万个)&#xff08;2006-2023&#xff09;、互联网宽带接入用户(万户)&#xff08;2…...

编程日记 2025/5/5 22:22:18

聚类系列 (二)——HDBSCAN算法详解

在进行组会汇报的时候&#xff0c;为了引出本研究动机&#xff08;论文尚未发表&#xff0c;暂不介绍&#xff09;&#xff0c;需要对DBSCAN、OPTICS、和HDBSCAN算法等进行详细介绍。在查询相关资料的时候&#xff0c;发现网络上对于DBSCAN算法的介绍非常多与细致&#xff0c;但…...

编程日记 2025/5/8 13:54:41

【JavaEE】—— SpringBoot项目集成百度千帆AI大模型（对话Chat V2）

本篇文章在SpringBoot项目中集成百度千帆提供的大模型接口实现Chat问答效果&#xff1a; 一、百度智能云 百度千帆大模型平台是百度智能云推出的一个企业级一站式大模型与AI原生应用开发及服务平台。 注册地址&#xff1a;https://qianfan.cloud.baidu.com/ 注册成功后&…...

编程日记 2025/5/11 17:54:40

一种更激进的Hook实现方案猜想

XXX原创不原创不清楚&#xff0c;暂定为原创。毕竟windows 大神很多XXX 昨天才发现不是原创&#xff0c;这种方案是VEH HOOK的一种实现方案。VEH HOOK很久很久以前都被广泛使用了。只是自己没听说过。好悲哀呀。。。。 激进的猜想&#xff1a; 如果VEH HOOK在内核态处理异常…...

编程日记 2025/5/7 14:06:14

HTML5实现好看的端午节网页源码

HTML5实现好看的端午节网页源码 前言一、设计来源1.1 网站首页界面1.2 登录注册界面1.3 端午节由来界面1.4 端午节习俗界面1.5 端午节文化界面1.6 端午节美食界面1.7 端午节故事界面1.8 端午节民谣界面1.9 联系我们界面 二、效果和源码2.1 动态效果2.2 源代码 源码下载结束语 H…...

编程日记 2025/5/14 7:07:38

微信小程序获取图片使用session（上篇）

概述&#xff1a; 我们开发微信小程序&#xff0c;从后台获取图片现实的时候&#xff0c;通常采用http get的方式&#xff0c;例如以下代码 <image class"user_logo" src"{{logoUrl}}"></image>变量logoUrl为ur图片l的请求地址 但是对于很多…...

编程日记 2025/5/12 14:38:05

RT-DETR融合YOLOv9的下采样模块ADown

RT-DETR使用教程&#xff1a; RT-DETR使用教程 RT-DETR改进汇总贴&#xff1a;RT-DETR更新汇总贴 《YOLOv9: Learning What You Want to Learn Using Programmable Gradient Information》 一、 模块介绍 论文链接&#xff1a;https://arxiv.org/abs/2402.13616 代码链接&…...

编程日记 2025/5/6 19:56:37

【机器学习案列】学生抑郁可视化及预测分析

&#x1f9d1; 博主简介&#xff1a;曾任某智慧城市类企业算法总监&#xff0c;目前在美国市场的物流公司从事高级算法工程师一职&#xff0c;深耕人工智能领域&#xff0c;精通python数据挖掘、可视化、机器学习等&#xff0c;发表过AI相关的专利并多次在AI类比赛中获奖。CSDN…...

编程日记 2025/5/13 0:27:01

CES 2025｜美格智能高算力AI模组助力“通天晓”人形机器人震撼发布

当地时间1月7日&#xff0c;2025年国际消费电子展&#xff08;CES 2025&#xff09;在美国拉斯维加斯正式开幕。美格智能合作伙伴阿加犀联合高通在展会上面向全球重磅发布人形机器人原型机——通天晓&#xff08;Ultra Magnus&#xff09;。该人形机器人内置美格智能基于高通QC…...

编程日记 2025/5/9 18:14:48

Linux第一个系统程序---进度条

进度条---命令行版本 回车换行 其实本质上回车和换行是不同概念&#xff0c;我们用一张图来简单的理解一下&#xff1a; 在计算机语言当中&#xff1a; 换行符&#xff1a;\n 回车符&#xff1a;\r \r\n&#xff1a;回车换行 这时候有人可能会有疑问&#xff1a;我在学习C…...

编程日记 2025/5/7 23:48:20

黑马跟学.苍穹外卖.Day04

黑马跟学.苍穹外卖.Day04 苍穹外卖-day04课程内容1. Redis入门1.1 Redis简介1.2 Redis下载与安装1.2.1 Redis下载1.2.2 Redis安装 1.3 Redis服务启动与停止1.3.1 服务启动命令1.3.2 客户端连接命令1.3.3 修改Redis配置文件1.3.4 Redis客户端图形工具 2. Redis数据类型2.1 五种常…...

编程日记 2025/5/8 1:53:06

人生第一次面试之依托答辩

今天收到人生的第一场面试&#xff0c;是东华软件集团。答的那是依托答辩&#xff0c;就面了20分钟&#xff0c;还没考算法。其实依托答辩的效果是意料之中的&#xff0c;这次面试也只是想练练手。 目录 静态变量什么时候加载的&#xff1f; 重写和重载有什么区别&#xff1…...

编程日记 2025/5/9 12:49:39

STM32 : PWM 基本结构

这张图展示了PWM&#xff08;脉冲宽度调制&#xff09;的基本结构和工作流程。PWM是一种用于控制功率转换器输出电压的技术&#xff0c;通过调整信号的占空比来实现对负载的精确控制。以下是详细讲解&#xff1a; PWM 基本结构 1. 时基单元 ARR (Auto-reload register): 自动…...

编程日记 2025/5/9 18:15:02

【大模型（LLM）面试全解】深度解析 Layer Normalization 的原理、变体及实际应用

系列文章目录 大模型&#xff08;LLMs&#xff09;基础面 01-大模型&#xff08;LLM&#xff09;面试全解&#xff1a;主流架构、训练目标、涌现能力全面解析 02-【大模型&#xff08;LLM&#xff09;面试全解】深度解析 Layer Normalization 的原理、变体及实际应用 大模型&…...

编程日记 2025/5/10 4:35:40

《浮岛风云》V1.0中文学习版

《浮岛风云》中文版https://pan.xunlei.com/s/VODadt0vSGdbrVOBEsW9Xx8iA1?pwdy7c3# 一款有着类似暗黑破坏神的战斗系统、类似最终幻想的奇幻世界和100%可破坏体素环境的动作冒险RPG。...

编程日记 2025/5/3 17:41:19

学习threejs，导入babylon格式的模型

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.BabylonLoader babyl…...

编程日记 2025/5/14 5:23:22

Django 社团管理系统的设计与实现

标题:Django 社团管理系统的设计与实现 内容:1.摘要 本文介绍了 Django 社团管理系统的设计与实现。通过分析社团管理的需求&#xff0c;设计了系统的架构和功能模块&#xff0c;并使用 Django 框架进行了实现。系统包括社团信息管理、成员管理、活动管理、财务管理等功能&…...

编程日记 2025/5/8 0:09:53

2025 GitCode 开发者冬日嘉年华：AI 与开源的深度交融之旅

在科技的浪潮中&#xff0c;AI 技术与开源探索的火花不断碰撞&#xff0c;催生出无限可能。2025 年 1 月 4 日&#xff0c;由 GitCode 联合 CSDN COC 城市开发者社区精心打造的开年首场开发者活动&#xff1a;冬日嘉年华在北京中关村 • 鼎好 DH3-A 座 22 层盛大举行&#xff0…...

编程日记 2025/5/9 8:35:28

嵌入式系统 tensorflow

&#x1f3ac; 秋野酱&#xff1a;《个人主页》 &#x1f525; 个人专栏:《Java专栏》《Python专栏》 ⛺️心若有所向往,何惧道阻且长 文章目录 探索嵌入式系统中的 TensorFlow&#xff1a;机遇与挑战一、TensorFlow 适配嵌入式的优势二、面临的硬件瓶颈三、软件优化策略四、实…...

编程日记 2025/5/4 12:32:20

Web无障碍

文章目录 &#x1f7e2;Web Accessibility-Web无障碍&#x1f7e2;一、Web Accessibility-Web1. web无障碍设计2. demo3.使用相关相关开源无障碍工具条(调用可能会根据网络有点慢) 如有其他更好方案&#xff0c;可以私信我哦✒️总结 &#x1f7e2;Web Accessibility-Web无障碍…...

编程日记 2025/5/12 12:59:18

Qt使用MySQL数据库(Win)----2.配置MySQL驱动

使用Everything软件&#xff0c;找到mysql.pro文件。并使用qt creator打开mysql.pro。 导入外部库 选择外部库 点击下一步&#xff0c;勾选。 为debug版本添加‘d’作为后缀取消勾选&#xff0c;然后点击下一步 添加后的Pro文件。 这样文件应该是改好了&#xff0c;选择releas…...

编程日记 2025/5/14 14:38:06