使用 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,一经查实,立即删除!

相关文章

Linux系统的研究

摘要&#xff1a; Linux是一个开源的Unix-like操作系统&#xff0c;由林纳斯托瓦兹在1991年首次发布。由于其开放性和灵活性&#xff0c;Linux已成为许多企业和个人用户的重要选择。本文将探讨Linux系统的历史、特点、应用领域以及优缺点。 一、引言 Linux系统的开发始于1980年…

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…

JVM虚拟机:JVM调优第一步,了解JVM常用命令行参数

本文重点 从本文课程开始&#xff0c;我们将用几篇文章来介绍JVM中常用的命令行的参数&#xff0c;这个非常重要&#xff0c;第一我们可以通过参数了解JVM的配置&#xff0c;第二我们可以通过参数完成对JVM的调参。以及后面的JVM的调优也需要用到这些参数&#xff0c;所以我们…

轻松入门自然语言处理系列 项目3 基于Linear-CRF的医疗实体识别

文章目录 前言一、项目概况1.项目描述2.数据描述3.项目框架二、核心技术1.实体识别数据标注2.文本特征工程3.CRF模型4.BiLSTM-CRF模型三、项目实施1.读取数据2.数据标注3.文本特征工程4.模型训练5.模型评估6.BiLSTM-CRF总结前言 本文主要介绍了以Linear-CRF为基础模型进行医疗…

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++中std::string的=,+,+=使用过程中的问题

1. 调用构造函数时的运算符不支持int&#xff0c;char类型的操作数 string str1 a; //error 这是一个构造函数。C中string是一个类&#xff0c;内部封装了char *来管理这个字符串。 string的构造函数&#xff1a; string() // 创建一个空的字符串string(const char * s)…

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

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

GlobalWindow和Evictor的常用组合使用

背景 在平时的flink开发中&#xff0c;一旦我们使用到GlobalWindow&#xff0c;那么肯定也就意味着会搭配Evictor以及Tigger一起使用&#xff0c;只有这样才能触发窗口处理函数并且窗口内的元素数量限定在特定的范围内 GlobalWindow和Evictor常见组合用法 先看一下具体的搭配…

【linux】基本指令(中篇)

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

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

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

Vite CSS Module 优雅的处理样式隔离

今天介绍的是我写的一个vite插件vite-plugin-oneof-css-module&#xff0c;该插件主要处理scss module&#xff0c;那它适用于什么场景呢&#xff1f; 1. 最大的特点就是使用scss module 可以不用写 .module.scss 了 2. 可以根据不同的文件夹或文件分别进行不同的处理&#x…

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

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

AtCoder Beginner Contest 330 题解

目录 A - Counting PassesB - Minimize Abs 1C - Minimize Abs 2D - Counting LsE - Mex and Update A - Counting Passes 原题链接 题目描述 给定N个数和一个整数L&#xff0c;输出大于等于L的数的个数。 public static void solve() throws IOException{int n readInt(), m…