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

本文链接：https://blog.csdn.net/JN_HoweveR/article/details/127712465

前言

恭喜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);
}