轮播图原生

沁染流年

于 2022-04-17 08:55:47 发布

阅读量89

点赞数

分类专栏：前端 JavaScript 文章标签： js css javascript 前端 web

本文链接：https://blog.csdn.net/weixin_49210760/article/details/124224737

版权

前端同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

JavaScript

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.container {
				width: 1000px;
				border: 1px solid black;
				margin: 100px auto;
				height: 500px;
				position: relative;
			}
			.slider_item {
				position: absolute;
				width: 400px;
				box-shadow: 10px 10px 10px #666;
				transition: all 0.6s;
			}
			.slider_item img {
				display: block;
				width: 100%;
			}
			.slider_item.first {
				top: 178px;
				left: 288px;
				z-index: 5;
			}
			.slider_item.second {
				top: 182px;
				left: 592px;
				opacity: 0.5;
				z-index: 3;
			}
			.slider_item.third {
				top: 145px;
				left: 288px;
				z-index: 1;
				opacity: 0.2;
			}
			.slider_item.second.left {
				top: 182px;
				left: 0px;
				opacity: 0.5;
				z-index: 3;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="slider_item first">
				<img src="./images/1.jpg" alt="" />
			</div>
			<div class="slider_item second">
				<img src="./images/2.jpg" alt="" />
			</div>
			<div class="slider_item third">
				<img src="./images/3.jpg" alt="" />
			</div>
			<div class="slider_item second left">
				<img src="./images/4.jpg" alt="" />
			</div>
		</div>
		<script>
			const oitems = document.getElementsByClassName("slider_item");
			const classList = [];

			for (let index = 0; index < oitems.length; index++) {
				const element = oitems[index];
				classList.push(element.className);
			}
			setInterval(() => {
				classList.unshift(classList.pop());
				for (let index = 0; index < classList.length; index++) {
					const name = classList[index];
					oitems[index].className = name;
				}
			}, 1000);
		</script>
	</body>
</html>

在这里插入图片描述

沁染流年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图原生

<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .container { width:
复制链接

扫一扫