jQuery实现图片轮播效果
实现图片轮播效果，打开页面，每隔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实现图片轮播效果
实现图片轮播效果，打开页面，每隔3秒切换至下一张图片；光标移入数字时，播放相应图片。 思路： （1）获取需要轮播的图片和展示的div。 （2）使用animate设置left值ÿ…...
关于天地图新手使用
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…...
STM32与Arduino和ESP32对比分析
在嵌入式系统领域，STM32、Arduino 和 ESP32 是三种广泛使用的微控制器平台。它们各自具有独特的优势，适用于不同类型的项目。本文将详细比较这些平台，帮助您了解它们之间的差异、优势以及可能的应用场景。 一、架构与处理能力 STM32…...
 】)
125. 验证回文串【 力扣(LeetCode) 】
一、题目描述 如果在将所有大写字符转换为小写字符、并移除所有非字母数字字符之后，短语正着读和反着读都一样。则可以认为该短语是一个 回文串 。 字母和数字都属于字母数字字符。 给你一个字符串 s，如果它是 回文串 ，返回 true ；…...
3年经验，面试测试岗20k都拿不到了吗？
我的情况 大概介绍一下个人情况，女，本科，三年多测试工作经验，懂python，会写脚本，会selenium，会性能，然而到今天都没有收到一份offer！从年后就开始准备简历，年…...
【ML】强化学习（Reinforcement Learning）及其拆解
【ML】强化学习（Reinforcement Learning） 1. RL Outline 强化学习（Reinforcement Learning）概述1.1 RL的基本框架 2. RL 引入：从这个小游戏开始3. Policy Gradient 方法4. Actor-Critic 方法5. [奖励塑形（R…...
在宝塔面板下安装WordPress
宝塔面板是服务器管理好助手，尤其在Linux系统下，提高了管理的可视化，降低了Linux服务器的使用门槛。 WordPress是个非常好的博客系统，由于支持海量主题模板、各种类型的插件，因此已经成为建设各类网站的首选框架。 今…...
纷享销客CRM AI产品架构概览、产品特色
一、纷享销客CRM AI产品架构概览 纷享AI平台架构分为三个主要层次：AI基础设施层、AI平台层和AI应用层。每个层次都由一系列功能模块组成，旨在为客户提供强大的技术支持和灵活的解决方案。 1.Al基础设施层 AI基础设施层是整个AI平台的底层支撑ÿ…...
【文件IO】文件系统操作
文章目录 基本操作概述1. 文件属性2. 文件构造方法3. 文件方法1. 文件创建2. 文件删除3. 查看目录下所有的文件名4. 遍历目录5. 创建目录5. 目录重命名 基本操作概述 创建文件删除文件创建目录重命名文件判定文件存在… Java 中，提供了一个 File 类，进…...
Spring Cloud Alibaba 集成分布式定时任务调度功能
作者：千习 背景简介 定时任务是指在约定的时间，或者按照固定频率周期性执行的任务。在企业应用中，非用户行为发起的后台业务，一般都是通过定时任务来实现，常见场景如下： 异步数据处理：比如先…...
中职云计算实训室
一、实训室建设背景 随着信息技术的飞速发展，云计算已成为推动数字化转型、促进经济社会发展的重要力量。《中华人民共和国国民经济和社会发展第十四个五年规划和2035年远景目标纲要》明确提出，要加快数字化发展，建设数字中国。云计算作为数…...
【python制作一个小程序作为七夕礼物】
制作一个七夕节礼物的小程序，我们可以考虑一个简单的互动程序，比如一个“七夕情侣姓名配对指数计算器”。这个程序将接收两个名字作为输入，然后输出一个随机的“配对指数”和一些浪漫的话语。以下是一个使用Python实现的简单示例：…...
一篇文章教会你如何使用Haproxy，内含大量实战案例
1. Haproxy 介绍 HAProxy是法国开发者 威利塔罗（Willy Tarreau） 使用C语言编写的自由及开放源代码软件，是一款具备高并发（万级以上）、高性能的TCP和HTTP应用程序代理. HAProxy运行在当前的硬件上，可以支持…...
PythonStudio 控件使用常用方式（二十二）TFlowPanel
PythonStudio是一个极强的开发Python的IDE工具，官网地址是：https://glsite.com/ ，在官网可以下载最新版的PythonStudio，同时，在使用PythonStudio时，它也能及时为用户升到最新版本。它使用的是Delphi的控件&…...
培训第二十七天（lvs_nat模式与lvs_dr模式配置）
上午 核心：内核中的ipvs，ipvsadm1、安装ipvsadm[rootnat ~]# yum -y install ipvsadm2、配置规则查看所有的规则，如果已经配置好规则，重启之后也就没有了[rootnat ~]# ipvsadm -L -n 1、配置vip网卡 （1）在…...
JAVA中DateFormat详解
在Java中，DateFormat 是一个抽象类，它用于格式化和解析日期。DateFormat 允许进行日期-文本之间的转换，以及日期-时间之间的解析和格式化。Java 提供了多个 DateFormat 的具体子类，其中最常用的是 SimpleDateFormat，它…...
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…...
解决客户访问超时1s问题
访问公网地址返回状态码499-CSDN博客 需求描述 客户访问公司公网服务，期望在1s内完成。他们在客户端设置了超时1s的配置，如果超过1s公司服务就会报错499，这是正常的请求返回。 这里是业务简易的连路图： 分析问题 目前这个服务通过公网的alb负载均衡到ecs，通过ecs再转发…...
Linux命令(基础面试可用，都是自己觉得平时使用多的)
1.cat 参数：-n：显示行号-s：压缩连续的空行，只显示一个空行2.chattr 改变文件属性 语法：chattr [-RV] [/-/<属性>][文件或目录] 属性：a：让文件或目录仅供附加用途i：不得任意更…...
opencv-python图像增强一：传统图像去噪方法整理
一、简介： 在数字图像处理领域，噪声一直是影响图像质量的重要因素。无论是拍摄过程中的环境干扰，还是传输过程中的信号失真，噪声都可能导致图像模糊、细节丢失，甚至影响后续的图像分析和应用。为了提高图像的视觉效果…...
。】2022-5-15)
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下： struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...
微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来，Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址：pdf 英文是纯手打的！论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误，若有发现欢迎评论指正！文章偏向于笔记，谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表
1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...
Matlab | matlab常用命令总结
常用命令 一、 基础操作与环境二、 矩阵与数组操作（核心）三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结，涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...
GC1808高性能24位立体声音频ADC芯片解析
1. 芯片概述 GC1808是一款24位立体声音频模数转换器（ADC），支持8kHz~96kHz采样率，集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器，适用于高保真音频采集场景。 2. 核心特性 高精度：24位分辨率，…...
C++课设：简易日历程序（支持传统节假日 + 二十四节气 + 个人纪念日管理）
名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》 创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 专栏介绍：《编程项目实战》 目录 一、为什么要开发一个日历程序？1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...
为什么要创建 Vue 实例
核心原因：Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为，将它们变成一个活的、可交互的应用**。没有这个实例，你的代码只是一堆静态的 HTML、JavaScript 变量和函数，无法「活」起来。 …...
ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]
报错信息：libc.so.6: cannot open shared object file: No such file or directory： #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...
深入解析光敏传感技术：嵌入式仿真平台如何重塑电子工程教学
一、光敏传感技术的物理本质与系统级实现挑战 光敏电阻作为经典的光电传感器件，其工作原理根植于半导体材料的光电导效应。当入射光子能量超过材料带隙宽度时，价带电子受激发跃迁至导带，形成电子-空穴对，导致材料电导率显著提升。…...