英雄联盟官网轮播图

最新推荐文章于 2022-11-06 14:31:42 发布

继续冲冲冲

最新推荐文章于 2022-11-06 14:31:42 发布

阅读量463

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/m0_68002039/article/details/124022195

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.box {
				width: 820px;
				height: 380px;
				background-color: red;
				margin: 40px auto 0;
			}

			/*窗口容器*/
			.content {
				width: 820px;
				height: 340px;
				background-color: lightgoldenrodyellow;
				/*内容超出部分隐藏*/
				overflow: hidden;
			}

			.nav {
				width: 820px;
				height: 40px;
				background-color: #e3e2e2;
			}

			.nav ul {
				list-style: none;
			}

			.nav ul li {
				width: 164px;
				height: 40px;
				float: left;
				text-align: center;
				line-height: 40px;
				font-size: 14px;
				cursor: pointer;
			}

			.nav .active {
				width: 164px;
				height: 38px;
				color: #ab8e66;
				background-color: #F7F6F6;
				border-bottom: 2px solid #CEA861;
			}

			/*滚动容器*/
			.content ul {
				list-style: none;
				width: 4100px;
				height: 340px;
				/*过渡动画*/
				transition: all 0.3s;
			}

			/*内容容器*/
			.content li {
				float: left;
			}

			.content li img {
				/*取消图片自带的边距*/
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<!--窗口容器(用于显示部分的大小的容器，超出部分需隐藏)-->
			<div class="content">
				<!--滚动容器(可以让所有滚动元素并排显示的容器，它的宽度是所有需要并排显示元素的宽度总和)-->
				<ul>
					<!--内容容器(存放每一个滚动元素的内容的容器)-->
					<li><img src="file:///D:/web前端/作业/英雄联盟官网首页“滚动式轮播图”/images/1.jpeg" alt=""></li>
					<li><img src="file:///D:/web前端/作业/英雄联盟官网首页“滚动式轮播图”/images/2.jpeg" alt=""></li>
					<li><img src="file:///D:/web前端/作业/英雄联盟官网首页“滚动式轮播图”/images/3jpeg.jpeg" alt=""></li>
					<li><img src="file:///D:/web前端/作业/英雄联盟官网首页“滚动式轮播图”/images/4.jpeg" alt=""></li>
					<li><img src="file:///D:/web前端/作业/英雄联盟官网首页“滚动式轮播图”/images/5.jpeg" alt=""></li>
				</ul>
			</div>

			<div class="nav">
				<ul>
					<li class="active">幻灵战队</li>
					<li>幻灵战队通行证</li>
					<li>云顶之弈公开赛TOC3</li>
					<li>至臻礼赠</li>
					<li>周边"愚"你相伴好礼回馈</li>
				</ul>
			</div>
		</div>
		<script>
			//需求分析:
			//1.当鼠标进入对应li时,li添加选中样式,其他清除选中样式
			//2.让对应图片显示 滚动容器移动到对应li的位置

			//1.获取元素
			//2.绑定事件 onclick
			//3.做什么事 function(){}

			var nav = document.getElementsByClassName("nav")[0]
			var navLis = nav.getElementsByTagName("li")
			var content = document.getElementsByClassName("content")[0]
			var contentUl = content.getElementsByTagName("ul")[0]
			//操作多个元素时,直接使用批量操作,for循环
			for (var n = 0; n < navLis.length; n++) {
				navLis[n].index = n
				//鼠标移入哪个li就加选中样式
				//在事件处理函数里,如果想获取到当前元素,使用this获取
				navLis[n].onmouseenter = function() {
					//排它法 再选中当前元素时,把除它外的元素样式清除
					for (var j = 0; j < navLis.length; j++) {
						navLis[j].className = ""
					}
					this.className = "active"
					//移动位置 因为是往左移动,所以是负值(左负右正),移动的值等于当前索引值乘一张图片的宽度820px
					contentUl.style.marginLeft = -this.index * 820 + "px"
				}
			}
			//定时器
			var num = 0;
			setInterval(function() {
				num++
				if (num > 4) {
					num = 0
				}
				for (var j = 0; j < navLis.length; j++) {
					navLis[j].className = ""
				}
				navLis[num].className = "active"
				contentUl.style.marginLeft = -num * 820 + "px"
			}, 3000)
		</script>
	</body>

</html>

继续冲冲冲

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
英雄联盟官网轮播图

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } .box { width: 820px; height: 380px; background-color: red; ma...
复制链接

扫一扫