前端：HTML+CSS+JavaScript实现轮播图2

news2024/10/7 16:21:18

前端：HTML+CSS+JavaScript实现轮播图2

        • 1. 和之前版本的区别
        • 2. 实现原理
        • 3. 针对上述的改进
        • 3. 参考代码

1. 和之前版本的区别

之前发布的那篇关于轮播图的文章在这：前端：HTML+CSS+JavaScript实现轮播图，只能说存在问题吧！比如2、3实现效果是用了两个定时器实现的，虽然也达到了那种效果，但是从一些方面来说总有点繁琐吧！比如，在一定时间内图片移动像素的计算等。现在这个不需要计算，直接用一个定时器即可实现，我想说现在这个版本和各位在浏览器上看到那种效果实现原理应该差不多。

请添加图片描述
虽然没有给出相应的点击事件哈！

2. 实现原理

利用相对定位relative、绝对定位absolute、定时器、transition
结合relative、absolute来进行图片布局，用定时器来实现图片轮播间隔效果，用transition来实现每张图片移动过渡效果。
在这里插入图片描述
初始实现效果如上，这不符合我们想要的那种效果，这种是通过定时器每隔几秒变化每张图片的left的值的效果。这并不怎么美观，因为图片过渡效果并不符合我们的要求，但是如果显示的有多张图片，那么倒还不错，如下：
在这里插入图片描述

3. 针对上述的改进

在这里插入图片描述
就是把所有图片从左到右进行排列，外层用一个标签元素包裹，每隔一段时间变换外层的标签元素的left属性值。

3. 参考代码

这个是需要改进的代码哈！
main.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="./main.css">
</head>
<body>
	<div class="main">
	</div>
</body>
<script type="text/javascript" src="main.js"></script>
</html>

main.css

*{
	padding: 0;
	margin: 0;
}

ul{
	list-style: none;
}

.main{
	width: 500px;
	height: 300px;
	margin: 0 auto;
	position: relative;
}

.dot{
	height: 10px;
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
}

.dot span{
	height: 100%;
	float: left;
	width: 10px;
	border-radius: 50%;
	margin-left: 10px;
	cursor: pointer;
}

.dot span:first-child{
	margin-left: 0;
}

.red{
	background-color: red;
}

.white{
	background-color: white;
}

.main ul{
	position: relative;
	height: 100%;
	width: 100%;
	overflow-x: hidden;
}

.main ul li{
	position: absolute;
	top: 0;
	transition: all 0.3s;
	width: 100%;
	height: 100%;
}

.main ul li img{
	width: 100%;
}

main.js



// 输入图片链接数组
const img_arr = [
	'https://i0.hdslb.com/bfs/banner/627984a9617a35c7e4366e0c74baf29ef3aa96ae.png@976w_550h_1c_!web-home-carousel-cover.avif',
	'https://i0.hdslb.com/bfs/banner/3464f3b055107b2b54b9443e02c43448c0915866.png@976w_550h_1c_!web-home-carousel-cover.avif',
	'https://i0.hdslb.com/bfs/banner/ff7d11c786ddd45c218696c3c6b19c69a71883d7.jpg@976w_550h_1c_!web-home-carousel-cover.avif',
	'https://i0.hdslb.com/bfs/sycp/creative_img/202311/74214ce12c94ba104322e2be463ec6f7.jpg@976w_550h_1c_!web-home-carousel-cover.avif'
];

const mainEle = document.querySelector('.main');
var _htmlStr = '';
img_arr.forEach(function(ele){
	_htmlStr += `<li>
		<img src="${ele}">
	</li>`
})

var _htmlStr2 = '';
for(let i=0;i<img_arr.length;i++){
	_htmlStr2 += '<span></span>'
}

var _htmlStr2 = `<div class="dot">${_htmlStr2}</div>`;
_htmlStr = `<ul>${_htmlStr}</ul>${_htmlStr2}`;

mainEle.innerHTML = _htmlStr;

const img_width = 500;

const elements = document.querySelectorAll('.main ul li');
const elements2 = document.querySelectorAll('.dot span');
elements.forEach(function(ele,index){
	ele.style.left = index * img_width + 'px';
})

elements2.forEach(function(ele,index){
	if(index == 0){
		ele.className = 'red';
	}else{
		ele.className =  'white';
	}
})

function left(){
	elements.forEach(function(ele,index){
		let left_v = parseFloat(ele.style.left);
		if(left_v - img_width < 0){
			ele.style.left = (elements.length - 1) * img_width + 'px';
		}else{
			ele.style.left = left_v - img_width + 'px';
		}

		if(left_v - img_width == 0){
			elements2[index].className = 'red';
		}else{
			elements2[index].className = 'white';
		}
	})
}

var timer = setInterval(left,2000);

这个是改进版本
main.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="./main.css">
</head>
<body>
	<div class="main">
		<div class="pre_ul" id="main">
			<ul>
				<li><img src="https://i1.hdslb.com/bfs/archive/da52b26129a84aa316383d53e596d3f89c708294.jpg@672w_378h_1c_!web-home-common-cover.avif" alt=""></li>
				<li><img src="https://i0.hdslb.com/bfs/archive/6df10d7e0834f8511ea620dbfe6bfc7b1eabdab2.jpg@672w_378h_1c_!web-home-common-cover.avif" alt=""></li>
				<li><img src="https://i0.hdslb.com/bfs/archive/47338bc6056b6bbc906155590c6e201ae5dffee8.jpg@672w_378h_1c_!web-home-common-cover.avif" alt=""></li>
			</ul>
		</div>
		<div class="dot" id="main">
			<span class="red"></span>
			<span class="white"></span>
			<span class="white"></span>
		</div>
	</div>
</body>
<script type="text/javascript" src="main.js"></script>
</html>

main.css

*{
	margin: 0;
	padding: 0;
}

ul{
	list-style: none;
}

.main{
	width: 500px;
	height: 300px;
	position: relative;
	margin: 0 auto;

	overflow-x: hidden;
}

.main .dot{
	position: absolute;
	bottom: 8%;
	left: 50%;
	transform: translateX(-50%);
	height: 12px;
	z-index: 2;
}

.dot span{
	float: left;
	height: 100%;
	width: 12px;
	border-radius: 50%;
	cursor: pointer;
	margin-left: 8px;
}

.dot span:first-child{
	margin-left: 0;
}


.white{
	background-color: white;
}

.red{
	background-color: red;
}

.main .pre_ul{
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transition: all 0.5s;
	z-index: 1;
}

.main .pre_ul ul{
	width: 100%;
	height: 100%;
	position: relative;
	overflow-x: hidden;
}

.main .pre_ul ul li{
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}


.main .pre_ul ul li img{
	width: 100%;
}

main.js



const img_width = 500;
// 图片最大宽度
const eles = document.querySelectorAll('.pre_ul ul li');
const pre_ul_ele = document.querySelector('.pre_ul');
const dots = document.querySelectorAll('.dot span');
const n = eles.length;
pre_ul_ele.style.left = 0;
pre_ul_ele.style.width = n * img_width + 'px';
eles.forEach(function(ele,index){
	ele.style.width = img_width + 'px';
	ele.style.left = index * img_width + 'px';
})


function clear_red(){
	dots.forEach(function(ele,index){
		ele.className = 'white';
	})
}

var start_index = 0;

function left(){
	pre_ul_ele.style.transition = 'all 0.5s';
	let left_v = parseInt(pre_ul_ele.style.left);
	pre_ul_ele.style.left = left_v - 500 + 'px';
	
	clear_red();
	start_index = (start_index+1)%n;
	dots[start_index].className = 'red';

	if(left_v - 500 == -n*img_width){
		pre_ul_ele.style.left = 0;
	}
}


var timer1 = setInterval(left,2000);

注：上述代码没有给出点击按钮变化图片特效，想实现的读者可以去看看上述第一个关于实现轮播图的版本哈！

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Spring Security 6.x 系列（10）—— SecurityConfigurer 配置器及其分支实现源码分析（二）

Spring Security 6.x 系列（10）—— SecurityConfigurer 配置器及其分支实现源码分析（二）

一、前言 在本系列文章&#xff1a; Spring Security 6.x 系列&#xff08;4&#xff09;—— 基于过滤器链的源码分析&#xff08;一&#xff09; 中着重分析了Spring Security在Spring Boot自动配置、 DefaultSecurityFilterChain和FilterChainProxy 的构造过程。 Spring …
阅读更多...
golang学习笔记——爬虫colly入门

golang学习笔记——爬虫colly入门

文章目录 爬虫第一个爬虫colly爬虫框架colly爬虫示例-爬取图片colly采集器配置CallbacksAdd callbacks to a CollectorCall order of callbacks1. OnRequest2. OnError3. OnResponse4. OnHTML5. OnXML6. OnScraped OnHTML方法 参考资料 爬虫 很多语言都可以写爬虫&#xff0c;…
阅读更多...
【蓝桥杯省赛真题50】Scratch消除字母 蓝桥杯scratch图形化编程 中小学生蓝桥杯省赛真题讲解

【蓝桥杯省赛真题50】Scratch消除字母 蓝桥杯scratch图形化编程 中小学生蓝桥杯省赛真题讲解

目录 scratch消除字母 一、题目要求 编程实现 二、案例分析 1、角色分析
阅读更多...
Word插件-好用的插件-一键设置字体--大珩助手

Word插件-好用的插件-一键设置字体--大珩助手

常用字体 整理了论文、公文常用字体 整理了常用的论文字体&#xff0c;可一键设置当前节或选择的文字的字体 字体设置 包含字体选择、字体颜色 特殊格式 包含首字下沉、段落分栏、统一宽度、双行合一、上标切换、下标切换、转为全角、转为半角、挖词填空、当前日期、大写金…
阅读更多...
[架构之路-259]：目标系统 - 设计方法 - 软件工程 - 软件设计 - 架构设计 - 面向服务的架构SOA与微服务架构（以服务为最小的构建单位）

[架构之路-259]：目标系统 - 设计方法 - 软件工程 - 软件设计 - 架构设计 - 面向服务的架构SOA与微服务架构（以服务为最小的构建单位）

目录 前言&#xff1a; 二、软件架构层面的复用 三、什么是面向服务的架构SOA 3.1 什么是面向服务的架构 3.2 面向服务架构的案例 3.3 云服务&#xff1a;everything is service一切皆服务 四、什么是微服务架构 4.1 什么是微服务架构 4.2 微服务架构的案例 五、企业…
阅读更多...
使用RSA工具进行对信息加解密

使用RSA工具进行对信息加解密

我们在开发中需要对用户敏感数据进行加解密&#xff0c;比如密码 这边科普一下RSA算法 RSA是非对称加密算法&#xff0c;与对称加密算法不同;在对称加密中&#xff0c;相同的密钥用于加密和解密数据,因此密钥的安全性至关重要;而在RSA非对称加密中&#xff0c;有两个密钥&…
阅读更多...
PandoraFMS 监控软件 任意文件上传漏洞复现

PandoraFMS 监控软件 任意文件上传漏洞复现

0x01 产品简介 Pandora FMS 是用于监控计算机网络的软件。 Pandora FMS 允许以可视化方式监控来自不同操作系统、服务器、应用程序和硬件系统（例如防火墙、代理、数据库、Web 服务器或路由器）的多个参数的状态和性能。 0x02 漏洞概述 PandoraFMS upload_head_image.php 接…
阅读更多...
队列排序：给定序列a，每次操作将a[1]移动到 从右往左第一个严格小于a[1]的元素的下一个位置，求能否使序列有序，若可以，求最少操作次数

队列排序：给定序列a，每次操作将a[1]移动到 从右往左第一个严格小于a[1]的元素的下一个位置，求能否使序列有序，若可以，求最少操作次数

题目 思路&#xff1a; 赛时代码&#xff08;先求右起最长有序区间长度&#xff0c;再求左边最小值是否小于等于右边有序区间左端点的数&#xff09; #include<bits/stdc.h> using namespace std; #define int long long const int maxn 1e6 5; int a[maxn]; int n; …
阅读更多...
SpringBoot系列之启动成功后执行业务的方法归纳

SpringBoot系列之启动成功后执行业务的方法归纳

SpringBoot系列之启动成功后执行业务逻辑。在Springboot项目中经常会遇到需要在项目启动成功后&#xff0c;加一些业务逻辑的&#xff0c;比如缓存的预处理&#xff0c;配置参数的加载等等场景&#xff0c;下面给出一些常有的方法 实验环境 JDK 1.8SpringBoot 2.2.1Maven 3.2…
阅读更多...
机器学习之无监督学习：九大聚类算法

机器学习之无监督学习：九大聚类算法

今天&#xff0c;和大家分享一下机器学习之无监督学习中的常见的聚类方法。 今天&#xff0c;和大家分享一下机器学习之无监督学习中的常见的聚类方法。 在无监督学习中&#xff0c;我们的数据并不带有任何标签&#xff0c;因此在无监督学习中要做的就是将这一系列无标签的数…
阅读更多...
idea使用maven的package打包时提示“找不到符号”或“找不到包”

idea使用maven的package打包时提示“找不到符号”或“找不到包”

介绍&#xff1a;由于我们的项目是多模块开发项目&#xff0c;在打包时有些模块内容更新导致其他模块在引用该模块时不能正确引入。 情况一&#xff1a;找不到符号 情况一&#xff1a;找不到包 错误代码部分展示&#xff1a; Failure to find com.xxx.xxxx:xxx:pom:0.5 in …
阅读更多...
NLP项目实战01之电影评论分类

NLP项目实战01之电影评论分类

介绍&#xff1a; 欢迎来到本篇文章&#xff01;在这里&#xff0c;我们将探讨一个常见而重要的自然语言处理任务——文本分类。具体而言&#xff0c;我们将关注情感分析任务&#xff0c;即通过分析电影评论的情感来判断评论是正面的、负面的。 展示&#xff1a; 训练展示如下…
阅读更多...
ABAP - Function ALV 01 Function ALV的三大基石

ABAP - Function ALV 01 Function ALV的三大基石

森莫是Function ALV&#xff1f; 业务顾问和用户方面的名词定义为报表&#xff0c;在开发顾问方面定义的名词为ALV 通过调用Function方式展示的ALV叫做FunctionALV.Function的解释:封装好的函数 Function ALV的三大基石 Fieldcat :Function ALV字段级别的处理 Layout …
阅读更多...
CentOS服务自启权威指南：手动启动变为开机自启动（以Jenkins服务为例）

CentOS服务自启权威指南：手动启动变为开机自启动（以Jenkins服务为例）

前言 CentOS系统提供了多种配置服务开机自启动的方式。本文将介绍其中两种常见的方式&#xff0c; 一种是使用Systemd服务管理器配置&#xff0c;不过&#xff0c;在实际中&#xff0c;如果你已经通过包管理工具安装的&#xff0c;那么服务通常已经被配置为Systemd服务&#…
阅读更多...
利用法线贴图渲染逼真的3D老虎模型

利用法线贴图渲染逼真的3D老虎模型

在线工具推荐&#xff1a; 3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 当谈到游戏角色的3D模型风格时&#xff0c;有几种不同的风格&#xf…
阅读更多...
让聪明的车连接智慧的路，C-V2X开启智慧出行生活

让聪明的车连接智慧的路，C-V2X开启智慧出行生活

“聪明的车 智慧的路”形容的便是车路协同的智慧交通系统&#xff0c;从具备无钥匙启动&#xff0c;智能辅助驾驶和丰富娱乐影音功能的智能网联汽车&#xff0c;到园区的无人快递配送车&#xff0c;和开放的城市道路上自动驾驶的公交车、出租车&#xff0c;越来越多的车联网应用…
阅读更多...
ELK（四）—els基本操作

ELK（四）—els基本操作

目录 elasticsearch基本概念RESTful API创建非结构化索引&#xff08;增&#xff09;创建空索引&#xff08;删&#xff09;删除索引&#xff08;改&#xff09;插入数据&#xff08;改&#xff09;数据更新&#xff08;查&#xff09;搜索数据&#xff08;id&#xff09;&…
阅读更多...
【Copilot】Edge浏览器的copilot消失了怎么办

【Copilot】Edge浏览器的copilot消失了怎么办

这种原因&#xff0c;可能是因为你的ip地址的不在这个服务的允许范围内。你需要重新使用之前出现copilot的ip地址&#xff0c;然后退出edge的账号&#xff0c;重新登录一遍&#xff0c;最后重启edge&#xff0c;就能够使得copilot侧边栏重新出现了。
阅读更多...
mac苹果电脑清除数据软件CleanMyMac X4.16

mac苹果电脑清除数据软件CleanMyMac X4.16

在数字时代&#xff0c;保护个人隐私变得越来越重要。当我们出售个人使用的电脑&#xff0c;亦或者离职后需要上交电脑&#xff0c;都需要对存留在电脑的个人信息做彻底的清除。随着越来越多的人选择使用苹果电脑&#xff0c;很多人想要了解苹果电脑清除数据要怎样做才是最彻底…
阅读更多...
Endnote在word中加入参考文献及自定义参考文献格式方式

Endnote在word中加入参考文献及自定义参考文献格式方式

第一部分&#xff1a;在word中增加引用步骤 1、先下载对应文献的endnote引用格式&#xff0c;如在谷歌学术中的下载格式如下&#xff1a; 2、在endnote中打开存储env的格式库&#xff0c;导入对应下载的文件格式&#xff1a;file>import>file>choose,import对应文件&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023