前言
恭喜DRX夺得英雄联盟S12全球总决赛冠军,戴先生终于捧杯啦!
言归正传,在大二寒假(2021年12月)开始了解JavaScript,主要学习算法,准备蓝桥杯的比赛,扩展自己的技术栈,蓝桥杯2022年4月9号考试完,紧赶慢赶的学习JavaScript,历经一个月的学习,最终做出来英雄联盟官网以作为JavaScript阶段的总结收尾。作品并没有一比一的还原英雄联盟,有一些自己创新性的改进,也有一些不足官网的功能,但整体上而言跟官网相似度达到90%,小伙伴们跟着博主一起走进英雄联盟官网叭。
效果展示
视频介绍
B站传送门:JavaScript作品介绍
需要具备的技术
- HTML
- CSS
- JavaScript
轮播图的实现
<!-- 滚动图 start -->
<div class="title-hd">
<a href="javascript: ;" class="left-btn"><</a>
<a href="javascript: ;" class="right-btn">></a>
<ul class="box-ul">
<li>
<a href="javascript:;"
><img
src="./upload/78a49812838075c49e7bd5187ae4f191.jpeg"
alt=""
/></a>
</li>
<li>
<a href="javascript:;"
><img
src="./upload/74d81a59913a74c320cb7c01532d79d3.jpeg"
alt=""
/></a>
</li>
<li>
<a href="javascript:;"
><img
src="./upload/558203c499f60aa9a978102700a0e528.jpeg"
alt=""
/></a>
</li>
<li>
<a href="javascript:;"
><img
src="./upload/91e56dbd02b6c419782c80ee35227b78.jpeg"
alt=""
/></a>
</li>
<li>
<a href="javascript:;"
><img
src="./upload/49f08523b1052b5812ab9676f32643ec.jpeg"
alt=""
/></a>
</li>
</ul>
<ol class="title-bd">
<li class="current">2022季前赛开启</li>
<li>英雄联盟首部动画剧集</li>
<li>双城之战宝典</li>
<li>终极魔典限时开启</li>
<li>EDG冠军周边预定</li>
</ol>
</div>
<!-- 滚动图 end -->
/* 把我们所有标签的内外边距清零 */
* {
margin: 0;
padding: 0;
/* css3盒子模型 */
box-sizing: border-box;
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
font-style: normal
}
/* 去掉li 的小圆点 */
li {
list-style: none
}
img {
/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
border: 0;
/* 取消图片底侧有空白缝隙的问题 */
vertical-align: middle
}
button {
/* 当我们鼠标经过button 按钮的时候,鼠标变成小手 */
cursor: pointer
}
a {
color: #666;
text-decoration: none
}
a:hover {
color: #c81623
}
button,
input {
/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
/* 默认有灰色边框我们需要手动去掉 */
border: 0;
outline: none;
}
body {
/* CSS3 抗锯齿形 让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666
}
.hide,
.none {
display: none
}
/* 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}
/*轮播图*/
.title-hd {
position: relative;
float: left;
width: 820px;
height: 425px;
overflow: hidden;
}
.title-hd .left-btn,
.title-hd .right-btn {
display: none;
font-size: 16px;
width: 20px;
height: 30px;
line-height: 30px;
background-color: #333;
z-index: 11;
color: #fff;
}
.title-hd .left-btn {
position: absolute;
top: 40%;
left: 0px;
}
.title-hd .right-btn {
position: absolute;
top: 40%;
right: 0px;
}
.title-hd .box-ul {
position: relative;
top: 0;
left: 0;
width: 4920px;
height: 340px;
overflow: hidden;
}
.title-hd .box-ul li {
float: left;
width: 820px;
height: 340px;
overflow: hidden;
}
.title-bd {
position: relative;
width: 820px;
height: 40px;
overflow: hidden;
list-style: none;
}
.title-bd li {
float: left;
width: 164px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 14px;
letter-spacing: 1px;
/* 鼠标移入变为小手 */
cursor: pointer;
}
.current {
color: #ab8e66;
background-color: #f7f6f6;
border-bottom: 2px solid #cea861;
}
@keyframes show {
0% {
left: 0;
}
25% {
left: -164px;
}
50% {
left: -328px;
}
75% {
left: -492px;
}
100% {
left: -656px;
}
}
.title-bd .title:hover {
color: #ab8e66;
background-color: #f7f6f6;
border-bottom: 2px solid #cea861;
}
var title_hd = document.querySelector(".title-hd");
//下边类似小圆圈部分
var title_bd = document.querySelector(".title-bd");
var liss = title_bd.querySelectorAll("li");
// 左右两侧按钮
var left_btn = document.querySelector(".left-btn");
var right_btn = document.querySelector(".right-btn");
// 轮播图的主体部分
var ul1 = document.querySelector(".box-ul");
//图片的宽度
var title_hdWidth = title_hd.offsetWidth;
//2.鼠标经过title_hd 就显示隐藏左右按钮
title_hd.addEventListener("mouseenter", function () {
left_btn.style.display = "block";
right_btn.style.display = "block";
clearInterval(timer);
// 清除定时变量
timer = null;
});
title_hd.addEventListener("mouseleave", function () {
left_btn.style.display = "none";
right_btn.style.display = "none";
timer = setInterval(function () {
// 手动调用点击事件
right_btn.click();
}, 2000);
});
//3.小圆圈的排他思想
for (var i = 0; i < liss.length; i++) {
//给每个小li设置index属性
liss[i].setAttribute("index", i);
liss[i].addEventListener("click", function () {
//干掉所有人
for (var i = 0; i < title_bd.children.length; i++) {
title_bd.children[i].className = "";
}
//留下我自己
this.className = "current";
// 4.点击小圆圈,移动图片,移动的是ul
// 当点击了某个小li 就拿到当前小li的索引号
var index = this.getAttribute("index");
num = index;
circle = index;
// ul的移动距离 小圆圈的索引号乘以图片的宽度 (注意是负值)
animateX(ul1, -index * title_hdWidth);
});
}
// 5.克隆第一张图片,放到ul最后面
var first = ul1.children[0].cloneNode(true);
ul1.appendChild(first);
// 6.点击右侧按钮, 图片滚动一张
var num = 0;
var circle = 0;
// 节流阀
var flag = true;
right_btn.addEventListener("click", function () {
if (flag) {
flag = false;
if (num == ul1.children.length - 1) {
ul1.style.left = 0;
num = 0;
}
num++;
animateX(ul1, -num * title_hdWidth, function () {
flag = true;
});
circle++;
if (circle == title_bd.children.length) {
circle = 0;
}
circleChange();
}
});
left_btn.addEventListener("click", function () {
if(flag){
flag = false;
if (num == 0) {
ul1.style.left = -(ul1.children.length - 1) * title_hdWidth + "px";
num = ul1.children.length - 1;
}
num--;
animateX(ul1, -num * title_hdWidth,function(){
flag = true;
});
circle--;
//circle<0 说明第一张图片,小圆圈要改为最后一个
if (circle < 0) {
circle = title_bd.children.length - 1;
}
circleChange();
}
});
function circleChange() {
//干掉所有人
for (var i = 0; i < title_bd.children.length; i++) {
title_bd.children[i].className = "";
}
//留下我自己
title_bd.children[circle].className = "current";
}
// 自动播放轮播图
var timer = setInterval(function () {
// 手动调用点击事件
right_btn.click();
}, 2000);
function animateX(obj, target, callback) {
//当我们不断的点击按钮,这个元素的速度会越来越快,因为开启了太多的定时器,
//解决方案:让我们的元素只有一个定时器执行
//先清除以前的定时器,只保留当前的一个定时器执行
clearInterval(obj.timerX);
obj.timerX = setInterval(function () {
//步长公式
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
//停止动画,本质是停止定时器
clearInterval(obj.timer);
//回调函数写到定时器结束里面
// if (callback) {
// // 调用函数
// callback();
// }
callback && callback();
}
obj.style.left = obj.offsetLeft + step + "px";
}, 15);
}