简易轮播图

最新推荐文章于 2021-04-30 14:01:18 发布

_Akui

最新推荐文章于 2021-04-30 14:01:18 发布

阅读量760

点赞数 1

分类专栏： js 文章标签：小白前端

本文链接：https://blog.csdn.net/Akui1997/article/details/89477995

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

简单的轮播图写法，下面是html+css部分

<style>
		*{
			margin: 0;
			padding: 0;
			list-style: none;
			font-family: "微软雅黑";
		}
		.banner{
			width: 730px;
			height: 457px;
			margin: 0 auto;
			position: relative;
			/*overflow: hidden;*/
		}

		.bannerImg{
			height: 457px;
			display: block;
			position: relative;

		}

		.bannerImg a{
			display: block;
			position: absolute;
			top:0;
			left:0;
		}

		.items{
			width: 160px;
			height: 16px;
			position: absolute;
			bottom: 20px;
			left: 300px;
			cursor: pointer;
		}

		.items li{
			width: 16px;
			height: 16px;
			float: left;
			font-size: 12px;
			margin-right: 10px;
			border-radius: 50%;
			text-align: center;
			line-height: 16px;
			background: white;

		}
		.btnBox{
			width: 730px;
			height: 100px;
			position: absolute;
			top:50%;
			margin-top: -50px;
			z-index: 3;
		}
		.btn{
			width: 50px;
			height: 100px;
			text-align:center;
			line-height: 100px;
			background: rgba(0,0,0,0.5);
			color: white;
			font-size: 30px;
			cursor: pointer;
		}
		.fl{
			float: left;
		}
		.fr{
			float: right;
		}
	</style>
</head>
<body>
	<div class="banner">
		<div class="bannerImg">
			<a href="" style="z-index:1"><img src="images/1.jpg" height="454" width="730" alt=""></a>
			<a href=""><img src="images/2.jpg" height="454" width="730" alt=""></a>
			<a href=""><img src="images/3.jpg" height="454" width="730" alt=""></a>
			<a href=""><img src="images/4.jpg" height="454" width="730" alt=""></a>
			<a href=""><img src="images/5.jpg" height="454" width="730" alt=""></a>
			<a href=""><img src="images/6.jpg" height="454" width="730" alt=""></a>
		</div>
		<ul class="items" style="z-index:99">
			<li class="item" style="background: pink;">1</li>
			<li class="item">2</li>
			<li class="item">3</li>
			<li class="item">4</li>
			<li class="item">5</li>
			<li class="item">6</li>
		</ul>
		<div class="btnBox">
			<div class="btn fl"	id = "left">&lt;</div>
			<div class="btn fr"	id = "right">&gt;</div>
		</div>
	</div>
</body>

重点是接下来的js部分，注释已经写在里面了，

<script type="text/javascript">
	//赋予一个空值;
	var num = 0; 
	//拿到class名为bannerImg的元素中 的a标签 将a标签赋予变量Img
	var Img = document.getElementsByClassName("bannerImg")[0].getElementsByTagName("a"); 
	//拿到所有class名为item的元素 并且赋予变量li
	var li = document.getElementsByClassName("item");
	//拿到class名为banner的元素 并且赋予变量banner
	var banner = document.getElementsByClassName("banner")[0];
	//定义名为bannerAuto 并且带有参数abc的函数
	function bannerAuto(abc){
		//遍历一遍Img中的所有元素
		for (var i = 0; i<Img.length; i++) {
			//让Img中所有的图片层级变为0
			Img[i].style.zIndex = "0";
			//让所有li中的元素背景色为白色
			li[i].style.background = "#fff";
		}
		
	   		//判断函数的参数如果为left那么num--
		if (abc=="left") {
			num--
			//判断如果num的值小于等于0那么num的变为Img的长度-1
			if (num<0) {
				num=Img.length-1;
			}
		//判断abc的值为right那么num++
		}else if (abc=="right") {
			num++
		//判断num的值大于等于Img的长度num值归零
		if (num>=Img.length) {
			num=0;
			}
		}
		//让Img中以num为下标的元素层级变为1
		Img[num].style.zIndex="1";
		//让li中以num为下标的元素背景色变色
		li[num].style.background="#009494";

	}
	//每过2000毫秒向函数bannerAuto传回right参数并且执行一次 并且将这个事件赋予变量move  
	//如果不回调right参数 那么bannerAuto的默认参数为abc  abc不等于left 或者right 所以无法判断是否num++或者num--所以代码无法执行
	var  move=setInterval(function(){
		bannerAuto("right");
	},1000);
	//将li循环一遍
	for (var i=0; i<li.length; i++) {
		//储存li的下标到i
		li[i].index = i; 
		//赋予li中以i为下标的元素一个点击事件
		li[i].onclick = function(){
			//遍历Img中所有元素一遍
			for (var j=0; j<Img.length; j++) {
				//让Img中所有的元素层级变为0
				Img[j].style.zIndex = "0";
				//让所有li中的元素背景色为白色
				li[j].style.background = "#fff";
			}
			//将你点击的li中的属性背景色变为粉色
			this.style.background="pink";
			//将你点击的李忠的属性下标对应的Img中元素的属性下标层级变为1
			Img[this.index].style.zIndex="1";
			//关联点击的下标和num值，就是自动轮播的下标
			num = this.index;  
		}
	}
	//赋予banner一个鼠标悬浮事件 如果鼠标悬浮在banner上停止执行move中的事件
	banner.onmouseover=function(){
		clearInterval(move);
	}
	//赋予banner一个鼠标移开事件 如果鼠标移开banner  执行名为move事件
	banner.onmouseout=function(){
		move=setInterval(function(){
		bannerAuto("right");
	},1000);
	}
	//赋予left一个点击事件 点击left将向bannerAuto函数传回left这个参数
	left.onclick=function(){
		bannerAuto("left");
	}
	//赋予right一个点击事件 点击right将向bannerAuto函数传回right这个参数
	right.onclick= function(){
		bannerAuto("right");
	}
</script>

希望能给大家带来点帮助

_Akui

关注

1
点赞
踩
0

收藏

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

简单的轮播图写法，下面是html+css部分<style> *{ margin: 0; padding: 0; list-style: none; font-family: "微软雅黑"; } .banner{ width: 730px; height: 457px; margin: 0 auto; position: re...
复制链接

扫一扫