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

【HTML5】显示-隐藏法实现网页轮播图效果

news 来源：原创 2025/8/21 13:45:39

【HTML5】显示-隐藏法实现网页轮播图效果

实现思路：先将所有图片在页面中设置好，然后给放置图片的元素li添加display：none属性将其隐藏，然后通过js获取到放置图片的元素li，再一个一个的给li元素添加display：block属性将其显示出来，从而达到轮播图的效果。

1.页面布局

（1）页面中主要使用相对定位和绝对定位将左右按钮和滚动标签按钮设置到图片上，相关代码如下：

<--页面设置-->
<div class="div1"><div class="container"><div class="content"><div class="ads"><ul class="ads-list"><li class="show"><a href="###"><img src="./images/ad1.avis" /></a></li><li><a href="###"><img src="./images/ad2.avis" /></a></li><li><a href="###"><img src="./images/ad3.avis" /></a></li></ul><div class="ads-btn"><span class="active">1</span><span>2</span><span>3</span></div><!--&lt;小于 &gt;大于  &nbsp；空格 --><a href="javascript:;" class="btn-left btn">&lt;</a><a href="javascript:;" class="btn-right btn">&gt;</a></div></div></div></div>

(2)对应的css样式如下：

*{margin: 0;padding: 0;box-sizing: border-box;
}
.div1{background-color: aliceblue;
}
a {/* 设置字体颜色 */color: #172c45;/* 取消a标签的下划线 */text-decoration: none
}li {/* 取消li前面的图标 */list-style: none
}/* 公共样式 */
.container {width: 1100px;/* 盒子模型 */margin: 0 auto;height: 100%;border: 1px solid red;
}
content {border: 1px solid yellow;display: flex;justify-content: space-between;
}.ads {/* 父容器设置为弹性盒子之后，可以使用该属性设置弹性项目所占比例 */flex: 1;border: 2px solid fuchsia;position: relative;
}/* 3.轮播图和切换按钮 */.ads-list {width: 100%;height: 100%;
}.ads-list li img {/* 图片将会扩展来填满其父元素的宽度 */width: 100%;
}/* 轮播图隐藏和显示 */
.ads-list li {display: none;
}.ads-list .show {display: block;
}/* 页码标签 */
.ads-btn {width: 100px;height: 10px;position: absolute;bottom: 10px;left: 50%;margin-left: -50px;display: flex;justify-content: space-between;
}.ads-btn span {background-color: #007d4f;/* 文本首行缩进 */text-indent: -99999px;border-radius: 4px;width: 30px;
}.ads-btn .active {background-color: white;
}/* 换页按钮 */
.btn {width: 30px;height: 30px;position: absolute;top: 50%;margin-top: -15px;font-size: 30px;border-radius: 50%;background-color: #007d4f;color: white;text-align: center;line-height: 30px;
}.btn-left {left: 10px;
}.btn-right {right: 10px;
}

（3）js代码如下：

window.addEventListener("load", function () {ads();
});
function ads(){console.log("这是⼴告轮播图交互");// 第⼀步：获取元素let oAd = document.querySelector(".container .ads");let aLi = document.querySelectorAll('.content .ads-list li');let aBtn = document.querySelectorAll('.content .ads-btn span');let oBtn_left = document.querySelector('.content .ads .btn-left');let oBtn_right = document.querySelector('.content .ads .btn-right');let index = 0; // 初始索引，从第⼀张图⽚开始轮播let timer = null;// 第二步：初始化，默认第一张图片显示 第一个按钮为焦点状态aLi[index].classList.add("show");aBtn[index].classList.add("active");// 第三步： 给按钮添加点击事件for (let i = 0; i < aBtn.length; i++) {aBtn[i].onclick = function () {index = i;play();}}function play() {//先将所有按钮移除点击时的样式for (let j = 0; j < aBtn.length; j++) {aBtn[j].classList.remove("active");aLi[j].classList.remove("show");}// 再将点击的按钮设置激活样式aBtn[index].classList.add("active");aLi[index].classList.add("show");}// 第四步： 自动播放function autoplay() {index++;if (index >= aBtn.length) {index = 0;}play();}timer = setInterval(autoplay, 3000);//  悬停/离开  停止/播放oAd.onmouseover = function(){clearInterval(timer);}oAd.onmouseout = function(){timer = setInterval(autoplay, 3000);}oBtn_left.onclick = function(){index--;if(index<0){index = aBtn.length-1;}play();}oBtn_right.onclick = function(){autoplay();}
}

（4）运行效果

在这里插入图片描述

【HTML5】显示-隐藏法实现网页轮播图效果

【HTML5】显示-隐藏法实现网页轮播图效果实现思路：先将所有图片在页面中设置好，然后给放置图片的元素li添加display：none属性将其隐藏，然后通过js获取到放置图片的元素li，再一个一个的给li元素添加display&#xff…...

编程日记 2025/8/21 13:45:39

Jenkins 改完端口号启动不起来了

让我们将 Jenkins 恢复到默认的 8080 端口，确保它能正常启动： 1. 修改 Jenkins 的配置文件： sudo nano /etc/default/jenkins 将内容修改为： HTTP_PORT8080 JENKINS_ARGS"--webroot/var/cache/jenkins/war --httpPort8080…...

编程日记 2025/8/21 10:11:42

招标专家随机抽选——设计讲解—未来之窗智能编程——仙盟创梦IDE

招标专家系统专家评标系统是服务于各类招标评标活动的数字化平台。它依托先进信息技术，集专家库管理、随机抽取专家、在线评标等功能于一体。系统依据项目需求设定筛选条件，从庞大专家库中精准抽取合适专家。评标时，专家可在线查阅投标文件…...

编程日记 2025/8/21 13:43:45

Os 库报错指南路径处理常见陷阱

平台分隔符差异 Windows用\，Unix用/ → 使用os.path.join()自动处理路径解析错误 os.path.abspath()解析相对路径时依赖当前工作目录路径规范化缺失 ../等符号链接需用os.path.normpath()规范化 # 不推荐 path dir\\file.txt # Windows风格 path dir/file.…...

编程日记 2025/8/18 21:23:48

GD32/STM32 ADC/DMA使用指南

首先我们对ADC及DMA的基础知识作一下简单介绍。一、 GD32/STM32 ADC模块的核心要点一）、ADC基础特性 ‌12位逐次逼近型‌ GD32/STM32 ADC为12位分辨率，最大量化值为4095（对应3.3V参考电压），支持0-3.3V模拟输入范…...

编程日记 2025/8/20 12:24:44

CSS Border 三角形阴影与多重边框的制作

CSS Border 三角形阴影与多重边框的制作在现代网页设计中，CSS的强大功能让设计师和开发者能够创造出丰富多彩的视觉效果。本文将深入探讨如何利用CSS的border属性制作三角形阴影以及多重边框效果。这些技巧不仅能提升页面的美观度，还能增强用户体验。…...

编程日记 2025/8/18 20:09:58

ES6/ES11知识点续五

迭代器【Iterator】 ES6 中的**迭代器（Iterator）**是 JavaScript 的一种协议，它定义了对象如何被逐个访问。迭代器与 for…of、扩展运算符、解构赋值等语法密切相关。 📘 迭代器工作原理 ES6 迭代器的工作原理基于两个核心机制…...

编程日记 2025/8/21 1:50:43

如何选择边缘计算服务器

边缘计算服务器选型指南（2025年更新版） 一、明确应用场景需求场景细分‌ 工业控制、自动驾驶等需‌毫秒级响应‌的场景，优先选择集成多核处理器（如Xeon D系列）和实时算法加速模块的机型，确保延迟≤50ms&…...

编程日记 2025/8/18 23:12:05

VMware如何安装？Ubuntu详细步骤

VMware如何安装？Ubuntu详细步骤如下： 在VMware中安装Ubuntu是一个常见的操作，适用于开发、测试或学习Linux的场景。以下是详细的实战步骤和注意事项，帮助你顺利完成安装。准备工作软件下载： VMware Workstation/Play…...

编程日记 2025/8/18 23:12:03

【Bootstrap V4系列】学习入门教程之组件-卡片（Card）高级用法

【Bootstrap V4系列】学习入门教程之组件-卡片（Card）高级用法一、Sizing 尺寸1.1 Using grid markup 使用网格标记1.2 Using utilities 使用实用程序1.3 Using custom CSS 使用自定义CSS 二、Text alignment 文本对齐方式三、Navigation 导航一、Sizi…...

编程日记 2025/8/20 17:40:39

WiFi那些事儿（八）——802.11n

目录 802.11n 技术简介与测试项一、802.11n 技术简介 （一）标准概述 （二）关键技术特性 1. MIMO（多输入多输出）技术 2. 信道绑定（Channel Bonding） 3. 帧聚合（Fram…...

编程日记 2025/8/18 23:11:59

Transformer数学推导——Q56 推导动态残差门控（Dynamic Residual Gating）的权重更新公式

该问题归类到Transformer架构问题集——残差与归一化——残差连接。请参考LLM数学推导——Transformer架构问题集。 1. 引言在深度学习的演进历程中，网络结构的创新始终围绕着如何更高效地处理信息、提升模型性能展开。动态残差门控（Dynamic Residual…...

编程日记 2025/8/18 16:28:35

Kaggle——House Prices（房屋价格预测）简单实现

题目‌： 从Kaggle的“House Prices - Advanced Regression Techniques”数据集使用Pandas读取数据，并查看数据的基本信息。选择一些你认为对房屋价格有重要影响的特征，并进行数据预处理（如缺失值处理、异常值处理等）。…...

编程日记 2025/8/21 6:07:43

Vue项目Git提交流程集成

Vue项目Git提交流程集成本教程将指导你如何在Vue项目中集成一个规范化的Git提交流程，包括代码规范检查、提交信息规范和自动化工具配置。前置条件 Node.js 14.0 和 npm/yarn/pnpmVue项目（Vue 2或Vue 3均可）Git已初始化的仓库一、规范化…...

编程日记 2025/8/18 23:11:55

使用 OpenSSL 吊销 Kubernetes（k8s）的 kubeconfig 里的用户证书

一.用 OpenSSL 依据已有的自签名 CA 注销签发的证书的步骤 1. 准备工作你得有自签名 CA 的私钥（通常是 .key 文件）、CA 证书（通常是 .crt 文件）以及证书吊销列表（CRL）文件。若还没有 CRL 文件&#xff0c…...

编程日记 2025/8/18 23:11:53

kubeadm部署k8s

我在阿里云上部署的k8s master 4c/8g/40g rocky linux8.9 node1/node2 2c/4g/40g rocky linux8.9 安装docker (我安装的是v1.19.1版本，是旧版本，可以装新版本，docker的版本和kubeadm,kubectl,kubelet版本相同） 1.所有…...

编程日记 2025/8/18 23:11:51

FPGA实战项目1——坦克大战

FPGA实战项目1——坦克大战根据模块化思想，可将此任务简单的进行模块拆分： 系统原理，模块划分，硬件架构，算法支持，Verilog实现框架一，系统总体原理 1. 核心设计思想硬件并行处理&#x…...

编程日记 2025/8/18 22:49:06

LeetCode 1781. 所有子字符串美丽值之和题解

示例输入：s "aabcb" 输出：5 解释：美丽值不为零的字符串包括 ["aab","aabc","aabcb","abcb","bcb"] ，每一个字符串的美丽值都为 1这题光用文字解说还是无法达到讲…...

编程日记 2025/8/18 20:13:59

Spring Web MVC————入门(1)

今天开始正式带大家学习Spring部分的内容了，大家尝试去弄个专业版嗷，学习起来爽一点在idea中下载这个插件就行了我们之后开始创建Spring项目， 蓝色部分自己起名，type选Maven，其他的默认就好了，之后nex…...

编程日记 2025/8/19 0:58:00

关于 js：1. 基础语法与核心概念

js 全称 JavaScript（简称 JS），是一种运行在浏览器和服务器端的脚本语言。用途： 浏览器端交互（如：点击按钮出现弹窗） 网页动态内容渲染（如：淘宝、京东页面更新&#xf…...

编程日记 2025/8/19 0:57:58

云境天合水陆安全漏电监测仪—迅速确定是否存在漏电现象

云境天合水陆安全漏电监测仪是一种专为水下及潮湿环境设计的电气安全检测设备，通过高灵敏度电磁传感器探测漏电电流产生的交变磁场，基于法拉第电磁感应定律，自动区分高灵敏度信号和低灵敏度信号，精准定位泄漏电源的具体位置。一旦…...

编程日记 2025/8/18 20:45:44

二、Hadoop狭义和广义的理解

作者：IvanCodes 日期：2025年5月6日🫠 专栏：Hadoop教程 Hadoop 的双重身份：核心框架与生态系统在大数据领域，Hadoop 是一个广为人知的概念，但它并非单指某一个软件，而是涵盖了两个层…...

编程日记 2025/8/20 13:07:08

DTU_DTU厂家_5G/4G DTU终端_DTU模块_厦门计讯物联科技有限公司

在物联网蓬勃发展的当下，数据的高效、稳定、可靠的传输成为关键。厦门计讯物联科技有限公司(以下简称“计讯物联”)作为国内工业物联网领域的核心厂商，专注于5G/4G DTU终端、DTU模块及无线数传设备的研发与生产，致力于为智慧城市、能源电力、…...

编程日记 2025/8/19 0:57:51

学习alpha,第2个alpha

alphas (-1 * ts_corr(rank(ts_delta(log(volume), 2)), rank(((close - open) / open)), 6)) 先分析操作符从左到右 ts_corr: Pearson 相关度量两个变量之间的线性关系。当变量呈正态分布且关系呈线性时，它最有效。 ts_corr(vwap, close, 20)是一个计算时间序列相…...

编程日记 2025/8/19 0:57:49

如何用爬虫获得按关键字搜索淘宝商品

在电商领域，获取淘宝商品的详细信息对于市场分析、选品上架、库存管理和价格策略制定等方面至关重要。淘宝作为国内知名的电商平台，提供了丰富的商品资源。通过 Python 爬虫技术，我们可以高效地获取淘宝商品的详细信息，包括商品名…...

编程日记 2025/8/19 0:57:47

Android SDK 开发中的 AAR 与 JAR 区别详解

在 Android SDK 开发中，构建项目时我们常常会看到生成两个不同的文件：一个是 build/outputs/aar/*.aar，另一个是 build/intermediates/aar_main_jar/debug/syncDebugLibJars/classes.jar。很多初学者会疑惑：它们之间有什么区别&am…...

编程日记 2025/8/19 0:57:45

Python cv2滤波与模糊处理：从原理到实战

在图像处理领域，滤波与模糊是预处理阶段的两大核心操作，既能消除噪声干扰，又能实现艺术化效果。本文将结合OpenCV的cv2库，系统讲解滤波与模糊的原理及Python实现，带你从理论到实战全面掌握这项技术。一、滤波与模糊的…...

编程日记 2025/8/19 0:57:43

【SpringBoot3】idea找不到log符号

解决idea找不到log符号，Slf4j注解不起作用如图解决办法 pom.xml文件里要手动添加版本号插件也要添加对应的版本号 <dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.30&l…...

编程日记 2025/8/20 18:47:35

Android学习总结之Java和kotlin区别

一、空安全机制真题 1：Kotlin 如何解决 Java 的 NullPointerException？对比两者在空安全上的设计差异解析： 核心考点：Kotlin 可空类型系统（?）、安全操作符（?./?:）、非空断言&…...

编程日记 2025/8/19 0:57:37

C++笔记-二叉搜索树(包括key，key/value搜索场景等)

1.二叉搜索树的概念二叉搜索树又称二叉排序树，它或者是一棵空树，或者是具有以下性质的二叉树: 1.若它的左子树不为空，则左子树上所有结点的值都小于等于根结点的值若它的右子树不为空，则2.右子树上所有结点的值都大于等于根结点…...

编程日记 2025/8/18 22:27:26

【从零开始学习RabbitMQ | 第二篇】生成交换机到MQ的可靠性保障

目录编辑前言交换机 Direct交换机与Fanout交换机的差异 Topic交换机 Topic交换机相比Direct交换机的差异生成我们的交换机，队列，以及绑定关系基于代码去生成交换机和队列基于注解去声明队列和交换机消息转换器消息队列的高可靠性发送…...

编程日记 2025/8/20 22:06:31

在 Sheel 中运行 Spark：开启高效数据处理之旅

在大数据处理领域，Apache Spark 凭借其强大的分布式计算能力，成为了众多开发者和企业处理海量数据的首选工具之一。而 Sheel 作为一种便捷的运行环境，在其中运行 Spark 可以充分发挥两者优势，实现高效的数据处理与分析。本文将详细…...

编程日记 2025/8/20 22:30:44

前端、XSS（跨站脚本攻击，Cross-Site Scripting）

XSS 攻击的三种主要类型存储型 XSS（持久型） 原理：恶意脚本被永久存储在服务器（如数据库、评论内容），用户访问包含恶意脚本的页面时触发示例：攻击者在论坛的评论区提交 ，其他用户查…...

编程日记 2025/8/19 0:56:50

第六节：图像基本操作-像素级操作

一、数字图像处理基础 1.1 图像数字化原理数字图像本质上是二维离散信号，由按矩阵排列的像素点构成。每个像素点的数值代表特定位置的亮度或色彩信息... 1.2 OpenCV核心数据结构 import cv2 import numpy as np# 读取图像文件 img cv2.imread(image.jpg)# 获取…...

编程日记 2025/8/19 0:56:48

【东枫科技】代理销售 NVIDIA DGX Spark 您的桌上有一台 Grace Blackwell AI 超级计算机。

NVIDIA GB10 Grace Blackwell超级芯片 FP4 AI 性能达到 1,000 AI TOPS 128GB 一致、统一的系统内存 ConnectX-7 智能网卡高达 4TB 存储空间 150毫米长 x 150毫米宽 x 50.5毫米高 NVIDIA DGX™ Spark 搭载 NVIDIA GB10 Grace Blackwell 超级芯片，以节能紧凑的外形提…...

编程日记 2025/8/19 0:56:46

即插即用！长安汽车复旦提出LMPOcc：长期记忆先验实现占用预测任务新SOTA

编程日记 2025/8/19 0:56:44

Kubernetes弹性伸缩：让应用自动应对流量洪峰与低谷

🚀 Kubernetes弹性伸缩：让应用自动应对流量洪峰与低谷 🌍 什么是弹性伸缩？ 弹性伸缩（Auto Scaling）是指系统能够根据实时负载自动调整计算资源，以优化性能并降低成本。在 Kubernetes&#xff0…...

编程日记 2025/8/19 0:56:42

深入解析 Linux/Unix 通信机制：从原理到观测实践

深入解析 Linux/Unix 通信机制：从原理到观测实践配图建议：Linux系统架构与通信机制全景示意图一、开篇：理解“一切皆文件”的哲学 Unix/Linux 操作系统的核心灵魂在于其独特的设计哲学。当 Dennis Ritchie 和 Ken Thompson 在贝尔实验室开…...

编程日记 2025/8/19 0:56:39

Vue 2.0 详解全教程（含 Axios 封装 + 路由守卫 + 实战进阶）

目录一、Vue 2.0 简介1.1 什么是 Vue？1.2 Vue 2.x 的主要特性二、快速上手2.1 引入 Vue2.2 创建第一个 Vue 实例三、核心概念详解3.1 模板语法3.2 数据绑定3.3 事件绑定3.4 计算属性 & 侦听器四、组件系统4.1 定义全局组件4.2 单文件组件（*.vue …...

编程日记 2025/8/21 4:51:12

《Python星球日记》第36天：线性代数基础

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 专栏：《Python星球日记》，限时特价订阅中ing 目录一、标量、…...

编程日记 2025/8/19 0:56:35

使用 Spring Boot 构建 REST API

使用 Spring Boot 构建 REST API 使用 Spring Boot 构建 REST API1. Spring Initializr构建springboot2. API 合同 & JSONAPI 协定什么是 JSON？ 3.先测试什么是测试驱动开发？测试金字塔Red， Green， Refactor 循环 4. 实施 GET…...

编程日记 2025/8/18 11:52:38

<?php $conmysqli_connect(localhost,root,,stu); mysqli_query($con,"set names utf8"); //设置字符集为utf8 $sql"select * from teacher"; $resultmysqli_query($con,$sql); $countmysqli_num_rows($result); //记录总条数$count。 $pagesize10;//每…...

编程日记 2025/8/19 0:56:30

Spring Boot操作MongoDB的完整示例大全

以下是基于Spring Boot操作MongoDB的完整示例大全，涵盖增删改查、聚合查询、索引、事务等核心功能： 一、基础CRUD操作 1. 环境配置依赖配置（pom.xml） <dependency><groupId>org.springframework.boot</groupId…...

编程日记 2025/8/21 9:55:19

SpringCloud入门教程合集(1)-SpringCloud简介与Eureka+Feign实现服务注册中心、服务提供与服务消费

场景 SpringCloud 总体架构与核心子项目 SpringCloud 总体架构 1. 基础设施层服务注册与发现：Eureka/Nacos 配置中心：Spring Cloud Config/Nacos 消息总线：Spring Cloud Bus 2. 服务通信层负载均衡：Ribbon/LoadBalancer…...

编程日记 2025/8/19 0:56:26

【Linuc】深入理解 Linux 文件权限

文章目录一、权限基础解析1. 权限三元组2. 权限类型与数字映射二、查看文件权限三、修改权限实战1. chmod 命令符号模式数字模式（推荐）2. chown 修改归属四、特殊权限机制1. SetUID (Set User ID)2. SetGID (Set Group ID)3. Sticky Bit五、高级权限管理1. 默认权限控制2. A…...

编程日记 2025/8/20 1:47:45

ExtraMAME：复古游戏的快乐“时光机”

嘿，小伙伴们！今天电脑天空要给大家安利一款超有趣的软件——ExtraMAME！如果你对复古街机游戏念念不忘，那它绝对能成为你的快乐源泉，带你瞬间穿越回那个充满游戏机的黄金时代。 ExtraMAME是一款基于MAME（Mu…...

编程日记 2025/8/20 10:31:21

没有 Mac，如何把 iOS App 成功上架？

开发者的 iOS 上架折腾记：没有 Mac，也能搞定？ 最近在帮朋友把一个跨平台 Flutter 项目上架到 App Store，结果被 iOS 上架的那套流程卡得头都大了。其实这也不是第一次碰壁了——每次到“申请证书打包上传”的时候&#xff0c…...

编程日记 2025/8/21 3:22:09

使用VMware Workstation pro 17.5.1在Windows上安装Ubuntu 24.04.2的详细步骤

一、准备工作 1. 下载Ubuntu 24.04.2 ISO镜像官方下载地址：Ubuntu 24.04.2 (Noble Numbat) 选择 ubuntu-24.04.2-desktop-amd64.iso（桌面版）或 ubuntu-24.04.2-live-server-amd64.iso（服务器版）。 2. 确认系统要求…...

编程日记 2025/8/21 10:41:44