英雄联盟官网轮播图

 

<!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
    评论
### 回答1: 仿英雄联盟官网的web代码需要包含以下几个主要部分: 1. HTML结构:通过HTML标签组织页面的整体结构,包括header(页眉)、nav(导航栏)、main(主要内容区)和footer(页脚)等模块。 2. CSS样式:使用CSS代码为页面添加样式,包括字体、颜色、背景、布局等方面的样式设计,使页面更加美观并符合英雄联盟官网的风格。 3. JavaScript交互:利用JavaScript代码为页面添加交互效果,比如响应用户的鼠标点击、滚动等行为,实现页面元素的动态变化和跳转等功能。 4. 网页分块:将页面内容按照模块化的方式进行分块处理,使得页面更加易读和易扩展,适应不同屏幕尺寸的设备。 5. 响应式设计:通过CSS媒体查询和JavaScript代码,使得网页能够适应不同设备的屏幕尺寸,通过自适应布局和可变字体大小等方式,确保在不同终端上都有良好的展示效果。 6. 数据加载:通过JavaScript的AJAX技术,从后台服务器获取数据并显示在页面上,比如英雄的信息、游戏赛事的结果等。 7. SEO优化:通过合理的标签选择、关键词设置和良好的页面结构,使得页面能够被搜索引擎更好地索引和收录,提高页面在搜索结果中的排名。 总之,仿英雄联盟官网的web代码需要通过HTML、CSS和JavaScript的结合使用,实现页面结构、样式、交互和数据的完整展示,以及为用户提供良好的浏览体验和页面性能。 ### 回答2: 仿英雄联盟官网的web代码可以包含以下几个方面的内容。 首先,我们可以使用HTML语言来构建网页的基本框架。通过HTML元素如头部、主体和底部,我们可以创建一个具有良好结构的网页。在头部,我们可以设置网页的标题、引入CSS样式表和JavaScript脚本。在主体部分,我们可以添加网页的主要内容,包括英雄联盟官方的标志、导航菜单、主页特色推荐内容等。 其次,为了美化网页的外观,我们可以使用CSS来设置网页的样式。通过为HTML元素添加不同的CSS类、ID和样式属性,我们可以为网页添加背景像、选择合适的字体、设置文本和链接的颜色等。此外,我们还可以使用CSS的其他特性如过渡效果、动画等来增强网页的用户体验。 除此之外,我们还可以通过JavaScript来添加交互功能。例如,我们可以使用JavaScript创建一个轮,实现官网主页的动态展示效果。我们也可以使用JavaScript来处理用户的交互事件,例如点击某个按钮后触发的弹出窗口等。 最后,为了提高网页的效率,我们可以使用一些优化技巧。例如,使用合适的片格式和压缩工具来减小网页的加载时间。我们还可以使用缓存技术,将一些静态资源如样式表和JavaScript文件保存在用户的浏览器中,以减少网络请求。 总结起来,仿英雄联盟官网的web代码主要包括HTML、CSS和JavaScript三个方面的内容。通过合理使用这些技术,我们可以创建一个外观精美、交互友好的仿官网页面。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

继续冲冲冲

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值