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

jQuery实现图片轮播效果

news 2026/2/7 11:56:18

实现图片轮播效果，打开页面，每隔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

uniapp 对接腾讯云IM群组成员管理（增删改查）

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

编程新知 2026/1/13 9:59:27

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/9/20 5:20:12

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

编程新知 2025/12/20 12:32:08

PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

编程新知 2026/1/30 22:07:56

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

编程新知 2026/1/25 11:13:37

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

编程新知 2026/1/26 21:56:38

服务器硬防的应用场景都有哪些？

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

编程新知 2025/11/9 19:17:07

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

编程新知 2025/12/12 0:56:22

成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

编程新知 2026/2/1 7:18:47

短视频矩阵系统文案创作功能开发实践，定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

编程新知 2026/2/1 8:24:29