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

jQuery实现图片轮播效果

news 文章来源：https://blog.csdn.net/m0_53676388/article/details/141058278 2025/5/1 20:48:40

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

Canal单机部署

目录 一、前期准备 1、配置binlog日志 2、配置MQ服务 二、搭建canal 1、下载安装包 2、部署canal-admin的UI管理界面 2-1、创建&解压admin 2-2、配置UI管理界面 2-3、初始化元数据库 2-4、启动Canal Admin 3、部署canal-server服务 3-1、创建&解压deployer…...

编程日记 2024/8/13 19:06:45

java,每日练习02

题目 选自牛客网 1.下列关于Java中类的构造方法的描述&#xff0c;正确的是&#xff08;&#xff09; A.构造方法的返回类型为void B.可以定义一个类而在代码中不写构造方法。 C.在同一个类中定义的重载构造方法不可以相互调用。 D.子类不允许调用父类的构造方法。 正确答案…...

编程日记 2024/8/13 19:05:44

C# TreeView

添加 TreeView 控件&#xff1a;定义节点&#xff1a;添加节点&#xff1a;设置节点属性&#xff1a;处理节点事件&#xff1a;自定义节点绘制&#xff1a;数据绑定&#xff1a;节点选择&#xff1a;节点展开和折叠&#xff1a;搜索和过滤&#xff1a;示例代码总结 C# 中的 Tre…...

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

通过xshell使用密钥连接阿里云服务器

目录 步骤1&#xff1a;创建密钥对 步骤2&#xff1a;连接服务器 步骤3&#xff1a;连接服务器 连接阿里云服务器有几种方式&#xff0c;例如有密码进行连接&#xff0c;但是密码连接安全风险较大&#xff0c;所以我们选择密钥方式进行连接。操作简单且安全性高 步骤1&…...

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

＜数据集＞路面坑洼识别数据集＜目标检测＞

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;681张 标注数量(xml文件个数)&#xff1a;681 标注数量(txt文件个数)&#xff1a;681 标注类别数&#xff1a;1 标注类别名称&#xff1a;[pothole] 使用标注工具&#xff1a;labelImg 标注规则&#xff1a;对类…...

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

几个常用脚本

系统初始化 #!/bin/bash # 定义颜色常量 RED\033[0;31m GREEN\033[0;32m NC\033[0m # No Color #功能菜单 menu() {clearecho "请选择要执行的操作:"echo "1. 检查网络"echo "2. 关闭防火墙和SELinux"echo "3. 替换YUM源"echo "…...

编程日记 2024/8/13 18:59:36

gtest中TEST和TEST_F和TEST_P的区别是什么

gtest&#xff08;Google Test&#xff09;是Google开发的一个开源的C测试框架&#xff0c;它提供了多种宏来支持不同类型的测试。其中&#xff0c;TEST、TEST_F和TEST_P是三个常用的宏&#xff0c;它们各自有不同的用途和特性。以下是它们之间的主要区别&#xff1a; TEST 用…...

编程日记 2024/8/13 18:58:35

VS2022如何调出输出窗口，并在输出窗口打印日志

在输出窗口打印 System.Diagnostics.Debug.WriteLine("这是一行自定义的输出。Debug.WriteLine");System.Diagnostics.Debug.Write("这是第二行自定义的输出&#xff0c;Debug.Write");System.Diagnostics.Debug.WriteLine("换行");System.Diagn…...

编程日记 2024/8/13 18:57:34

【全国大学生电子设计竞赛】2021年I题

&#x1f970;&#x1f970;全国大学生电子设计大赛学习资料专栏已开启&#xff0c;限时免费&#xff0c;速速收藏~...

编程日记 2024/8/13 18:56:33

【项目】基于Vue2+Router+Vant 前端面经项目

环境配置 Vue脚手架的创建 在终端中打开输入 vue create 项目包名 -m npm注意⚠️&#xff1a;项目名称不再允许包含大写字母。 选择第三项 3.选择要安装的模块 从上到下的功能模块&#xff1a; Babel - ES&#xff1a;降级处理Router-Vue&#xff1a;路由插件CSS预处理器E…...

编程日记 2024/8/13 18:55:32