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图像增强一：传统图像去噪方法整理
一、简介： 在数字图像处理领域，噪声一直是影响图像质量的重要因素。无论是拍摄过程中的环境干扰，还是传输过程中的信号失真，噪声都可能导致图像模糊、细节丢失，甚至影响后续的图像分析和应用。为了提高图像的视觉效果…...
浏览器访问 AWS ECS 上部署的 Docker 容器（监听 80 端口）
✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义（Task Definition&…...
深度学习在微纳光子学中的应用
深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向： 逆向设计 通过神经网络快速预测微纳结构的光学响应，替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...
让AI看见世界：MCP协议与服务器的工作原理
让AI看见世界：MCP协议与服务器的工作原理 MCP（Model Context Protocol）是一种创新的通信协议，旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天，MCP正成为连接AI与现实世界的重要桥梁。…...
聊一聊接口测试的意义有哪些？
目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开，首…...
并发编程 - go版
1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程，系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...
如何应对敏捷转型中的团队阻力
应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中，明确沟通敏捷转型目的尤为关键，团队成员只有清晰理解转型背后的原因和利益，才能降低对变化的…...
【SpringBoot自动化部署】
SpringBoot自动化部署方法 使用Jenkins进行持续集成与部署 Jenkins是最常用的自动化部署工具之一，能够实现代码拉取、构建、测试和部署的全流程自动化。 配置Jenkins任务时，需要添加Git仓库地址和凭证，设置构建触发器（如GitHub…...
nnUNet V2修改网络——暴力替换网络为UNet++
更换前，要用nnUNet V2跑通所用数据集，证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构，初步了解要修改的网络，知己知彼，修改起来才能游刃有余。 U-Net存在两个局限，一是网络的最佳深度因应用场景而异，这取决于任务的难度和可用于训练的标注数…...
Modbus RTU与Modbus TCP详解指南
目录 1. Modbus协议基础 1.1 什么是Modbus？ 1.2 Modbus协议历史 1.3 Modbus协议族 1.4 Modbus通信模型 🎭 主从架构 🔄 请求响应模式 2. Modbus RTU详解 2.1 RTU是什么？ 2.2 RTU物理层 🔌 连接方式 ⚡ 通信参数 2.3 RTU数据帧格式 📦 帧结构详解 🔍…...
在 Visual Studio Code 中使用驭码 CodeRider 提升开发效率：以冒泡排序为例
目录 前言1 插件安装与配置1.1 安装驭码 CodeRider1.2 初始配置建议 2 示例代码：冒泡排序3 驭码 CodeRider 功能详解3.1 功能概览3.2 代码解释功能3.3 自动注释生成3.4 逻辑修改功能3.5 单元测试自动生成3.6 代码优化建议 4 驭码的实际应用建议5 常见问题与解决建议…...