js实现轮播图（幻灯片）思路原生+es6

最新推荐文章于 2022-09-13 14:59:23 发布

前端爱好者小王

最新推荐文章于 2022-09-13 14:59:23 发布

阅读量790

点赞数 3

分类专栏： Javascript 文章标签： javascript css es6

本文链接：https://blog.csdn.net/qq_51075057/article/details/110733284

版权

Javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

网页中经常可以看到的轮播图效果点击小按钮切换非JQuery中fadeIn效果

图片链接

https://s3.ax1x.com/2020/12/06/DXl03Q.jpg
https://s3.ax1x.com/2020/12/06/DXlw9g.jpg
https://s3.ax1x.com/2020/12/06/DXla4S.jpg

实现思路

轮播图示例

布局思路

①需要两个盒子，父盒子中有一个轮播图盒子，父盒子的尺寸和每一张轮播图的尺寸相同，轮播图盒子的尺寸，高度固定，宽度为百分比，x张图片宽度为x百%，如图，3张图片所以宽度为300%

②给每张图片左浮动使其并列，这样父盒子因为设置溢出隐藏，则只显示一张轮播图

③设置轮播图盒子绝对定位，我们通过js控制轮播图盒子在父盒子的left定位值来实现切换效果

④图下的小圆点，用3个div小尺寸，设置圆角边框50%和背景颜色，并给每个按钮设置点击事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			li{
				list-style: none;
			}
			*{padding: 0;margin: 0;}
			.box{
				width: 1200px;height: 300px;
				margin: 50px auto;
				overflow: hidden;
				position: relative;
			}
			.box .h-img{
				height: 330px;width: 300%;
				position: absolute;left: 0;
				transition: left 1s;
			}
			.h-img a{
				display: block;width: 1200px;height: 300px;
			}
			
			.fl{
				float: left;
			}
			#btn{width: 100px;height: 25px; position: absolute;bottom:10px; left:50%;margin-left: -50px; z-index: 9;}
			#btn li{
				width: 20px;height: 20px;border-radius: 50%;float: left;background-color: #cccccc;
				margin-left: 10px;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			
				<ul id="btn">
					<li></li>
					<li></li>
					<li></li>
				</ul>
			
			<div class="h-img fl" id="box">
				<a class="fl"  href="#"><img src="https://s3.ax1x.com/2020/12/06/DXl03Q.jpg" ></a>
				<a class="fl"  href="#"><img src="https://s3.ax1x.com/2020/12/06/DXlw9g.jpg" ></a>
				<a class="fl"  href="#"><img src="https://s3.ax1x.com/2020/12/06/DXla4S.jpg" ></a>
			</div>
		</div>
		<script type="text/javascript">
			var a =document.getElementById("box");
			var b =document.getElementById("btn").getElementsByTagName("li");
	// 前期思路
			//let c=[1,2,3];
			// b[0].οnclick=function(){
			// 	a.style.left="0%";
			// }
			// b[1].οnclick=function(){
			// 	a.style.left="-100%";
			// }
			// b[2].οnclick=function(){
			// 	a.style.left="-200%";
			// 	alert(typeof c)
	//es6语法
			// [...b].forEach(
			// (item,index)=>{
			// 	item.onclick = ()=>{
			// 		a.style.left=index * -100 +'%';
			// 	}
			// }
			
			// )
	// js语法
			[...b].forEach(function(item,index){
				item.onclick=function(){
					a.style.left=index * -100 +"%"
				}
			});
			
		</script>
	</body>
</html>

前端爱好者小王

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
3
评论
js实现轮播图（幻灯片）思路原生+es6

网页中经常可以看到的轮播图效果点击小按钮切换非JQuery中fadeIn效果图片链接https://s3.ax1x.com/2020/12/06/DXl03Q.jpghttps://s3.ax1x.com/2020/12/06/DXlw9g.jpghttps://s3.ax1x.com/2020/12/06/DXla4S.jpg实现思路布局思路①需要两个盒子，父盒子中有一个轮播图盒子，父盒子的尺寸和每一张轮播图的尺寸相同，轮播图盒子的尺寸，高度固定，宽度为百分比，x张图片宽度为x百%，如图
复制链接

扫一扫

专栏目录