构建滑块组件_第 1 部分

前言

● 本次将和大家一起学习实现滑块的功能
在这里插入图片描述

● 由于这有些错乱,我们将用图片来代替,以实现功能
在这里插入图片描述

● 这里我们简单的说一下原理,如下图所示,通过改变tanslateX的值来达到滑动的效果,所以最核心的就是我们需要通过JavaScript来改变图片的切换
在这里插入图片描述

实例展示

● 首先,我们还是来获取我们需要的HTML元素,将其存储到变量中

const slides = document.querySelectorAll('.slide');
const slider = document.querySelector('.slider');

● 因为图片太大了,会被溢出,我们来缩小一下图片

slider.style.transform = 'scale(0.5)';

● 然后我们遍历滑块的内容,并且根据当前每个元素逐渐递增偏移的值,第一个0%,第二个100%,200%,300%

slides.forEach((s, i) => (s.style.transform = `translateX(${100 * i}%)`));

● 我们还需要获取按钮元素,存储到变量中

const btnLeft = document.querySelector('.slider__btn--left');
const btnRight = document.querySelector('.slider__btn--right');

● 接着我们就要来写点击事件了

let curSlide = 0;btnRight.addEventListener('click', function () {curSlide++;slides.forEach((s, i) => (s.style.transform = `translateX(${100 * (i - curSlide)}%)`));
})

这里我们定义了一个变量,用它来每点击一次加1,这样当第一次点击的时候前一张图片translateX的值就是-100%,然后第二张0%,第三张100%,第四张200%,这要就能改变图片的位置了;

● 但是这样当我们滑动到最后一张图片的时候,并不会跳到第一个元素中,后面会一直往后移动,图片区域就是空白的了,所以我们可以告诉我们图片元素的长度,当达到图片长度的时候,将计数归零

const maxSlide = slides.length;
btnRight.addEventListener('click', function () {if (curSlide === maxSlide - 1) {curSlide = 0;} else { curSlide++; }slides.forEach((s, i) => (s.style.transform = `translateX(${100 * (i - curSlide)}%)`));
})

● 接下来,我们可以看到我们的代码非常的乱,并且有重复项目,现在就来重构一下代码,将相同的代码封装成函数

const slides = document.querySelectorAll('.slide');
const btnLeft = document.querySelector('.slider__btn--left');
const btnRight = document.querySelector('.slider__btn--right');
const slider = document.querySelector('.slider');
let curSlide = 0;
const maxSlide = slides.length;
slider.style.transform = 'scale(0.5)';const goToSlice = function (slide) {slides.forEach((s, i) => (s.style.transform = `translateX(${100 * (i - slide)}%)`));
}goToSlice(0);btnRight.addEventListener('click', function () {if (curSlide === maxSlide - 1) {curSlide = 0;} else { curSlide++; }goToSlice(curSlide);})● 然后我们就来处理向左的点击事件
btnLeft.addEventListener('click', function () {curSlide--;goToSlice(curSlide);
})

● 但是,这样还是会有之前向右的那个问题,所以我们要解决,当是第一个图片时候,向左滑动的话,会跳到第四个图片

btnLeft.addEventListener('click', function () {if (curSlide === 0) {curSlide = maxSlide - 1;} else {curSlide--;}goToSlice(curSlide);
})

● 接着,我们再次重构代码,完整代码如下

const slides = document.querySelectorAll('.slide');
const btnLeft = document.querySelector('.slider__btn--left');
const btnRight = document.querySelector('.slider__btn--right');
let curSlide = 0;
const maxSlide = slides.length;const goToSlice = function (slide) {slides.forEach((s, i) => (s.style.transform = `translateX(${100 * (i - slide)}%)`));
}
goToSlice(0);const nextSlide = function () {if (curSlide === maxSlide - 1) {curSlide = 0;} else { curSlide++; }goToSlice(curSlide);
}const prevSlide = function () {if (curSlide === 0) {curSlide = maxSlide - 1;} else {curSlide--;}goToSlice(curSlide);
}btnRight.addEventListener('click', nextSlide)btnLeft.addEventListener('click', prevSlide)

在这里插入图片描述

但是,这个并不是完整的功能,我们还需要实现类似与下图的功能,等下篇文章再来实现吧
在这里插入图片描述

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

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

相关文章

Yarn Plug‘n‘Play:现代化JavaScript依赖管理的革命

标题:Yarn Plug’n’Play:现代化JavaScript依赖管理的革命 Yarn的Plug’n’Play(简称PnP)模式是一种创新的依赖管理技术,旨在提高JavaScript项目的性能和可靠性。PnP模式通过重新思考依赖安装和解析的方式&#xff0c…

FreeBSD@ThinkPad x250因电池耗尽关机后无法启动的问题存档

好几次碰到电池耗尽FreeBSD关机,再启动,网络通了之后到了该出Xwindows窗体的时候,屏幕灭掉,网络不通,只有风扇在响,启动失败。关键是长按开关键后再次开机,还是启动失败。 偶尔有时候重启到单人…

如何使用深度学习进行实时目标检测:速度与精度的双重挑战

如何使用深度学习进行实时目标检测:速度与精度的双重挑战 目标检测作为计算机视觉领域的核心任务之一,其目的是在图像或视频中识别和定位感兴趣的对象。随着深度学习技术的发展,基于深度学习的目标检测算法在实时性、准确性方面取得了显著进…

dolphinscheduler-搭建本地环境

后端搭建开发环境 一. 基础插件 maven(3.9.7) maven必须升级到3.9.x版本,不然打包会异常jdk(1.8)zookeeper(3.8.4)mysql或者pg(使用mysql) 二. 代码修改点 链接&…

Swagger的原理及应用详解(八)

本系列文章简介: 在当今快速发展的软件开发领域,特别是随着微服务架构和前后端分离开发模式的普及,API(Application Programming Interface,应用程序编程接口)的设计与管理变得愈发重要。一个清晰、准确且易…

NLP篇1

场景:假设给你一篇文章。 目标:说白了,就是数学的分类。但是如何实现分类呢。下面将逐步一 一 分析与拆解。先把目标定好了和整体框架定好了。而不是只见树木而不见森林。 情感分类(好评、差评,中性) 整体…

掌握 Postman 脚本:入门指南

在探索 API 测试自动化环墁下,Postman 脚本显现其强大功能和灵活性,它不仅仅是 API 测试的工具,更是一个综合性的自动化平台。 Postman 脚本简介 Postman 允许用户在 API 请求生命周期中运行 JavaScript 脚本,这些脚本分为以下三…

Java:Java发展史

Java发展史 Java,作为一门广泛使用的编程语言,自其诞生以来,已经走过了数十年的发展历程,并对全球的软件开发领域产生了深远的影响。Java的发展史可以大致分为以下几个阶段: 起源与诞生(1991-1995年&#…

【C++题解】1413. 切割绳子

问题:1413. 切割绳子 类型:贪心,二分,noip2017普及组初赛 题目描述: 有 n 条绳子,每条绳子的长度已知且均为正整数。绳子可以以任意正整数长度切割,但不可以连接。现在要从这些绳子中切割出 m…

C++11|列表初始化 声明

目录 一、C11简介 二、列表初始化 2.1{}初始化 2.2std::initializer_list 2.2.1原理 2.2.2使用场景 三、声明 3.1auto && typeid().name() 3.2decltype 一、C11简介 小故事: 1998年是C标准委员会成立的第一年,本来计划以后每5年实际需…

React面试题之setState的执行机制

setState 是 React 中用于更新组件状态的方法。 1. setState 的基本用法 在 React 类组件中,你可以使用 setState 来更新组件的状态。setState 接受一个对象或一个返回对象的函数作为参数 2. 合并状态更新 当调用 setState 时,React 不会立即更新 th…

Java三个线程轮流打印20次

如何实现Java多线程交替打印20次数据? 使用synchronized共享信号量 解题思路,synchronized拿到锁,检查线程是否要执行业务代码,如果是,打印,并更改共享信号量,如果不是,wait交出锁…

AndroidKille不能用?更新apktool插件-cnblog

AndroidKiller不更新插件容易报错 找到apktool管理器 填入apktool位置,并输入apktool名字 选择默认的apktool版本 x掉,退出重启 可以看到反编译完成了

巨人的数量

题目 巨人是像泰坦那么大的人形生物,并且对人类虎视眈眈。人类筑起三堵圆形高墙,里外三层用来抵御巨人的侵袭。调查兵团是一只大约十五人的队伍,负责高墙外围的警戒,一旦发现来犯的巨人,必须立刻向上级汇报。上级会对…

Shell echo命令

Shell echo命令 在Shell编程中,echo命令是一个常用的内置命令,用于在终端或控制台上显示文本或变量的值。它是与用户交互的一种基本方式,经常用于输出信息、创建文件内容或与脚本的其他部分进行通信。本文将详细介绍echo命令的用法、选项和实际应用示例。 基本用法 echo命…

JavaDS预备知识

集合框架 Java 集合框架 Java Collection Framework ,又被称为容器 container ,是定义在 java.util 包下的一组接口 interfaces和其实现类 classes 。 其主要表现为将多个元素 element 置于一个单元中,对数据进行创建(Create)、读取(Retrieve…

振动分析-12-轴承数据库之深度学习一维故障分类CNN-Transformer

Python轴承故障诊断 (15)基于CNN-Transformer的一维故障信号识别模型 1 制作数据集 import pandas as pd filename = "CWRU_1797.csv" df = pd.read_csv(filename)from sklearn.model_selection import train_test_split df_x=df.drop(labels=1024,axis=1)

【论文阅读】-- Interactive Horizon Graphs:改进多个时间序列的紧凑可视化

Interactive Horizon Graphs: Improving the Compact Visualization of Multiple Time Series 摘要1 引言2 相关工作2.1 多个时间序列的可视化2.2 缩减折线图 (RLC)2.3 地平线图 (HG)2.4 大尺度和小尺度变异数据集2.5 多个时间序列…

掌握Postman拦截器:揭秘API调试的高级技巧

标题:掌握Postman拦截器:揭秘API调试的高级技巧 Postman是一款流行的API开发工具,它提供了丰富的特性来简化API的创建、测试和调试过程。拦截器(Interceptor)是Postman中一个强大的功能,允许用户捕获和修改…

HEX文件格式

HEX文件格式是一种用于存储和传输数据到嵌入式系统(如单片机)的文件格式。以下是关于HEX文件格式的详细解释: 一、文件概述 HEX文件,全称为Intel HEX,是一种ASCII文本文件,用于记录文本行的数据。它常用于…