css基础之实现轮播图

原理介绍

图片轮播的原理是通过控制显示和隐藏不同的图片来实现图像的切换,从而创建连续播放的效果。用到的知识点有定位和定时器。

实现步骤:

  1. HTML 结构: 首先,需要在HTML中创建一个包含轮播图片的容器,通常使用 <div><ul> 元素。每张图片通常嵌套在容器内的单独元素中,例如 <div><li>

  2. CSS 样式: 通过CSS样式,定义轮播容器的尺寸、位置、样式以及图片的尺寸和位置。使用CSS来设置图片的显示和隐藏,通常通过display: none;或者opacity: 0;来隐藏不显示的图片。

  3. JavaScript 逻辑: JavaScript用于控制图片的切换。

    • 通过JavaScript获取所有的轮播项(图片)以及控制按钮(如上一张和下一张按钮)。

    • 使用一个变量(通常称为currentSlide)来跟踪当前显示的图片的索引。

    • 当用户点击上一张或下一张按钮时,JavaScript会更新currentSlide的值,并根据currentSlide来显示相应的图片。

    • 通常会实现循环播放,当显示最后一张图片时,再点击下一张按钮会回到第一张图片,以及当显示第一张图片时,再点击上一张按钮会回到最后一张图片。

    • 可以使用定时器(例如setInterval)来自动切换图片,实现自动播放功能。

实现过程

html部分:html结构有四部分,最外层的容器,然后放置图片的容器、切换的按钮,图片的序号。

<body><div class="container"><div class="slide"><div class="img1"></div></div><div class="slide"><div class="img2"></div></div><div class="slide"><div class="img3"></div></div><div id="nextBtn">&gt;</div><div id="prevBtn">&lt;</div><div class="controls"><ul class="num-ul"><li>1</li><li>2</li><li>3</li></ul></div></div>
</body>

css部分:利用定位布局好容器里元素的位置。

<style>.container {width: 400px;height: 200px;margin: 0 auto;overflow: hidden;position: relative;}.slide {width: 100%;height: 100%;display: none;}.img1 {width: 400px;height: 200px;background: yellow;}.img2 {width: 400px;height: 200px;background: goldenrod;}.img3 {width: 400px;height: 200px;background: yellowgreen;}#prevBtn,#nextBtn {width: 20px;height: 20px;border-radius: 50%;top: 50%;transform: translateY(-50%);display: flex;justify-content: center;align-items: center;cursor: pointer;background-color: rgba(0, 0, 0, 0.3);}#prevBtn {position: absolute;left: 20px;z-index: 2;}#nextBtn {position: absolute;right: 20px;z-index: 2;}.controls {position: absolute;left: 50%;bottom: 20px;transform: translateX(-50%);z-index: 2;}.num-ul {list-style: none;padding: 0;margin: 0;display: flex;gap: 8px;}.num-ul li {width: 20px;height: 20px;border-radius: 50%;background-color: rgba(0, 0, 0, 0.3);display: flex;justify-content: center;align-items: center;}</style>

加上css 效果图如下:
在这里插入图片描述

js部分:利用js实现图片的切换,切换时下面的序号按钮的背景根据当前显示的图切换样式。

<script>let timer = null; // 定时器const slides = document.querySelectorAll(".slide"); // 图片容器const containerDom = document.getElementsByClassName("container")[0];var numUlDom = document.getElementsByClassName("num-ul")[0]; // 数字按钮父级容器var numList = document.getElementsByClassName("num-ul")[0].getElementsByTagName("li"); // 数字切换按钮列表let currentSlide = 0;// 设置图片的样式function showSlide(index) {slides[currentSlide].style.display = "none";numList[currentSlide].style.backgroundColor = ""; // 清空上一个按钮的样式currentSlide = (index + slides.length) % slides.length;numList[currentSlide].style.backgroundColor = "#ccc";slides[currentSlide].style.display = "block";}function nextSlide() {showSlide(currentSlide + 1);}function prevSlide() {showSlide(currentSlide - 1);}// 鼠标移入容器,停止自动播放containerDom.addEventListener("mouseenter", closeAutoShow);// 鼠标移出容器,开启自动播放containerDom.addEventListener("mouseleave", autoPlay);// 监听切换按钮document.getElementById("nextBtn").addEventListener("click", nextSlide);document.getElementById("prevBtn").addEventListener("click", prevSlide);// 数字按钮点击事件numUlDom.addEventListener("click", numClick);// 数字按钮点击事件function numClick(e) {// ulDom.style.transition = "0.5s";// 检查点击的目标是否是一个li元素if (e.target.tagName === "LI") {// 获取被点击的li元素的内容或索引const clickedItem = event.target;const clickedIndex = Array.from(numUlDom.children).indexOf(clickedItem);if (clickedIndex == undefined) {return;}console.log(currentSlide, clickedIndex);numList[currentSlide].style.backgroundColor = ""; // 清空上一个按钮的样式numList[clickedIndex].style.backgroundColor = "#ccc";showSlide(clickedIndex);}}// 定时器开始function autoPlay() {timer = setInterval(nextSlide, 3000);}// 定时器结束function closeAutoShow() {clearInterval(timer);}showSlide(0);// 自动播放autoPlay();</script>

在这里插入图片描述

总结

实现轮播图的方法多种多样,这里只是介绍其中一种。原理就都差不多,主要根据自己需求而定。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/133123.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Verilog使用vscode

使用vscode打开.v文件 Tools setting texteditor vscode文件路径 [line number]:[file name] &#xff08;可能会出错&#xff0c;可以去vscode确认打开的文件路径&#xff0c;后经调整后改为 vscode文件路径 [file name]&#xff09; 安装插件 搜索Verilog 添加使用最多的 …

Vue3:解决基地址不同 数据交互http与https跨域问题

配置公共管理的api文件和vue.config.js可以解决跨域问题。一个项目对接不同的基地址和接口同理。 api export default {//接口基地址Millia: process.env.NODE_ENV development ? location.protocol // location.host /milliaApi : http://xx.xxx.xxxx/index.php/,Milli…

线上 kafka rebalance 解决

上周末我们服务上线完毕之后发生了一个kafka相关的异常&#xff0c;线上的kafka频繁的rebalance&#xff0c;详细的报错我已经贴到下面&#xff0c;根据字面意思&#xff1a;消费者异常 org.apache.kafka.clients.consumer.CommitFailedException: 无法完成提交&#xff0c;因为…

本周三商店更新:多款套装下线,四款升级武器带异色皮肤返厂

本周三将迎来26.2版本更新与11商店大更新&#xff0c;版本更新可点击26.2版本更新公告进行查看&#xff0c;这里不一一赘述了&#xff0c;下面大概罗列一下商店更新&#xff0c;有皮肤下架&#xff0c;大家还能趁最后时间入手&#xff0c;最重要的是四款升级武器返厂咯。 危险玩…

使用Postman工具做接口测试 —— 环境变量与请求参数格式!

引言 在上一篇笔记我们主要介绍了接口测试的基础知识与基本功能&#xff0c;本章主要介绍如何使用postman做接口测试。 配置环境变量和全局变量 环境变量和全局变量 环境管理中还可以点击“Global”添加全局变量&#xff0c;环境变量只有当选择了该环境时才生效&#xff0c;…

机器学习——CBOW负采样(未开始)

刚从前一个坑里&#xff0c;勉强爬出来&#xff0c;又掘开另一坑 看了很多文章B站up主。。。糊里糊涂 但是我发觉&#xff0c;对于不理解的东西&#xff0c;要多看不同up主写的知识分享 书读百遍&#xff0c;其意自现&#xff0c;我是不相信的&#xff0c;容易钻牛角尖 但是&am…

Java程序设计2023-第六次上机测试

7-1找到出勤最多的人 根据教师的花名册&#xff0c;找到出勤最多的人。 输入格式: 出勤记录单行给出&#xff0c;数据直接使用空格分割。 输出格式: 单行输出&#xff08;若有多人&#xff0c;人名直接使用空格分割&#xff0c;结尾处没有空格&#xff09;。 输入样例: 在这里…

offsetof宏的使用、模拟实现及 (size_t)(((struct_type*)0)->mem_name)的解释

宏原型&#xff1a;offsetof(type,member) 作用&#xff1a;返回数据结构或联合体类型中成员的偏移量&#xff0c;以字节为单位 返回值&#xff1a;size_t类型的无符号整数 使用案例&#xff1a; #include <stdio.h> #include <stddef.h> struct foo {ch…

jenkins展示html报告样式需要注意的要点

一、jenkins展示html报告样式需要注意的要点 最后&#xff1a;

SpringBoot定时任务

SpringBoot定时任务 在我们开发项目过程中&#xff0c;经常需要定时任务来帮助我们来做一些内容&#xff0c; Spring Boot 默认已经帮我们实行了&#xff0c;只需 要添加相应的注解就可以实现。 常用的定时任务有两种&#xff1a; 1、基于注解 2、基于接口 1、基于注解Sc…

〖Python网络爬虫实战㊲〗- JavaScript 逆向实战(一)

订阅:新手可以订阅我的其他专栏。免费阶段订阅量1000+python项目实战 Python编程基础教程系列(零基础小白搬砖逆袭) 说明:本专栏持续更新中,订阅本专栏前必读关于专栏〖Python网络爬虫实战〗转为付费专栏的订阅说明作者:爱吃饼干的小白鼠。Python领域优质创作者,2022年度…

持续交付的好处

在软件领域&#xff0c;持续交付就是这样一种开发实践&#xff0c;它为所有利益相关者带来好处&#xff1a;开发、运营、测试人员和业务团队。持续交付适用于每个由软件驱动的组织&#xff1b;很难想象企业不使用软件。 它使人们受益&#xff0c;并需要人们做出改变才能更好地…

使用Kotlin与Unirest库抓取音频文件的技术实践

目录 摘要 一、Kotlin与Unirest库概述 二、使用Kotlin和Unirest抓取音频文件 1、添加Unirest依赖 2、发送HTTP请求获取音频文件 3、保存音频文件 三、完整代码示例 四、注意事项 结论 摘要 本文详细阐述了如何使用Kotlin编程语言与Unirest库抓取网络上的音频文件。首…

NSSCTF第11页(1)

[HUBUCTF 2022 新生赛]Calculate 进到主页 翻译 回答以下数学问题20次&#xff1b;你有3秒钟的时间来解决每个问题&#xff1b; 为了保护服务器&#xff0c;你不能在1秒内回答一个问题 您已回答0个问题&#xff1b; 让我们3秒速算&#xff0c;没那个实力&#xff0c;提示说是写…

Python的计算性能优化

Python 虽然因其解释性质而在某些场合比编译语言如 C/C &#xff0c;但通过各种策略和工具&#xff0c;可以显著提升其性能。 一. 代码优化 代码优化通常指的是修改代码以提高其效率和性能。在 Python 中&#xff0c;这可以通过减少程序的运行时间、内存使用或二者的结合来实…

DockerFile常用保留字指令及知识点合集

目录 DockerFile加深理解&#xff1a; DockerFile常用保留字指令 保留字&#xff1a; RUN&#xff1a;容器构建时需要运行的命令 COPY&#xff1a;类似ADD&#xff0c;拷贝文件和目录到镜像中。 将从构建上下文目录中 <源路径> 的文件/目录复制到新的一层的镜像内的 …

微信小程序之自定义组件开发

1、前言 从小程序基础库版本 1.6.3 开始&#xff0c;小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。开发者可以将页面内的功能模块抽象成自定义组件&#xff0c;以便在不同的页面中重复使用&#xff1b;也可以将复杂的页面拆分成多个低耦…

3D 线激光相机的激光条纹中心提取方法

论文地址:Excellent-Paper-For-Daily-Reading/application/centerline at main 类别:应用——中心线 时间:2023/11/06 摘要 线激光条纹中心提取是实现线激光相机三维扫描的关键,根据激光三角测量法研制了线激光相机,基于传统 Steger 法对其进行优化并提出一种适用于提…

爱上C语言:函数递归,青蛙跳台阶图文详解

&#x1f680; 作者&#xff1a;阿辉不一般 &#x1f680; 你说呢&#xff1a;生活本来沉闷&#xff0c;但跑起来就有风 &#x1f680; 专栏&#xff1a;爱上C语言 &#x1f680;作图工具&#xff1a;draw.io(免费开源的作图网站) 如果觉得文章对你有帮助的话&#xff0c;还请…

数据的备份和恢复

数据的备份和恢复 备份&#xff1a;完全备份 增量备份 完全备份&#xff1a;将整个数据库完整的进行备份 增量备份&#xff1a;在完全备份的基础之上&#xff0c;对后续新增的内容进行备份 备份的需求 1、在生产环境中&#xff0c;数据的安全至关重要、任何数据的丢失都可…