使用 HTML、CSS 和 JavaScript 创建图像滑块

使用 HTML、CSS 和 JavaScript 创建轮播图

在本文中,我们将讨论如何使用 HTMLCSSJavaScript 构建轮播图。我们将演示两种不同的创建滑块的方法,一种是基于opacity的滑块,另一种是基于transform的。

创建 HTML

我们首先从 HTML 代码开始:

<div class="slider"><div class="slide"><img src="images/1.jpg" alt="demo image" /></div><div class="slide"><img src="images/2.jpg" alt="demo image" /></div>. . .<a class="prev" onclick="prevSlide()">&lt;</a><a class="next" onclick="nextSlide()">&gt;</a>
</div>

.slider元素充当整个图像滑块的容器。
单独的幻灯片.slide元素与图像一起封装在容器中。
滑块导航由.prev.next两个按钮元素控制。

我们还为导航设置了onclick事件监听器,当点击它们时,相应的 JavaScript 函数将被激活。

添加样式

为了更轻松地设置元素样式,建议删除所有元素的默认内边距和边距,并将其box-sizing属性设置为border-box。这允许根据元素的尺寸border-box而不是content-box来调整元素的大小。

* {padding: 0px;margin: 0px;box-sizing: border-box;
}

然后添加.slider样式。

.slider {width: 500px;height: 300px;margin: auto;overflow: hidden;transform: translateY(50%);
}

以及.slide

.slide {position: absolute;top: 50%;transform: translateY(-50%);
}img {width: 100%;height: auto;
}

最后,我们还将导航按钮放置在.slider容器的左侧和右侧。

.prev,
.next {cursor: pointer;background-color: #333;color: #fff;padding: 10px 20px;position: absolute;top: 50%;transform: translateY(-50%);text-decoration: none;
}.prev {left: 0;
}.next {right: 0;
}

添加 JavaScript 代码

现在,让我们仔细看看.slide样式。

.slide {position: absolute;top: 50%;transform: translateY(-50%);
}

通过使用position: absolute,我们将所有.slide元素放置在一个位置,彼此堆叠。我们可以使用浏览器中的开发人员工具进行验证。

在这里插入图片描述

基于opacity的滑块

现在我们需要做的就是将当前幻灯片的opacity设为100,同时将所有其他幻灯片的opacity设为0。

为了实现幻灯片效果,我们可以编写 JavaScript 代码,以便每当单击导航链接时,“当前幻灯片”都会相应调整。

我们首先将所有幻灯片的opacity设置0。

.slide {position: absolute;top: 50%;transform: translateY(-50%);opacity: 0;transition: opacity 1s ease;
}

然后添加以下 JavaScript 代码。

const slides = document.querySelectorAll(".slide");
let currentSlide = 0;function showSlide(index) {slides.forEach((slide, i) => {if (i === index) {slide.style.opacity = 100;} else {slide.style.opacity = 0;}});
}function nextSlide() {currentSlide = (currentSlide + 1) % slides.length;showSlide(currentSlide);
}function prevSlide() {currentSlide = (currentSlide - 1 + slides.length) % slides.length;showSlide(currentSlide);
}showSlide(currentSlide);

第 1 行选择所有.slide,并将它们分配给变量slides

第 2 行将变量初始化currentSlide为0,它指向图像滑块中的第一张幻灯片。

现在,我们来看看nextSlide()函数。

function nextSlide() {currentSlide = (currentSlide + 1) % slides.length;showSlide(currentSlide);
}

在本例中,slides.length给出了滑块中幻灯片的总数,当执行此函数(通过单击链接.next)时,currentSlide将进行相应调整。

例如,当函数第一次执行时,假设总共有 5 张幻灯片:

currentSlide = (0 + 1) % 5 = 1

但当执行第五次时,currentSlide将重置回0。

currentSlide = (4 + 1) % 5 = 0

prevSlide()函数的工作原理类似。

function prevSlide() {currentSlide = (currentSlide - 1 + slides.length) % slides.length;showSlide(currentSlide);
}

currentSlide是4时,它指向第五张幻灯片:

currentSlide = (4 - 1 + 5) % 5 = 3

currentSlide是0时,它指向第一张幻灯片:

currentSlide = (0 - 1 + 5) % 5 = 4

然后变量currentSlide将作为showSlide()的参数index

function showSlide(index) {slides.forEach((slide, i) => {if (i === index) {slide.style.opacity = 100;} else {slide.style.opacity = 0;}});
}

此函数迭代存储在slides中的所有幻灯片,如果迭代索引 ( i) 与currentSlide索引 ( index) 匹配,则该幻灯片将被设置opacity为100。如果没有,那opacity就是0。

基于transform

我们将其称为图像滑块,但从最终结果中可以看到,没有太多滑动,因为过渡是基于不透明度的。我们如何调整代码,以便当单击导航链接时,图像实际上滑到下一个?

我们必须进行两项更改。首先,.slide 必须水平排列在.slider容器后面,而不是相互堆叠。我们可以将.slider容器视为一个窗口。每次单击链接时,.slide 都会向左或向右移动以显示上一张或下一张图像。

.slider {width: 500px;height: 300px;margin: auto;overflow: hidden;transform: translateY(50%);display: flex;align-items: center;
}.slide {flex: 0 0 100%;transition: transform 1s ease;
}

我们使用弹性布局来实现这种效果。flex: 0 0 100%将每个slide的宽度设置为100%。

接下来,调整showSlide()功能。

function showSlide(index) {slides.forEach((slide, i) => {const slideWidth = slide.clientWidth;slide.style.transform = `translateX(-${index * slideWidth}px)`;});
}

再次假设总共有五张幻灯片,并且每张幻灯片都是500px宽。当索引为3时,index * slideWidth将是1500,并将translateX(-1500px)所有.slide 向左移动1500像素,显示第四个图像。

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

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

相关文章

yolo系列中的一些评价指标说明

文章目录 一. 混淆矩阵二. 准确度(Accuracy)三. 精确度(Precision)四. 召回率(Recall)五. F1-score六. P-R曲线七. AP八. mAP九. mAP0.5十. mAP[0.5:0.95] 一. 混淆矩阵 TP (True positives)&#xff1a;被正确地划分为正例的个数&#xff0c;即实际为正例且被分类器划分为正例…

Redis-主从与哨兵架构

Jedis使用 Jedis连接代码示例&#xff1a; 1、引入依赖 <dependency><groupId>redis.clients</groupId><artifactId>jedis</artifactId><version>2.9.0</version> </dependency> 2、访问代码 public class JedisSingleTe…

App 设计工具

目录 说明 打开 App 设计工具 示例 创建 App 创建自定义 UI 组件 打开现有 App 文件 打包和共享 App 本文主要讲述以交互方式创建 App。 说明 App 设计工具是一个交互式开发环境&#xff0c;用于设计 App 布局并对其行为进行编程。 可以使用 App 设计工具&#xff1a…

【黑马甄选离线数仓day05_核销主题域开发】

1. 指标分类 ​ 通过沟通调研&#xff0c;把需求进行分析、抽象和总结&#xff0c;整理成指标列表。指标有原子指标、派生指标、 衍生指标三种类型。 ​ 原子指标基于某一业务过程的度量值&#xff0c;是业务定义中不可再拆解的指标&#xff0c;原子指标的核心功能就是对指标…

Python武器库开发-前端篇之CSS元素(三十二)

前端篇之CSS元素(三十二) CSS 元素是一个网页中的 HTML 元素&#xff0c;包括标签、类和 ID。它们可以通过 CSS 选择器选中并设置样式属性&#xff0c;以使网页呈现具有吸引力和良好的可读性。常见的 HTML 元素包括 div、p、h1、h2、span 等&#xff0c;它们可以使用 CSS 设置…

值得看的书--《全宋词》节选

(https://img-blog.csdnimg.cn/5d5fe2844f6646b5b7b415f0a9e80f6c.jpg)

什么是自动化测试po模式,po分层如何实现?

一、什么是PO模式 全称&#xff1a;page object model 简称&#xff1a;POM/PO PO模式最核心的思想是分层&#xff0c;实现松耦合&#xff01;实现脚本重复使用&#xff0c;实现脚本易维护性&#xff01; 主要分三层&#xff1a; 1.基础层BasePage&#xff1a;封装一些最基…

自监督LIGHTLY SSL教程

Lightly SSL 是一个用于自监督学习的计算机视觉框架。 github链接&#xff1a;GitHub - lightly-ai/lightly: A python library for self-supervised learning on images. Documentation&#xff1a;Documentation — lightly 1.4.20 documentation 以下内容主要来自Documen…

作为Java初学者,如何快速学好Java?

作为Java初学者&#xff0c;如何快速学好Java&#xff1f; 开始的一些话 对于初学者来说&#xff0c;编程的学习曲线可能相对陡峭。这是正常现象&#xff0c;不要感到沮丧。逐步学习&#xff0c;循序渐进。 编程是一门实践性的技能&#xff0c;多写代码是提高的唯一途径。尽量…

C++初阶(十二)string的模拟实现

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、string类的模拟实现1、构造、拷贝构造、赋值运算符重载以及析构函数2、迭代器类3、增删查…

【linux】基本指令(中篇)

echo指令 将引号内容打印到显示屏上 输出的重定向 追加的重定向 输出的重定向 我们学习c语言的时候当以写的方式创建一个文件&#xff0c;就会覆盖掉该文件之前的内容 当我们以追加的方式打开文件的时候&#xff0c;原文件内容不会被覆盖而是追加 more指令 10.more指令…

车载电子电器架构 ——电子电气架构设计方案概述

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 注:本文1万多字,认证码字,认真看!!! 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证…

基于Pytest+Requests+Allure实现接口自动化测试

一、整体结构 框架组成&#xff1a;pytestrequestsallure 设计模式&#xff1a; 关键字驱动 项目结构&#xff1a; 工具层&#xff1a;api_keyword/ 参数层&#xff1a;params/ 用例层&#xff1a;case/ 数据驱动&#xff1a;data_driver/ 数据层&#xff1a;data/ 逻…

基于51单片机的人体追踪可控的电风扇系统

**单片机设计介绍&#xff0c; 基于51单片机超声波测距汽车避障系统 文章目录 一 概要概述硬件组成工作原理优势应用场景总结 二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 # 基于51单片机的人体追踪可控的电风扇系统介绍 概述 该系统是基于51…

AI 视频 | Stable Video Diffusion 来了!(附体验地址)

1. 介绍 11 月 21 日&#xff0c;Stability AI 推出了 Stable Video Diffusion&#xff0c;这是 Stability AI 的第一个基于图像模型 Stable Diffusion 的生成式视频基础模型。 目前 Stability AI 已经在 GitHub 上开源了 Stable Video Diffusion 的代码&#xff0c;在 Huggin…

c语言刷题12周(1~5)

输入年月日&#xff0c;显示这一天是这一年的第几天&#xff0c;保证输入日期合法。 题干输入年月日&#xff0c;显示这一天是这一年的第几天&#xff0c;保证输入日期合法。输入样例2022 1 1 2022 12 31 2024 12 31 2022 4 5输出样例2022-1 2022-365 2024-366 2022-9…

【数据结构实验】图(二)将邻接矩阵存储转换为邻接表存储

文章目录 1. 引言2. 邻接表表示图的原理2.1 有向权图2.2 无向权图2.3 无向非权图2.1 有向非权图 3. 实验内容3.1 实验题目&#xff08;一&#xff09;数据结构要求&#xff08;二&#xff09;输入要求&#xff08;三&#xff09;输出要求 3.2 算法实现 4. 实验结果 1. 引言 图是…

node.js解决输出中文乱码问题

个人简介 &#x1f468;&#x1f3fb;‍&#x1f4bb;个人主页&#xff1a;九黎aj &#x1f3c3;&#x1f3fb;‍♂️幸福源自奋斗,平凡造就不凡 &#x1f31f;如果文章对你有用&#xff0c;麻烦关注点赞收藏走一波&#xff0c;感谢支持&#xff01; &#x1f331;欢迎订阅我的…

shell脚本循环语句

目录 一. 循环语句 1. 循环条件 2. 循环次数 3. 循环命令区别 4. for 循环 ①. 第一种语法 ②. 第二种语法 5. while 循环 6. until 循环 二. 跳出循环 1. break 结束循环 2. continue 结束循环 3. exit 结束循环 三. 补充 1. 偶数的表示 2. 奇数的表示 一. 循环…

【测试开发工程师】TestNG测试框架零基础入门(上)

哈喽大家好&#xff0c;我是小浪。那么今天是一期基于JavaTestNG测试框架的入门教学的博客&#xff0c;从只会手工测试提升到自动化测试&#xff0c;这将对你的测试技术提升是非常大的&#xff0c;有助于我们以后在找工作、面试的时候具备更大的竞争力~ 文章目录 一、什么是T…