轮播图原生

丛林大野熊

已于 2022-05-29 09:56:26 修改

阅读量66

点赞数

分类专栏： html css 文章标签： javascript css3 前端

于 2022-05-10 09:05:01 首次发布

本文链接：https://blog.csdn.net/cldyxiong/article/details/124680380

版权

html css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

面试问到轮播图回家实现个简单的轮播图

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			ul {
				width: 600px;
				height: 300px;
				margin: 50px auto;
				overflow: hidden;
				position: relative;
			}
			li {
				position: absolute;
				left: 0;
				top: 0;
				width: 600px;
				height: 300px;
				opacity: 0;
				list-style: none;
				transition: all 2s;
			}
			li img {
				width: 100%;
				height: 100%;
			}
			.box .active {
				opacity: 1;
			}
		</style>
	</head>
	<body>
		<ul class="box">
			<li class="active"><img src="assets/s_01.jpg" alt="" /></li>
			<li><img src="assets/s_02.jpg" alt="" /></li>
			<li><img src="assets/s_03.jpg" alt="" /></li>
			<li><img src="assets/s_04.jpg" alt="" /></li>
			<li><img src="assets/s_05.jpg" alt="" /></li>
			<li><img src="assets/s_06.jpg" alt="" /></li>
			<li><img src="assets/s_07.jpg" alt="" /></li>
			<li><img src="assets/s_08.jpg" alt="" /></li>
		</ul>
		<script>
			var lis = document.querySelectorAll('li')
			var index = 0
			setInterval(function () {
				index++
				index = index % lis.length
				document.querySelector('.box .active').classList.remove('active')
				lis[index].classList.add('active')
			}, 2000)

			// 轮播图逻辑
			/***
			 * 1. 先html css 布局  ul li 里面放上轮播的图片 ul 和li 宽高设置 一样大 ul 定位设为relative li定位设为absolute
			 * 2. 在一个li 上设置一个active 里面属性为opacity:1 的类 用来控制显示隐藏 其他opacity为0
			 * 3. 选择说有li  设置个index=0 通关index控制 哪个类为active
			 * 4. index 到数组最大数的时候重置为0 这样就能循环播放了
			 * ***/
		</script>
	</body>
</html>

丛林大野熊

关注

0
点赞
踩
0

收藏

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

面试问到轮播图没答好回家实现个简单的轮播图<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /
复制链接

扫一扫