轮播图的五种写法(原生、vue2、vue3、react类组件,react函数组件)
轮播图效果是一种在网页或应用程序中展示多张图片或内容的方式,通常以水平或垂直的方式循环播放。本文使用原生、vue2、vue3、react类组件,react函数组件五种写法实现了简单的轮播图效果,需要更多轮播效果需要再增加样式或者动画。
-
淡入淡出效果:每张图片渐渐淡入显示,然后渐渐淡出消失,过渡效果平滑。(使用CSS的
@keyframes和animation属性)创建一个
@keyframes,定义两个关键帧,一个是初始状态,一个是结束状态,其中透明度从0到1,将该动画应用到需要淡入淡出的元素上,使用animation属性指定动画名称、持续时间、动画效果等。 -
平移效果:每张图片从一侧平滑地移动到另一侧,形成连续的平移效果。(使用CSS的
transform和transition属性)使用
transform: translate(x, y);来实现平移效果,其中x和y是水平和垂直方向上的平移距离。可以使用负值来实现反方向的平移。添加过渡效果来使平移更加平滑。使用transition: transform duration;来设置过渡效果的持续时间 -
缩放效果:每张图片从小到大或从大到小进行缩放,给人一种逐渐放大或缩小的感觉。(使用CSS的
transform属性和scale()) -
旋转效果:每张图片围绕中心点进行旋转,形成连续的旋转效果。(使用CSS的
transform属性和rotate())
实现轮播图的基本步骤:
-
创建一个包含轮播图图片的HTML结构,可以使用
<ul>和<li>标签来创建一个图片列表。 -
使用CSS样式设置轮播图容器的宽度和高度,以及图片列表的宽度和高度,并设置
overflow: hidden来隐藏超出容器范围的图片。 -
使用JavaScript获取轮播图容器和图片列表,并设置初始的索引值为0。
-
创建一个函数来切换图片,可以通过改变图片列表的
left属性值来实现。可以使用transform属性或marginLeft属性来实现图片的平滑过渡。 -
创建一个定时器来自动切换图片,可以使用
setInterval函数来设置定时器,每隔一段时间调用切换图片的函数。 -
监听轮播图容器的鼠标移入和移出事件,当鼠标移入时清除定时器,当鼠标移出时重新设置定时器。
-
监听轮播图容器的左右箭头点击事件,分别调用切换图片的函数来切换到上一张或下一张图片。
-
可以根据需要添加其他功能,比如添加指示器来显示当前图片的索引,点击指示器可以切换到对应的图片。
1. 使用原生js实现轮播图
HTML:
<div class="carousel"><div class="slides"><img src="image1.jpg" alt="Image 1"><img src="image2.jpg" alt="Image 2"><img src="image3.jpg" alt="Image 3"></div><button class="prev">Previous</button><button class="next">Next</button>
</div>
CSS:
.carousel {position: relative;width: 500px;height相关文章:
轮播图的五种写法(原生、vue2、vue3、react类组件,react函数组件)
轮播图效果是一种在网页或应用程序中展示多张图片或内容的方式,通常以水平或垂直的方式循环播放。本文使用原生、vue2、vue3、react类组件,react函数组件五种写法实现了简单的轮播图效果,需要更多轮播效果需要再增加样式或者动画。 淡入淡出效果:每张图片渐渐淡入显示,然后…...
【MySQL】高度为2和3时B+树能够存储的记录数量的计算过程
文章目录 题目答案高度为2时的B树高度为3时的B树总结 GPT4 对话过程 题目 InnoDB主键索引的Btree在高度分别为 2 和 3 时,可以存储多少条记录? 答案 高度为2时的B树 计算过程: 使用公式 ( n 8 ( n 1 ) 6 16 1024 ) (n \times 8 …...
软件著作书 60页代码轻松搞定!(附exe和代码)
最近做了一个软件,准备去申请软件著作书,看着那60页的文档,确实难搞,不过幸好会用一点点python,就自己用python写了一个读取所有文件代码的程序,使用起来也很简单,过来分享一下 链接࿱…...
阿里文档类图像的智能识别,文档分类自定义分类器
阿里云文档类图像智能识别服务为用户提供了强大的文档处理能力,可以将文档图像中的文本内容、表格数据和结构化信息自动识别并提取出来。而自定义分类器则允许用户根据自己的需求,训练出更适合自己场景的文档分类模型。本文将详细介绍阿里云文档类图像智…...
256.【华为OD机试真题】会议室占用时间(区间合并算法-JavaPythonC++JS实现)
🚀点击这里可直接跳转到本专栏,可查阅顶置最新的华为OD机试宝典~ 本专栏所有题目均包含优质解题思路,高质量解题代码(Java&Python&C++&JS分别实现),详细代码讲解,助你深入学习,深度掌握! 文章目录 一. 题目二.解题思路三.题解代码Python题解代码JAVA题解…...
人工智能学习与实训笔记(三):神经网络之目标检测问题
人工智能专栏文章汇总:人工智能学习专栏文章汇总-CSDN博客 目录 三、目标检测问题 3.1 目标检测基础概念 3.1.1 边界框(bounding box) 3.1.2 锚框(Anchor box) 3.1.3 交并比 3.2 单阶段目标检测模型YOLOv3 3.2…...
SSM框架,Spring-ioc的学习(下)
拓展:在xml文件中读取外部配置文件 例:若要导入外部配置文件jdbc.properties <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"<http://www.springframework.org/schema/beans>"xmlns:xsi"&l…...
【AIGC】Stable Diffusion的模型微调
为什么要做模型微调 模型微调可以在现有模型的基础上,让AI懂得如何更精确生成/生成特定的风格、概念、角色、姿势、对象。Stable Diffusion 模型的微调方法通常依赖于您要微调的具体任务和数据。 下面是一个通用的微调过程的概述: 准备数据集…...
VNCTF 2024 Web方向 WP
Checkin 题目描述:Welcome to VNCTF 2024~ long time no see. 开题,是前端小游戏 源码里面发现一个16进制编码字符串 解码后是flag CutePath 题目描述:源自一次现实渗透 开题 当前页面没啥好看的,先爆破密码登录试试。爆破无果…...
第11章 GUI
11.1 Swing概述 Swing是Java语言开发图形化界面的一个工具包。它以抽象窗口工具包(AWT)为基础,使跨平台应用程序可以使用可插拔的外观风格。Swing拥有丰富的库和组件,使用非常灵活,开发人员只用很少的代码就可以创建出…...
综合项目---博客
一.运行环境 192.168.32.132 Server-Web linux Web 192.168.32.133 Server-NFS-DNS linux NFS/DNS 基础配置 1.配置主机名静态ip 2.开启防火墙并配置 3.部分开启selinux并配置 4.服务器之间通过阿里云进行时间同步 5.服务器之间实现ssh免密…...
leetcode(矩阵)74. 搜索二维矩阵(C++详细解释)DAY7
文章目录 1.题目示例提示 2.解答思路3.实现代码结果 4.总结 1.题目 给你一个满足下述两条属性的 m x n 整数矩阵: 每行中的整数从左到右按非严格递增顺序排列。每行的第一个整数大于前一行的最后一个整数。 给你一个整数 target ,如果 target 在矩阵中…...
超详细||YOLOv8基础教程(环境搭建,训练,测试,部署看一篇就够)(在推理视频中添加FPS信息)
一、YOLOv8环境搭建 这篇文章将跳过基础的深度学习环境的搭建,如果没有完成的可以看我的这篇博客:超详细||深度学习环境搭建记录cudaanacondapytorchpycharm-CSDN博客 1. 在github上下载源码: GitHub - ultralytics/ultralytics: NEW - YO…...
LeetCode171. Excel Sheet Column Number
文章目录 一、题目二、题解 一、题目 Given a string columnTitle that represents the column title as appears in an Excel sheet, return its corresponding column number. For example: A -> 1 B -> 2 C -> 3 … Z -> 26 AA -> 27 AB -> 28 … Exa…...
pycharm创建py文件,自动带# -*- coding:utf-8 -*-
File–Settings...
希捷与索尼集团合作生产HAMR写头激光二极管
最近有报道指出,希捷(Seagate)在生产其采用热辅助磁记录(HAMR)技术的大容量硬盘时,并非所有组件都在内部制造。根据日经新闻的一份新报告,希捷已与索尼集团合作,由索尼为其HAMR写头生…...
电脑竖屏显示了怎么回复原状
电脑屏幕变成这样 怎么恢复原状? 1、登录系统 2、在桌面上空白点击鼠标右键 3、在右键菜单中选择“屏幕分辨率”,左键点击打开 4、在窗口中“方向”位置选择“横向” 5、保存设置win7桌面即可恢复到正常状态...
Elasticsearch从入门到精通
目录 🧂1.简单介绍 🥓2.安装与下载 🌭3.安装启动es 🍿4.安装启动kibana 🥞5.初步检索 🧈6.进阶检索 🫓7.Elasticsearch整合 1.简单介绍🚗🚗🚗 Elat…...
Halcon 相机标定
文章目录 算子单相机标定单相机标定畸变的矫正 算子 gen_caltab 生成标定文件 gen_caltab(::XNum,YNum,MarkDist,DiameterRatio,CalTabDescrFile,CalTabPSFile :) 算子来制作一个标定板XNum 每行黑色标志圆点的数量。YNum 每列黑色标志圆点的数…...
【JavaScript】深浅拷贝
JavaScript中复制对象有深拷贝和浅拷贝两种方式 浅拷贝:浅拷贝只复制对象的第一层属性,而不复制嵌套对象的引用。这意味着如果原始对象包含嵌套对象,浅拷贝后的对象仍然会共享这些嵌套对象的引用。可以使用`Object.assign()`或展开运算符(`...`)来进行浅拷贝。 // 浅拷贝示…...
相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了: 这一篇我们开始讲: 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下: 一、场景操作步骤 操作步…...
基于服务器使用 apt 安装、配置 Nginx
🧾 一、查看可安装的 Nginx 版本 首先,你可以运行以下命令查看可用版本: apt-cache madison nginx-core输出示例: nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...
渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止
<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet: https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...
2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面
代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口(适配服务端返回 Token) export const login async (code, avatar) > {const res await http…...
关于 WASM:1. WASM 基础原理
一、WASM 简介 1.1 WebAssembly 是什么? WebAssembly(WASM) 是一种能在现代浏览器中高效运行的二进制指令格式,它不是传统的编程语言,而是一种 低级字节码格式,可由高级语言(如 C、C、Rust&am…...
css3笔记 (1) 自用
outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size:0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格ÿ…...
全志A40i android7.1 调试信息打印串口由uart0改为uart3
一,概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本:2014.07; Kernel版本:Linux-3.10; 二,Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01),并让boo…...
push [特殊字符] present
push 🆚 present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中,push 和 present 是两种不同的视图控制器切换方式,它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...
【 java 虚拟机知识 第一篇 】
目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...
HTML前端开发:JavaScript 获取元素方法详解
作为前端开发者,高效获取 DOM 元素是必备技能。以下是 JS 中核心的获取元素方法,分为两大系列: 一、getElementBy... 系列 传统方法,直接通过 DOM 接口访问,返回动态集合(元素变化会实时更新)。…...
