前言
恭喜DRX夺得英雄联盟S12全球总决赛冠军，戴先生终于捧杯啦！
言归正传，在大二寒假（12月）开始了解JavaScript，主要学习算法，准备蓝桥杯的比赛，扩展自己的技术栈，蓝桥杯4月9号考试完，紧赶慢赶的学习JavaScript，历经一个月的学习，最终做出来英雄联盟官网以作为JavaScript阶段的总结收尾。作品并没有一比一的还原英雄联盟，有一些自己创新性的改进，也有一些不足官网的功能，但整体上而言跟官网相似度达到90%，小伙伴们跟着博主一起走进英雄联盟官网叭。
效果展示
视频介绍
B站传送门：JavaScript作品介绍
需要具备的技术
HTMLCSSJavaScript轮播图的实现
<!-- 滚动图 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">季前赛开启</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】英雄联盟官网作品介绍 轮播图的实现》对你有帮助，请点赞、收藏，并留下你的观点哦！
