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

轮播图html

article 2026/4/18 12:27:48

题十二：轮播图

要求：
1.鼠标不在图片上方时，进行自动轮播，并且左右箭头不会显示；当鼠标放在图片上方时，停止轮播，并且左右箭头会显示；
2.图片切换之后，图片中下方的小圆点会同时进行切换，并且点击相应的小圆点可以切换到相应的图片上；
3.点击左右箭头可以进行左右图片的切换；
4.图片上需有介绍的文字，会随图片切换一起进行切换。

原理：

  1. 当鼠标进入时，左走箭头出现，定时器关闭，离开时，箭头消失，定时器开启。
  2. 写DOM对应的小圆点，找让图片文字小圆点的高亮移除，再当索引值到了之后，添加高亮事件.
  3. 当点击左图右图是分别修改其对应的索引号.
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF - 8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自定义轮播图</title><style>#container {margin: 0 auto;position: relative;width: 600px;height: 600px;overflow: hidden;}#container img {width: 100%;height: 100%;background-size: cover;display: none;}#container img.active {display: block;}.arrow {position: absolute;top: 50%;transform: translateY(-50%);font-size: 30px;color: white;background: rgba(0, 0, 0, 0.3);padding: 10px 15px;cursor: pointer;display: none;}#left {left: 10px;}#right {right: 10px;}#dots {position: absolute;bottom: 10px;left: 50%;transform: translateX(-50%);display: flex;}#dots span {width: 10px;height: 10px;border-radius: 50%;background: gray;margin: 0 5px;cursor: pointer;}#dots span.active {background: white;}.name {position: absolute;bottom: 0;width: 100%;background: rgba(0, 0, 0, 0.5);color: white;padding: 10px;text-align: center;font-size: 30px;}</style>
</head><body><div id="container"><img src="./任务/交互图片/1.jpg" alt="图片1" class="active"><div class="name">fall'in out</div><img src="./任务/交互图片/2.jpg" alt="图片2"><div class="name">找自己</div><img src="./任务/交互图片/3.jpg" alt="图片3"><div class="name">单车恋人</div><span id="left" class="arrow">&lt;</span><span id="right" class="arrow">&gt;</span><div id="dots"></div></div><script>const Container = document.querySelector('#container')const images = document.querySelectorAll('#container img')const names = document.querySelectorAll('.name')const dotsContainer = document.getElementById('dots')const Left = document.querySelector('#left')const Right = document.querySelector('#right')//当前显示图片的索引let currentIndex = 0//命名自动播放定时器let autoplayIntervalfunction onMouseEnter() {//鼠标一进入就关闭定时器clearInterval(autoplayInterval)Left.style.display = 'block'Right.style.display = 'block'}function onMouseLeave() {//开启startAutoplay()Left.style.display = 'none'Right.style.display = 'none'}Left.addEventListener('click', () => {clearInterval(autoplayInterval)//一定要调用leftImage()});Right.addEventListener('click', () => {clearInterval(autoplayInterval)rightImage()})Container.addEventListener('mouseenter', function() {onMouseEnter()})Container.addEventListener('mouseleave', function() {onMouseLeave()})// 显示指定索引的图片function showImage(index) {images.forEach((img, i) => {//先全部移除高亮img.classList.remove('active')//文字也先不显示names[i].style.display = 'none'})dotsContainer.querySelectorAll('span').forEach((dot, i) => {//小圆点高亮移除dot.classList.remove('active')})//到相应的索引号，高亮和文字显示images[index].classList.add('active')names[index].style.display = 'block'//小圆点高亮添加dotsContainer.querySelectorAll('span')[index].classList.add('active')//修改索引号currentIndex = index}function createDots() {//回调函数，函数对应的DOM元素及索引号images.forEach((_, index) => {//新建小圆点，有几个DOM建几个const dot = document.createElement('span')if (index === 0) {//默认高亮类名dot.classList.add('active')}dot.addEventListener('click', function() {//一旦点击，关闭定时器clearInterval(autoplayInterval)showImage(index)})//根据DOM数量，添加小圆点dotsContainer.appendChild(dot)});}// 右图function rightImage() {//index+1currentIndex = (currentIndex + 1) % images.lengthshowImage(currentIndex)}// 左图function leftImage() {//同理currentIndex = (currentIndex - 1 + images.length) % images.lengthshowImage(currentIndex);}function startAutoplay() {autoplayInterval = setInterval(rightImage, 1500)}// 调用小圆点和自动播放，使页面一开始就有效果createDots()startAutoplay()</script>
</body></html>

轮播图

相关文章：

轮播图html

题十二&#xff1a;轮播图 要求&#xff1a; 1.鼠标不在图片上方时&#xff0c;进行自动轮播&#xff0c;并且左右箭头不会显示&#xff1b;当鼠标放在图片上方时&#xff0c;停止轮播&#xff0c;并且左右箭头会显示&#xff1b; 2.图片切换之后&#xff0c;图片中下方的小圆…...

编程日记 2026/4/4 5:46:10

Nginx内存池源代码剖析----ngx_create_pool函数

ngx_create_pool 是 Nginx 内存池 的初始化函数&#xff0c;负责创建并初始化一个内存池对象。它的作用是 为后续的内存分配操作提供统一的管理入口&#xff0c;通过预分配一块较大的内存区域&#xff0c;并基于此区域实现高效的内存分配、对齐管理和资源回收。 源代码定义&…...

编程日记 2026/4/3 18:47:37

DeepSeek 开放平台无法充值 改用其他平台API调用DeepSeek-chat模型方法

近几天DeepSeek开放平台无法充值目前已经关闭状态&#xff0c;大家都是忙着接入DeepSeek模型 &#xff0c;很多人想使用DeepSeek怎么办&#xff1f; 当然还有改用其他平台API调用方法&#xff0c;本文以本站的提供chatgpt系统为例&#xff0c;如何修改DeepSeek-chat模型API接口…...

编程日记 2026/4/10 7:14:31

QT基础一、学会建一个项目

注&#xff1a;因为CSDN有很多付费才能吃到的史&#xff0c;本人对此深恶痛绝&#xff0c;所以我打算出一期免费的QT基础入门专栏&#xff0c;这是QT基础知识的第一期&#xff0c;学会建一个项目&#xff0c;本专栏是适用于c / c基础不错的朋友的一个免费专栏&#xff0c;接下来…...

编程日记 2026/4/13 3:50:11

科技引领未来，中建海龙C-MiC 2.0技术树立模块化建筑新标杆

在建筑行业追求高效与品质的征程中&#xff0c;中建海龙科技有限公司&#xff08;简称“中建海龙”&#xff09;以其卓越的创新能力和强大的技术实力&#xff0c;不断书写着装配式建筑领域的新篇章。1 月 10 日&#xff0c;由深圳安居集团规划&#xff0c;中建海龙与中海建筑共…...

编程日记 2026/4/13 14:22:05

解锁养生秘籍，拥抱健康生活

在这个快节奏的时代&#xff0c;人们行色匆匆&#xff0c;常常在忙碌中忽略了健康。其实&#xff0c;养生并非遥不可及&#xff0c;它就藏在生活的细微之处&#xff0c;等待我们去发现和实践。 规律作息是健康的基础。日出而作&#xff0c;日落而息&#xff0c;顺应自然规律&am…...

编程日记 2026/4/13 6:34:14

STM32 如何使用DMA和获取ADC

目录 背景 ‌摇杆的原理 程序 端口配置 ADC 配置 DMA配置 背景 DMA是一种计算机技术&#xff0c;允许某些硬件子系统直接访问系统内存&#xff0c;而不需要中央处理器&#xff08;CPU&#xff09;的介入&#xff0c;从而减轻CPU的负担。我们可以通过DMA来从外设&#xf…...

编程日记 2026/4/6 9:05:29

细胞计数专题 | LUNA-FX7™新自动对焦算法提高极低细胞浓度下的细胞计数准确性

现代细胞计数仪采用自动化方法&#xff0c;在特定浓度范围内进行细胞计数。其上限受限于在高浓度条件下准确区分细胞边界的能力&#xff0c;而相机视野等因素则决定了下限。在图像中仅包含少量可识别细胞或特征的情况下&#xff0c;自动对焦可能会失效&#xff0c;从而影响细胞…...

编程日记 2026/4/17 12:33:15

DeepSeek教unity------MessagePack-01

中文&#xff1a;GitCode - 全球开发者的开源社区,开源代码托管平台 MessagePack是C# 的极速 MessagePack 序列化器。它比 MsgPack-Cli 快 10 倍&#xff0c;并且性能超过其他 C# 序列化器。MessagePack for C# 还内置支持 LZ4 压缩——一种极其快速的压缩算法。性能在诸如游戏…...

编程日记 2026/2/28 13:17:16

vite+vue3开发uni-app时低版本浏览器不支持es6语法的问题排坑笔记

重要提示&#xff1a;请首先完整阅读完文章内容后再操作&#xff0c;以免不必要的时间浪费&#xff01;切记&#xff01;&#xff01;&#xff01;在使用vitevue3开发uni-app项目时&#xff0c;存在低版本浏览器不兼容es6语法的问题&#xff0c;如“?.” “??” 等。为了方便…...

编程日记 2026/2/25 17:56:09

WPF-数据转换器

一、单值转换器 1.不传参数 转换器 当Value值大于100时返回红色 public class DataConverter : IValueConverter{/// <summary>/// 表示从源到目标数据转换/// </summary>/// <param name"value">数据源的值</param>/// <param name&q…...

编程日记 2026/2/21 5:17:30

蓝桥杯备考：贪心算法之纪念品分组

P1094 [NOIP 2007 普及组] 纪念品分组 - 洛谷 这道题我们的贪心策略就是每次找出最大的和最小的&#xff0c;如果他们加起来不超过我们给的值&#xff0c;就分成一组&#xff0c;如果超过了&#xff0c;就把大的单独成一组&#xff0c;小的待定 #include <iostream> #i…...

编程日记 2026/4/11 11:39:24

Win11配置wsl、ubuntu、docker

系统要求 安装WSL。 开通虚拟化&#xff1a; 准备工作 dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestartdism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestartwsl --set-default-versi…...

编程日记 2026/4/16 13:36:42

以mysql驱动为案例，从源码角度深入分析Java的SPI机制

本文将以mysql驱动为案例&#xff0c;深入跟踪源码分析Java的SPI&#xff08;Service Provider Interface&#xff09;机制。 环境 java 8&#xff0c;mysql8.0&#xff0c;mysql-connector-java 8.0.20 代码 public class MysqlConnectorTest {public static void main(St…...

编程日记 2026/3/20 17:40:37

市盈率（P/E Ratio）：理解股票价格与盈利的关系（中英双语）

市盈率&#xff08;P/E Ratio&#xff09;&#xff1a;理解股票价格与盈利的关系 今天在阅读《漫步华尔街》&#xff08;原书第13版&#xff09;的过程中&#xff0c;看到了“股票价格是每股盈利的 6 倍”的类似表述&#xff0c;于是产生了本文。 在投资股票时&#xff0c;投资…...

编程日记 2026/4/18 3:45:54

尚硅谷爬虫note008

一、handler处理器 定制更高级的请求头 # _*_ coding : utf-8 _*_ # Time : 2025/2/17 08:55 # Author : 20250206-里奥 # File : demo01_urllib_handler处理器的基本使用 # Project : PythonPro17-21# 导入 import urllib.request from cgitb import handler# 需求&#xff…...

编程日记 2026/4/17 20:05:51

AWS上基于高德地图API验证Amazon Redshift里国内地址数据正确性的设计方案

该方案通过无服务架构实现高可扩展性&#xff0c;结合分页查询和批量更新确保高效处理海量数据&#xff0c;同时通过密钥托管和错误重试机制保障安全性及可靠性。 一、技术栈 组件技术选型说明计算层AWS Lambda无服务器执行&#xff0c;适合事件驱动、按需处理&#xff0c;成…...

编程日记 2026/1/20 1:28:31

matlab汽车动力学半车垂向振动模型

1、内容简介 matlab141-半车垂向振动模型 可以交流、咨询、答疑 2、内容说明 略 3、仿真分析 略 4、参考论文 略...

编程日记 2026/4/17 4:09:33

【新品解读】AI 应用场景全覆盖！解码超高端 VU+ FPGA 开发平台 AXVU13F

「AXVU13F」Virtex UltraScale XCVU13P Jetson Orin NX 继发布 AMD Virtex UltraScale FPGA PCIE3.0 开发平台 AXVU13P 后&#xff0c;ALINX 进一步研究尖端应用市场&#xff0c;面向 AI 场景进行优化设计&#xff0c;推出 AXVU13F。 AXVU13F 和 AXVU13P 采用相同的 AMD Vir…...

编程日记 2026/4/15 19:52:41

智能硬件定位技术发展趋势

在科技飞速进步的当下&#xff0c;智能硬件定位技术作为众多领域的关键支撑&#xff0c;正沿着多元且极具创新性的路径蓬勃发展&#xff0c;持续重塑我们的生活与工作方式。 一、精度提升的极致追求 当前&#xff0c;智能硬件定位精度虽已满足诸多日常应用&#xff0c;但未来…...

编程日记 2026/4/15 15:22:19

【Elasticsearch】`nested`和`flattened`字段在索引时有显著的区别

有同学问&#xff0c;nested查询效率不高为啥不直接扁平化查询呢&#xff1f;就跟之前的普通结构查询一样&#xff0c;这就有些想当然了&#xff0c;因为扁平化的结构在存储时&#xff0c;其实跟我们想的不一样&#xff0c;接下来给出扁平化在索引时的存储结构(尤其是当嵌套对象…...

编程日记 2026/4/15 5:54:01

【Linux探索学习】第二十七弹——信号（上）：Linux 信号基础详解

Linux学习笔记&#xff1a; https://blog.csdn.net/2301_80220607/category_12805278.html?spm1001.2014.3001.5482 前言&#xff1a; 前面我们已经将进程通信部分讲完了&#xff0c;现在我们来讲一个进程部分也非常重要的知识点——信号&#xff0c;信号也是进程间通信的一…...

编程日记 2026/4/14 19:50:53

redis解决高并发看门狗策略

当一个业务执行时间超过自己设定的锁释放时间&#xff0c;那么会导致有其他线程进入&#xff0c;从而抢到同一个票,所有需要使用看门狗策略&#xff0c;其实就是开一个守护线程&#xff0c;让守护线程去监控key&#xff0c;如果到时间了还未结束&#xff0c;就会将这个key重新s…...

编程日记 2026/4/12 13:57:22

Ollama+DeepSeek+Open-WebUi

环境准备 Docker Ollama Open-WebUi Ollama 下载地址&#xff1a;Ollama docker安装ollama docker run -d \ -v /data/ollama/data:/root/.ollama \ -p 11434:11434 \ --name ollama ollama/ollama 下载模型 Ollama模型仓库 # 示例&#xff1a;安装deepseek-r1:7b doc…...

编程日记 2026/4/14 0:46:19

MySQL-事务隔离级别

事务有四大特性&#xff08;ACID&#xff09;&#xff1a;原子性&#xff0c;一致性&#xff0c;隔离性和持久性。隔离性一般在事务并发的时候需要保证事务的隔离性&#xff0c;事务并发会出现很多问题&#xff0c;包括脏写&#xff0c;脏读&#xff0c;不可重复读&#xff0c;…...

编程日记 2026/4/12 11:00:40

对于简单的HTML、CSS、JavaScript前端，我们可以通过几种方式连接后端

1. 使用Fetch API发送HTTP请求&#xff08;最简单的方式&#xff09;&#xff1a; //home.html // 示例&#xff1a;提交表单数据到后端 const submitForm async (formData) > {try {const response await fetch(http://your-backend-url/api/submit, {method: POST,head…...

编程日记 2026/4/12 9:19:41

从入门到精通：Postman 实用指南

Postman 是一款超棒的 API 开发工具&#xff0c;能用来测试、调试和管理 API&#xff0c;大大提升开发效率。下面就给大家详细讲讲它的安装、使用方法&#xff0c;再分享些实用技巧。 一、安装 Postman 你能在 Postman 官网&#xff08;https://www.postman.com &#xff09;下…...

编程日记 2026/4/16 5:10:15

error: conflicting types for ‘SSL_SESSION_get_master_key’

$ make make all-am make[1]: Entering directory ‘/home/linuxuser/tor’ CC src/lib/tls/libtor_tls_a-tortls_openssl.o In file included from src/lib/tls/tortls_openssl.c:61: ./src/lib/tls/tortls_internal.h:55:8: error: conflicting types for ‘SSL_SESSION_get_…...

编程日记 2026/4/2 19:37:43

sql sqlserver的特殊函数COALESCE和PIVOT的用法分析

一、COALESCE是一个返回参数中第一个非NULL值的函数&#xff0c; 列如&#xff1a;COALESCE&#xff08;a,b,c,d,e&#xff09;;可以按照顺序取abcde&#xff0c;中的第一个非空数据&#xff0c;abcde可以是表达式 用case when 加ISNULL也可以实现&#xff0c;但是写法复杂了…...

编程日记 2026/4/12 4:02:55

智能猫眼实现流程图

物理端开发流程图 客户端端开发流程图 用户功能开发流程图 管理员开发流程图...

编程日记 2026/4/12 14:29:05