【JavaScript】英雄联盟官网作品介绍，轮播图的实现

前言

恭喜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:;"><imgsrc="./upload/78a49812838075c49e7bd5187ae4f191.jpeg"alt=""/></a></li><li><a href="javascript:;"><imgsrc="./upload/74d81a59913a74c320cb7c01532d79d3.jpeg"alt=""/></a></li><li><a href="javascript:;"><imgsrc="./upload/558203c499f60aa9a978102700a0e528.jpeg"alt=""/></a></li><li><a href="javascript:;"><imgsrc="./upload/91e56dbd02b6c419782c80ee35227b78.jpeg"alt=""/></a></li><li><a href="javascript:;"><imgsrc="./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);
}

【JavaScript】英雄联盟官网作品介绍，轮播图的实现相关推荐

web课程设计网页规划与设计----公司官网带轮播图 (页面精美 1页)
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与制 ...
初学者之《复刻英雄联盟官网之人脸识别登录》①
初学者之<复刻英雄联盟官网之人脸识别登录>① 第1章绪论第2章 Web项目需求分析前言英雄联盟是在这个电竞时代被推至至高点的一款MOBA游戏,然而其官网的登录方式在个人认为或许有 ...
Python爬虫之简单爬虫之爬取英雄联盟官网的英雄的皮肤
Python爬虫之简单爬虫之爬取英雄联盟官网的英雄的皮肤文章目录 Python爬虫之简单爬虫之爬取英雄联盟官网的英雄的皮肤背景:LOL这款游戏有着大量的玩家,这个游戏里面人们津津乐道的皮肤,每一款 ...
初学者之《复刻英雄联盟官网之人脸识别登录》②
初学者之<复刻英雄联盟官网之人脸识别登录>② 第3章 Web项目系统设计第4章 Web项目系统实现三.Web项目系统设计在完成一个Web项目的开发过程和设计过程时,首先经历的就是整个 ...
爬虫实战6：爬取英雄联盟官网五个位置的综合排行榜保存到excel
申明:资料来源于网络及书本,通过理解.实践.整理成学习笔记. 文章目录英雄联盟官网获取一个位置的综合排行榜所有数据(上单为例) 获取所有位置的综合排行榜所有数据英雄联盟官网获取一个位置的综合排 ...
LOL英雄联盟官网高保真原型设计-Axure9
一.英雄联盟官网 https://lol.qq.com/main.shtml 二.原型展示链接 https://w63vz3.axshare.com 三.效果展示图 (游戏版本11.10) 四.原型下 ...
JS轮播图（网易云轮播图）
JS 轮播图写在前面最聪明的人是最不愿浪费时间的人.--但丁实现功能图片自动切换鼠标移入停止自动播放,显示按钮点击按钮,实现前后翻鼠标移入小圆圈,可以跳转到对应图片点击左右两侧图片部分 ...
使用JS+CSS的网易云轮播图的实现（完整代码）
一个网易云轮播图的实现 <!DOCTYPE html> <html lang="chn"> <head><meta charset=&qu ...
原生H5实现网易云轮播图
许久不更新了,今天做一个网易云的轮播图,就像下面这样先二话不多说,贴上代码: <!DOCTYPE html> <html lang="en"> <h ...
原生JS实现小米轮播图和网易云轮播图
文章目录小米轮播图网易云轮播图小米轮播图实现功能: 定时切换(2s) 点击按钮停止切换点击向左向右按钮进行相应切换鼠标点击下方的小圆点,并进行相应的切换效果: 代码如下: <!DO ...