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

jQuery实现图片轮播效果

news 2026/2/9 17:06:00

实现图片轮播效果，打开页面，每隔3秒切换至下一张图片；光标移入数字时，播放相应图片。

思路：

（1）获取需要轮播的图片和展示的div。

（2）使用animate设置left值，每次移动宽度为展示div的宽度。

（3）播放图片时，对应数字应用红色背景样式，其他数字移除该样式。

效果：

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>* {margin: 0;padding: 0;}img {width: 800px;height: 400px;}.banner {width: 800px;height: 400px;border: 1px solid black;margin: 50px auto;overflow: hidden;cursor: pointer;position: relative;}.banner .slide {width: 4800px;height: 400px;position: absolute;left: -600px;}.banner .slide .pic {width: 800px;height: 400px;line-height: 400px;text-align: center;float: left;font-size: 72px;color: white;}.banner .numbers {width: 150px;height: 30px;position: absolute;bottom: 1%;left: 85%;margin-left: -50px;z-index: 2;}.banner .numbers .number {width: 20px;height: 20px;float: left;margin: 5px 6px;cursor: pointer;background-color: white;color: black;text-align: center;border: 1px solid red;}.banner .numbers .on {background-color: red;color: #fff;font-weight: bolder;}</style></head><body><div class="banner"><div class="slide"><div class="pic"><img src="./4.png"></div><div class="pic"><img src="./1.png"></div><div class="pic"><img src="./2.png"></div><div class="pic"><img src="./3.png"></div><div class="pic"><img src="./4.png"></div><div class="pic"><img src="./1.png"></div></div><div class="numbers"><span class="number on">1</span><span class="number">2</span><span class="number">3</span><span class="number">4</span></div></div><script src="jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">var index = 1; var timer = null;var size = $('.slide').children().size();var picWidth = $('.pic').width();$('.banner').mouseover(function() {clearInterval(timer);});$('.banner').mouseleave(function() {autoSlide();});$('.slide').mouseleave();function autoSlide() {timer = setInterval(function() {index++; changeImg();changeNums();}, 3000); };function changeImg() {var slideWidth = -1 * picWidth * index; $('.slide').animate({'left': slideWidth + 'px'}, 500);if (index >= size - 1) {$('.slide').animate({'left': -picWidth + 'px'}, 0);index = 1;}if (index < 1) {$('.slide').animate({'left': -(size - 2) * picWidth + 'px'}, 0);index = size - 2;}}function changeNums() {$('.number').eq(index - 1).addClass('on').siblings().removeClass('on');}$('.number').mouseover(function(event) {var target = event.target;index = $(target).index() + 1;changeImg();changeNums();});</script></body>
</html>

相关文章：

jQuery实现图片轮播效果

实现图片轮播效果&#xff0c;打开页面&#xff0c;每隔3秒切换至下一张图片&#xff1b;光标移入数字时&#xff0c;播放相应图片。 思路&#xff1a; &#xff08;1&#xff09;获取需要轮播的图片和展示的div。 &#xff08;2&#xff09;使用animate设置left值&#xff…...

编程日记 2024/8/13 19:42:29

关于天地图新手使用

1分钟带你了解学习天地图 适用新手 天地图API (tianditu.gov.cn) 文档api 先去注册key 把脚本放到index.html文件里面 <!-- 天地图的官网申请的tk --> <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=申请的key" type="text/javascr…...

编程日记 2024/8/13 19:41:28

STM32与Arduino和ESP32对比分析

在嵌入式系统领域&#xff0c;STM32、Arduino 和 ESP32 是三种广泛使用的微控制器平台。它们各自具有独特的优势&#xff0c;适用于不同类型的项目。本文将详细比较这些平台&#xff0c;帮助您了解它们之间的差异、优势以及可能的应用场景。 一、架构与处理能力 STM32&#xf…...

编程日记 2024/8/13 19:40:27

125. 验证回文串【 力扣(LeetCode) 】

一、题目描述 如果在将所有大写字符转换为小写字符、并移除所有非字母数字字符之后&#xff0c;短语正着读和反着读都一样。则可以认为该短语是一个 回文串 。 字母和数字都属于字母数字字符。 给你一个字符串 s&#xff0c;如果它是 回文串 &#xff0c;返回 true &#xff1b…...

编程日记 2024/8/13 19:39:26

3年经验，面试测试岗20k都拿不到了吗？

我的情况 大概介绍一下个人情况&#xff0c;女&#xff0c;本科&#xff0c;三年多测试工作经验&#xff0c;懂python&#xff0c;会写脚本&#xff0c;会selenium&#xff0c;会性能&#xff0c;然而到今天都没有收到一份offer&#xff01;从年后就开始准备简历&#xff0c;年…...

编程日记 2024/8/13 19:38:25

【ML】强化学习（Reinforcement Learning）及其拆解

【ML】强化学习&#xff08;Reinforcement Learning&#xff09; 1. RL Outline 强化学习&#xff08;Reinforcement Learning&#xff09;概述1.1 RL的基本框架 2. RL 引入&#xff1a;从这个小游戏开始3. Policy Gradient 方法4. Actor-Critic 方法5. [奖励塑形&#xff08;R…...

编程日记 2024/8/13 19:36:23

在宝塔面板下安装WordPress

宝塔面板是服务器管理好助手&#xff0c;尤其在Linux系统下&#xff0c;提高了管理的可视化&#xff0c;降低了Linux服务器的使用门槛。 WordPress是个非常好的博客系统&#xff0c;由于支持海量主题模板、各种类型的插件&#xff0c;因此已经成为建设各类网站的首选框架。 今…...

编程日记 2024/8/13 19:32:17

纷享销客CRM AI产品架构概览、产品特色

一、纷享销客CRM AI产品架构概览 纷享AI平台架构分为三个主要层次&#xff1a;AI基础设施层、AI平台层和AI应用层。每个层次都由一系列功能模块组成&#xff0c;旨在为客户提供强大的技术支持和灵活的解决方案。 1.Al基础设施层 AI基础设施层是整个AI平台的底层支撑&#xff…...

编程日记 2024/8/13 19:31:16

【文件IO】文件系统操作

文章目录 基本操作概述1. 文件属性2. 文件构造方法3. 文件方法1. 文件创建2. 文件删除3. 查看目录下所有的文件名4. 遍历目录5. 创建目录5. 目录重命名 基本操作概述 创建文件删除文件创建目录重命名文件判定文件存在… Java 中&#xff0c;提供了一个 File 类&#xff0c;进…...

编程日记 2024/8/13 19:30:15

Spring Cloud Alibaba 集成分布式定时任务调度功能

作者&#xff1a;千习 背景简介 定时任务是指在约定的时间&#xff0c;或者按照固定频率周期性执行的任务。在企业应用中&#xff0c;非用户行为发起的后台业务&#xff0c;一般都是通过定时任务来实现&#xff0c;常见场景如下&#xff1a; 异步数据处理&#xff1a;比如先…...

编程日记 2024/8/13 19:27:13

中职云计算实训室

一、实训室建设背景 随着信息技术的飞速发展&#xff0c;云计算已成为推动数字化转型、促进经济社会发展的重要力量。《中华人民共和国国民经济和社会发展第十四个五年规划和2035年远景目标纲要》明确提出&#xff0c;要加快数字化发展&#xff0c;建设数字中国。云计算作为数…...

编程日记 2024/8/13 19:26:11

【python制作一个小程序作为七夕礼物】

制作一个七夕节礼物的小程序&#xff0c;我们可以考虑一个简单的互动程序&#xff0c;比如一个“七夕情侣姓名配对指数计算器”。这个程序将接收两个名字作为输入&#xff0c;然后输出一个随机的“配对指数”和一些浪漫的话语。以下是一个使用Python实现的简单示例&#xff1a;…...

编程日记 2024/8/13 19:24:09

一篇文章教会你如何使用Haproxy，内含大量实战案例

1. Haproxy 介绍 HAProxy是法国开发者 威利塔罗&#xff08;Willy Tarreau&#xff09; 使用C语言编写的自由及开放源代码软件&#xff0c;是一款具备高并发&#xff08;万级以上&#xff09;、高性能的TCP和HTTP应用程序代理. HAProxy运行在当前的硬件上&#xff0c;可以支持…...

编程日记 2024/8/13 19:22:07

PythonStudio 控件使用常用方式（二十二）TFlowPanel

PythonStudio是一个极强的开发Python的IDE工具&#xff0c;官网地址是&#xff1a;https://glsite.com/ &#xff0c;在官网可以下载最新版的PythonStudio&#xff0c;同时&#xff0c;在使用PythonStudio时&#xff0c;它也能及时为用户升到最新版本。它使用的是Delphi的控件&…...

编程日记 2024/8/13 19:20:04

培训第二十七天（lvs_nat模式与lvs_dr模式配置）

上午 核心&#xff1a;内核中的ipvs&#xff0c;ipvsadm1、安装ipvsadm[rootnat ~]# yum -y install ipvsadm2、配置规则查看所有的规则&#xff0c;如果已经配置好规则&#xff0c;重启之后也就没有了[rootnat ~]# ipvsadm -L -n 1、配置vip网卡 &#xff08;1&#xff09;在…...

编程日记 2024/8/13 19:18:01

JAVA中DateFormat详解

在Java中&#xff0c;DateFormat 是一个抽象类&#xff0c;它用于格式化和解析日期。DateFormat 允许进行日期-文本之间的转换&#xff0c;以及日期-时间之间的解析和格式化。Java 提供了多个 DateFormat 的具体子类&#xff0c;其中最常用的是 SimpleDateFormat&#xff0c;它…...

编程日记 2024/8/13 19:13:56

uniapp——列表选择样式

案例 代码 <view class"list"><block v-for"(item,index) in 8" :key"index"><view class"item" click"choosePackage(item)" :class"{active:item current}"><view class"i_money&q…...

编程日记 2024/8/13 19:12:55

解决客户访问超时1s问题

访问公网地址返回状态码499-CSDN博客 需求描述 客户访问公司公网服务，期望在1s内完成。他们在客户端设置了超时1s的配置，如果超过1s公司服务就会报错499，这是正常的请求返回。 这里是业务简易的连路图： 分析问题 目前这个服务通过公网的alb负载均衡到ecs，通过ecs再转发…...

编程日记 2024/8/13 19:11:53

Linux命令(基础面试可用，都是自己觉得平时使用多的)

1.cat 参数&#xff1a;-n&#xff1a;显示行号-s&#xff1a;压缩连续的空行&#xff0c;只显示一个空行2.chattr 改变文件属性 语法&#xff1a;chattr [-RV] [/-/<属性>][文件或目录] 属性&#xff1a;a&#xff1a;让文件或目录仅供附加用途i&#xff1a;不得任意更…...

编程日记 2024/8/13 19:09:51

opencv-python图像增强一：传统图像去噪方法整理

一、简介&#xff1a; 在数字图像处理领域&#xff0c;噪声一直是影响图像质量的重要因素。无论是拍摄过程中的环境干扰&#xff0c;还是传输过程中的信号失真&#xff0c;噪声都可能导致图像模糊、细节丢失&#xff0c;甚至影响后续的图像分析和应用。为了提高图像的视觉效果…...

编程日记 2024/8/13 19:07:46

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

编程新知 2026/2/8 4:32:38

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

编程新知 2026/2/8 20:42:43

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

编程新知 2026/1/21 14:29:57

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

编程新知 2025/10/7 4:57:55

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

编程新知 2025/10/19 5:48:51

[10-3]软件I2C读写MPU6050 江协科技学习笔记（16个知识点）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

编程新知 2026/1/28 8:34:48

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

编程新知 2025/11/22 12:02:51

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

编程新知 2026/1/1 14:01:45

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

编程新知 2026/1/19 2:13:24

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

编程新知 2026/2/9 2:43:24