滑动轮播图的基本格式

最新推荐文章于 2022-05-21 14:40:08 发布

小森呀

最新推荐文章于 2022-05-21 14:40:08 发布

阅读量645

点赞数

分类专栏：封装文章标签：滑动轮播

本文链接：https://blog.csdn.net/KEY2018/article/details/92805255

版权

封装专栏收录该内容

11 篇文章 0 订阅

订阅专栏

滑动轮播图的基本格式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>滑动轮播图</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.bg{
				width: 1000px;
				height: 500px;
				border: 1px solid black;
				margin: 200px auto;
				position: relative;
				overflow: hidden;
			}
			.img{
				width: 3000px;
				height: 500px;
				transition: all 1s;
			}
			.img div{
				width: 1000px;
				height: 500px;
				float: left;
			}
			.button{
				width: 50px;
				height: 100px;
				background-color: darkgray;
				position: absolute;
				top: 0px;
				bottom: 0px;
				margin: auto;
			}
			.right{
				right: 0px;
			}
			.span{
				width: 100%;
				height: 40px;
				text-align: center;
				position: absolute;
				bottom: 0px;
			}
			.span span{
				display: inline-block;
				width: 20px;
				height: 20px;
				background-color: white;
				border-radius: 20px;
				margin: 10px 5px;
			}
			.span .cur{/*.span必须加,关于类名的约分优先级高低，点击时触发的样式*/
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="bg">
			<div class="img">
				<div style="background-color: lightblue;"></div>
				<div style="background-color: lightcoral;"></div>
				<div style="background-color: lightseagreen;"></div>
			</div>
			<div class="button left"></div>
			<div class="button right"></div>
			<div class="span">
				<span class="cur"></span><!--起始的样式,为点击后的样式清除与添加做准备-->
				<span></span>
				<span></span>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var left=document.querySelector('.left');
		var right=document.querySelector('.right');
		var img=document.querySelector('.img');
		var span=document.querySelectorAll('.span span');
		var num=0;//用来记录点击的总次数，以下共用此变量
		right.onclick=function()//右点击
		{
			for(var x=0;x<span.length;x++)//先清除原有的样式
			{
				span[x].className='';
			}
			num=num>=2?0:++num;//当点击到最后一张图片时，需要将点击次数归零
			img.style.marginLeft=-1000*num+'px';//根据点击次数来确定位置
			span[num].className='cur';//num已与this绑定，即小圆点的下标已与总点击次数绑定
		}
		left.onclick=function()//左点击
		{
			for(var x=0;x<span.length;x++)
			{
				span[x].className='';
			}
			num=num<=0?2:--num;
			img.style.marginLeft=-1000*num+'px';
			span[num].className='cur';
		}
		for(var x=0;x<span.length;x++)//小圆点点击
		{
			span[x].a=x;//获取每一个小圆点的下标
			span[x].onclick=function()
			{
				for(var y=0;y<span.length;y++)
				{
					span[y].className='';
				}
				this.className='cur';
				img.style.marginLeft=-1000*this.a+'px';//this.a就表示小圆点的下标
				num=this.a;//将小圆点的点击与总点击次数进行绑定
			}
		}
	</script>
</html>

js部分的简化

	<!--<script type="text/javascript">
		var left=document.querySelector('.left');
		var right=document.querySelector('.right');
		var img=document.querySelector('.img');
		var span=document.querySelectorAll('.span span');
		var num=0;
		right.onclick=function()
		{
			num=num>=2?0:++num;
			our();
		}
		left.onclick=function()
		{
			num=num<=0?2:--num;
			our();
		}
		for(var x=0;x<span.length;x++)
		{
			span[x].a=x;
			span[x].onclick=function()
			{
				num=this.a;//此处先将小圆点的点击与总点击次数进行绑定，需放在封装的函数之前
				our();
			}
		}
		function our()//将相同的部分封装为函数
		{
			for(var x=0;x<span.length;x++)
			{
				span[x].className='';
			}
			img.style.marginLeft=-1000*num+'px';
			span[num].className='cur';//此处span[num]不可用this替代，this在此处指向Windows窗口
		}
	</script>-->

小森呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
滑动轮播图的基本格式

滑动轮播图的基本格式<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>滑动轮播图</title> <style type="text/css"> ...
复制链接

扫一扫

专栏目录