前端:轮播图常见的几种实现方式
目录
前言
一、轮播图是什么?
二、实现方法
1.使用纯 HTML、CSS、JavaScript 实现
2.使用组件来快速实现
总结
前言
在学习前端的过程中,总是有要实现轮播图效果的时候,本文就介绍了轮播图常见的几种实现方式。
一、轮播图是什么?
轮播图是在首页上展示信息的一种方式,为了让用户不用滚动屏幕就能看到更多内容,可以利用轮播图来最大化信息密度。
二、实现方法
1.使用纯 HTML、CSS、JavaScript 实现
HTML代码如下:
<div class="carousel"><img src="./assets/banner1.png" alt=""><span class="pre"><</span><span class="next">></span>
</div>
CSS代码如下:
* {padding: 0;margin: 0;}/* 轮播图 */.carousel {position: relative;margin: 100px auto;width: 1240px;height: 500px;}/* 左右切换箭头 */.pre,.next {position: absolute;top: 50%;transform: translateY(-50%);width: 20px;height: 40px;background-color: rgba(0, 0, 0, 0.3);text-align: center;line-height: 40px;color: #fff;opacity: 0;transition: all 0.3s;cursor: pointer;}.pre {left: 0;border-radius: 0 20px 20px 0;}.next {right: 0;border-radius: 20px 0 0 20px;}.carousel:hover .pre,.carousel:hover .next {opacity: 1;}
JS代码如下:
/*** 轮播图实现的基本流程* 1.数据准备 --- 遍历数组来实现轮播效果* 2.获取对象* 3.自动播放 --- 用定时器实现* 4.当鼠标悬停在轮播图上面时,停止自动轮播 --- 销毁定时器* 5.当鼠标离开时,开始自动轮播 --- 重新开启定时器* 6.点击左右箭头时,进行图片的切换 --- 用事件委托来实现*/// 1.数据准备 --- 遍历数组来实现轮播效果const imageUrls = ['./assets/banner1.png', './assets/banner2.png', './assets/banner3.png', './assets/banner4.png', './assets/banner5.png']let i = 0// 2.获取对象const carousel = document.querySelector('.carousel')const img = document.querySelector('img')// 3.自动播放 --- 用定时器实现let timer = setInterval(() => {i += 1i %= 5img.src = imageUrls[i]}, 3000);// 4.当鼠标悬停在轮播图上面时,停止自动轮播 --- 销毁定时器carousel.addEventListener('mouseenter', () => {clearInterval(timer)})// 5.当鼠标离开时,开始自动轮播 --- 重新开启定时器carousel.addEventListener('mouseleave', () => {timer = setInterval(() => {i += 1i %= 5img.src = imageUrls[i]}, 3000);})// 6.点击左右箭头时,进行图片的切换 --- 用事件委托来实现carousel.addEventListener('click', (e) => {// 判断所点击的是左箭头,还是右箭头if (e.target.classList.contains('pre')) {i += 4i %= 5img.src = imageUrls[i]}if (e.target.classList.contains('next')) {i += 1i %= 5img.src = imageUrls[i]}})
在以上代码中,首先是准备好了结构和样式,并且数据是存在数组里的,这样方便后续做图片的自动播放以及手动切换。
自动播放主要是用定时器来实现,手动切换则是运用了事件委托,具体流程也在上面的代码中进行了比较清晰的注释,有兴趣的话可以看一下。
2.使用组件来快速实现
实现轮播图效果,除以上方法外,其实还有很多方法。而在这些方法中,最方便快速的可以说就是使用组件了。比如说 swiper ,vant-ui 等组件,用这些组件就可以快速的实现轮播图,至于具体如何来使用组件,那就要看组件的官方文档了。
只不过要提一嘴的是,虽然有组件来帮助我们快速实现一些效果,但终究还是要会自己手动实现的,这样才能更好的提高自身能力。
总结
以上就是今天要讲的内容,本文简单介绍了一些实现轮播图效果的方法,可以得出结论,轮播图并不难实现。最后,希望本文能对您有所帮助。
相关文章:
前端:轮播图常见的几种实现方式
目录 前言 一、轮播图是什么? 二、实现方法 1.使用纯 HTML、CSS、JavaScript 实现 2.使用组件来快速实现 总结 前言 在学习前端的过程中,总是有要实现轮播图效果的时候,本文就介绍了轮播图常见的几种实现方式。 一、轮播图是什么?…...
Pytest基础01: 入门demo脚本
目录 1 Pytest接口测试 1.1 最简单版hello world 1.2 pytest.ini 2 pytest兼容unittest 3 封装pytest执行入口 1 Pytest接口测试 Pyest是一个可以用于接口测试的强大框架,开源社区也有非常多的pytest插件。 按江湖传统,学习一个新语言或者新框架&…...
ruoyi 多租户 开启后针对某一条sql不适用多租户; 若依多租户sql规则修改
文章参考:多租户功能 | Ruoyi-TDesign 忽略租户 1.如果需要指定单独 SQL 不开启过滤,可在对应的 Mapper 接口添加如下忽略注解: InterceptorIgnore(tenantLine "true", dataPermission "false") 此处注意事项 使…...
driftingblues6靶机
打开靶场 查看页面源代码,最下面有一个注释,提供了一个网址 vmlist.github.io,我们去访问一下 这里是一个github页面,提供攻防虚拟机的下载,对我们解题并没有什么有用的信息,我们再去扫描端口 发现只有80端…...
Neo4j GDS 2.0 安装与配置
Neo4j GDS 2.0 安装与配置 GDS插件安装:Neo4j官方文档 1. GDS简介 Neo4j Graph Data Science (GDS) 库作为 Neo4j Graph Database 的插件提供。该插件需要安装到数据库中并在 Neo4j 配置中列入白名单。有两种主要方法可以实现这一点,我们将在本章中详…...
A*算法与人工势场法结合的路径规划(附MATLAB源码)
A*算法与人工势场法(APF)结合实现路径规划 路径规划是机器人、无人机及自动驾驶等领域中的一个重要问题。本文结合了经典的 A* 算法与 人工势场法(Artificial Potential Field, APF),实现了一种改进的路径规划方法。下…...
BootstrapTable处理表格
需求背景 历史项目使用 BootstrapTable 作为前端组件 应客户需要调整: 冻结前四列对于大文本文字显示部分内容,鼠标悬浮显示完整内容 冻结列 1、引入相关CSS,JS CSS <link rel"stylesheet" href"/css/bootstrap.min.css"> …...
UniApp 打开文件工具,获取文件类型,判断文件类型
注意:以下代码使用 typeScript 开发,如果想在 js 中使用,可参考 npm 已经发布的包:https://www.npmjs.com/package/uni-easy-file NPM 使用 如果想直接在 npm 项目中使用可以直接执行以下命令 npm i uni-easy-file然后直接使用 …...
docker-开源nocodb,使用已有数据库
使用已有数据库 创建本地数据库 数据库:nocodb 用户:nocodb 密码:xxxxxx修改docker-compose.yml 默认网关的 IP 地址是 172.17.0.1(适用于 bridge 网络模式)version: "2.1" services:nocodb:environment:…...
Mysql COUNT() 函数详解
简介 COUNT()函数定义 COUNT()函数是SQL中常用的 聚合函数 ,用于统计满足特定条件的记录数。它可以灵活地应用于各种查询场景,帮助用户快速获取所需的数据统计信息。该函数不仅能够计算所有行的数量,还能针对特定列进行计数,并支…...
单周期CPU电路设计
1.实验目的 本实验旨在让学生通过设计一个简单的单周期 CPU 电路,深入理解 RISC-V 指令集的子集功能实现,掌握数字电路设计与实现的基本流程,包括指令解析、部件组合、电路设计以及功能仿真等环节,同时培养verilog HDL编程能力和…...
从零开始采用命令行创建uniapp vue3 ts springboot项目
文章目录 1,通过命令行创建uniapp vue3 ts项目2, 创建springboot后台项目3, 联调测试 1,通过命令行创建uniapp vue3 ts项目 官方通过命令行创建项目的地址:https://zh.uniapp.dcloud.io/quickstart-cli.html 在执行下面操…...
跟着逻辑先生学习FPGA-实战篇第一课 6-1 LED灯闪烁实验
硬件平台:征战Pro开发板 软件平台:Vivado2018.3 仿真软件:Modelsim10.6d 文本编译器:Notepad 征战Pro开发板资料 链接:https://pan.baidu.com/s/1AIcnaGBpNLgFT8GG1yC-cA?pwdx3u8 提取码:x3u8 1 知识背景 LED,又名…...
springboot 跨域配置
方案一 Configuration public class GlobalCorsConfig {Beanpublic CorsFilter corsFilter() {//1. 添加 CORS配置信息CorsConfiguration config new CorsConfiguration();//放行哪些原始域config.addAllowedOrigin("*");//是否发送 Cookieconfig.setAllowCredenti…...
C语言宏和结构体的使用代码
先看代码: #include <stdio.h> #include <string.h>// 定义一个宏,用于定义结构体 #define DEFINE_STRUCT(name, type1, name1, type2, name2, size, cf) \typedef struct { \type1 name1; …...
微信小程序 覆盖组件cover-view
wxml 覆盖组件 <video src"../image/1.mp4" controls"{{false}}" event-model"bubble"> <cover-view class"controls"> <cover-view class"play" bind:tap"play"> <cover-image class"…...
【Redis知识】Redis进阶-redis还有哪些高级特性?
文章目录 概览1. 持久化2. 复制与高可用3. 事务和脚本4. 发布/订阅 Redis事务示例事务中的错误处理使用 WATCH 进行乐观锁总结 Redis管道一、管道的原理二、管道的特点三、管道的使用场景四、管道的实现示例五、管道的注意事项 发布订阅模式一、Redis发布订阅模式介绍二、Redis…...
【Pytorch实用教程】深入了解 torchvision.models.resnet18 新旧版本的区别
深入了解 torchvision.models.resnet18 新旧版本的区别 在深度学习模型开发中,PyTorch 和 torchvision 一直是我们不可或缺的工具。近期,torchvision 对其模型加载 API 进行了更新,将旧版的 pretrained 参数替换为新的 weights 参数。本文将介绍这一变化的背景、具体区别,…...
攻防世界 - Web - Level 3 | very_easy_sql
关注这个靶场的其它相关笔记:攻防世界(XCTF) —— 靶场笔记合集-CSDN博客 0x01:考点速览 本关考察的是 SSRF 漏洞,需要我们结合 Gopher 协议利用服务端进行越权 SQL 注入。考点不少,总结一下主要有以下几点…...
使用Java Selenium修改打开页面窗口大小
在自动化测试过程中,有时需要模拟不同屏幕尺寸的用户行为,以确保网页在不同设备上的显示效果和用户体验。Selenium是一个强大的自动化测试工具,支持多种编程语言和浏览器,可以帮助我们实现这一需求。本文将详细介绍如何使用Java S…...
STM32+rt-thread判断是否联网
一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...
Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器
第一章 引言:语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域,文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量,支撑着搜索引擎、推荐系统、…...
spring:实例工厂方法获取bean
spring处理使用静态工厂方法获取bean实例,也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下: 定义实例工厂类(Java代码),定义实例工厂(xml),定义调用实例工厂ÿ…...
C++ 基础特性深度解析
目录 引言 一、命名空间(namespace) C 中的命名空间 与 C 语言的对比 二、缺省参数 C 中的缺省参数 与 C 语言的对比 三、引用(reference) C 中的引用 与 C 语言的对比 四、inline(内联函数…...
HTML前端开发:JavaScript 常用事件详解
作为前端开发的核心,JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例: 1. onclick - 点击事件 当元素被单击时触发(左键点击) button.onclick function() {alert("按钮被点击了!&…...
NFT模式:数字资产确权与链游经济系统构建
NFT模式:数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新:构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议:基于LayerZero协议实现以太坊、Solana等公链资产互通,通过零知…...
大数据治理的常见方式
大数据治理的常见方式 大数据治理是确保数据质量、安全性和可用性的系统性方法,以下是几种常见的治理方式: 1. 数据质量管理 核心方法: 数据校验:建立数据校验规则(格式、范围、一致性等)数据清洗&…...
SQL注入篇-sqlmap的配置和使用
在之前的皮卡丘靶场第五期SQL注入的内容中我们谈到了sqlmap,但是由于很多朋友看不了解命令行格式,所以是纯手动获取数据库信息的 接下来我们就用sqlmap来进行皮卡丘靶场的sql注入学习,链接:https://wwhc.lanzoue.com/ifJY32ybh6vc…...
Qt Quick Controls模块功能及架构
Qt Quick Controls是Qt Quick的一个附加模块,提供了一套用于构建完整用户界面的UI控件。在Qt 6.0中,这个模块经历了重大重构和改进。 一、主要功能和特点 1. 架构重构 完全重写了底层架构,与Qt Quick更紧密集成 移除了对Qt Widgets的依赖&…...
window 显示驱动开发-如何查询视频处理功能(三)
D3DDDICAPS_GETPROCAMPRANGE请求类型 UMD 返回指向 DXVADDI_VALUERANGE 结构的指针,该结构包含特定视频流上特定 ProcAmp 控件属性允许的值范围。 Direct3D 运行时在D3DDDIARG_GETCAPS的 pInfo 成员指向的变量中为特定视频流的 ProcAmp 控件属性指定DXVADDI_QUER…...
