原生js轮播图效果实现（最基础的方法实现轮播效果）

本文链接：https://blog.csdn.net/VAH_JXJ/article/details/108348375

原生js轮播图效果实现

图片请以数字+图片类型的格式命名，例如（0.jpg）。

1.html部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/style.css">
  <title>轮播图</title>
</head>
<body>

  <div class="banner" id="banner">
    <img src="./images/0.webp" alt="" id="img">
    <ul class="box" id="box">
      <li name="1">手机 电话卡
        <div class="boxDiv">
          <div class="container">
              <img src="./images/bijiben.webp" alt="">
              <span>小米10 至尊纪念版</span>
          </div>
          <div class="container">
            <img src="./images/xianshiqi.webp" alt="">
            <span>Redmi K30 至尊纪念版</span>
          </div>
        </div>
      </li>
      <li name="2">电视 盒子
        <div class="boxDiv">
          <div class="container">
            <img src="./images/bijiben.webp" alt="">
            <span>小米透明电视</span>
          </div>
          <div class="container">
            <img src="./images/xianshiqi.webp" alt="">
            <span>小米电视5 65英寸</span>
          </div>
        </div>
      </li>
      <li name="3">笔记本 显示器
        <div class="boxDiv">
          <div class="container">
            <img src="./images/bijiben.webp" alt="">
            <span>RedmiBook 13</span>
          </div>
          <div class="container">
            <img src="./images/xianshiqi.webp" alt="">
            <span>显示器</span>
          </div>
        </div>
      </li>
      <li name="4">家电 插线板
        <div class="boxDiv">
          <div class="container">
            <img src="./images/bijiben.webp" alt="">
            <span>冰箱</span>
          </div>
          <div class="container">
            <img src="./images/xianshiqi.webp" alt="">
            <span>微波炉</span>
          </div>
        </div>
      </li>
      <li name="5">出行 穿戴
        <div class="boxDiv">
          <div class="container">
            <img src="./images/bijiben.webp" alt="">
            <span>手环5NFC</span>
          </div>
          <div class="container">
            <img src="./images/xianshiqi.webp" alt="">
            <span>无线车充</span>
          </div>
        </div>
      </li>
      <li name="6">智能 路由器
        <div class="boxDiv">
          <div class="container">
            <img src="./images/bijiben.webp" alt="">
            <span>打印机</span>
          </div>
          <div class="container">
            <img src="./images/xianshiqi.webp" alt="">
            <span>摄像机</span>
          </div>
        </div>
      </li>
      <li name="7">电源 配件
        <div class="boxDiv">
          <div class="container">
            <img src="./images/bijiben.webp" alt="">
            <span>移动电源</span>
          </div>
          <div class="container">
            <img src="./images/xianshiqi.webp" alt="">
            <span>手机壳</span>
          </div>
        </div>
      </li>
      <li name="8">健康 儿童
        <div class="boxDiv">
          <div class="container">
            <img src="./images/bijiben.webp" alt="">
            <span>洗手机</span>
          </div>
          <div class="container">
            <img src="./images/xianshiqi.webp" alt="">
            <span>体脂秤</span>
          </div>
        </div>
      </li>
      <li name="9">耳机 音箱
        <div class="boxDiv">
          <div class="container">
            <img src="./images/bijiben.webp" alt="">
            <span>小爱音箱 Art</span>
          </div>
          <div class="container">
            <img src="./images/xianshiqi.webp" alt="">
            <span>小米小爱音箱 Play</span>
          </div>
        </div>
      </li>
      <li name="10">生活 箱包
        <div class="boxDiv">
          <div class="container">
            <img src="./images/bijiben.webp" alt="">
            <span>小背包</span>
          </div>
          <div class="container">
            <img src="./images/xianshiqi.webp" alt="">
            <span>床垫</span>
          </div>
        </div>
      </li>
    </ul>
    <span class="left" id="left"><</span>
    <span class="right" id="right">></span>
    <div class="paging" id="paging">
      <span name="1"></span>
      <span name="2"></span>
      <span name="3"></span>
      <span name="4"></span>
      <span name="5"></span>
    </div>
  </div>

  <script src="./js/index.js"></script>
</body>
</html>

2.CSS部分

*{
  margin: 0;
  padding: 0;
}

li{
  list-style: none;
}

.banner{
  width: 1226px;
  height: 460px;
  margin: 50px auto;
  background-color: #fff;
  position: relative;
}

.banner img{
  width: 1226px;
  height: 460px;
}

.box{
  width: 234px;
  height: 460px;
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  left: 0;
}

.box li{
  cursor: pointer;
  width: 204px;
  height: 42px;
  line-height: 42px;
  padding: 0 0 0 30px;
  font-size: 14px;
  color: #fff;
}

.box li:first-child{
  margin-top: 20px;
}

.boxDiv{
  width: 530px;
  height: 460px;
  position: absolute;
  top: 0;
  left: 234px;
  background-color: #fff;
  display: none;
  z-index: 1;
}

.left,.right{
  cursor: pointer;
  display: block;
  width: 41px;
  height: 60px;
  line-height: 57px;
  text-align: center;
  color: #fff;
  font-size: 30px;
  background-color: rgba(0, 0, 0, 0);
  position: absolute;
  top: 210px;
}
.left{
  left: 234px;
}
.right{
  right: 0;
}

.paging{
  width: 100px;
  height: 20px;
  line-height: 20px;
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.paging span{
  cursor: pointer;
  display: block;
  float: left;
  width: 6px;
  height: 6px;
  border: 2px solid hsla(0,0%,100%,.3);
  border-radius: 10px;
  background-color: #00000066;
  margin: 0 4px;
}

.paging span:first-child{
  background-color: hsla(0,0%,100%,.3);
}

.container{
  float: left;
  width: 225px;
  height: 40px;
  color: #333;
  margin: 20px 0 0 20px;
}

.container img{
  float: left;
  width: 40px;
  height: 40px;
  margin-right: 12px;
}

.container span{
  display: block;
  float: left;
  width: 172px;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}

3.js部分

 var liArr = document.getElementById("box").getElementsByTagName("li");
 var boxDivArr = document.getElementsByClassName("boxDiv");
 var leftDom = document.getElementById("left");
 var rightDom = document.getElementById("right");
 var imgDom = document.getElementById("img");
 var spanArr = document.getElementById("paging").getElementsByTagName("span");
 var banner = document.getElementById("banner");
 var containerArr = document.getElementsByClassName("container");

//  console.log(spanArr);
var imgNum = img.src.split("/");
var num = parseInt(imgNum[imgNum.length-1].split(".")[0]);

// console.log(num);


//左侧导航栏内部盒子鼠标事件
for(var i=0;i<containerArr.length;i++){
  containerArr[i].onmouseover = function(){
    this.style.color = "#FF6700";
  }
}
for(var i=0;i<containerArr.length;i++){
  containerArr[i].onmouseout = function(){
    this.style.color = "#333";
  }
}

//鼠标移入时清除定时器
banner.onmouseover = function(){
  clearInterval(autoPlay);
}
//鼠标移出时添加定时器
banner.onmouseout = function(){
  autoPlay = setInterval(() => {
    num++;
     if(num>4){
      num=0;
     }
     show();
  }, 2000);
}

//给分页器添加点击事件
for(var i=0;i<spanArr.length;i++){
  spanArr[i].onclick = function(){
    num = parseInt(this.getAttribute("name"))-1;
    show();
  }
}

//给分页器添加鼠标移入事件
for(var i=0;i<spanArr.length;i++){
  spanArr[i].onmouseover = function(){
    var num1 = parseInt(this.getAttribute("name"))-1;
    for(var j=0;j<spanArr.length;j++){
      spanArr[j].style.backgroundColor = "#00000066";
    }
    spanArr[num].style.backgroundColor = "hsla(0,0%,100%,.3)";
    spanArr[num1].style.backgroundColor = "hsla(0,0%,100%,.3)";
  }
}

//给左侧导航栏添加鼠标移入事件
 for(var i=0;i<liArr.length;i++){
  liArr[i].onmouseover = function(){
    this.style.background = "#FF6700";
    var num = parseInt(this.getAttribute("name"))-1;
    boxDivArr[num].style.display = "block";
  }
 }
 //给左侧导航栏添加鼠标移出事件
 for(var i=0;i<liArr.length;i++){
  liArr[i].onmouseout = function(){
    this.style.background = "rgba(0, 0, 0, 0)";
    var num = parseInt(this.getAttribute("name"))-1;
    boxDivArr[num].style.display = "none";
  }
 }

 //前进/后退按钮鼠标移入/移出事件
 leftDom.onmouseover = function(){
  leftDom.style.backgroundColor = "rgba(0, 0, 0, 0.5)"
 }
 rightDom.onmouseover = function(){
  rightDom.style.backgroundColor = "rgba(0, 0, 0, 0.5)"
 }
 leftDom.onmouseout = function(){
  leftDom.style.backgroundColor = "rgba(0, 0, 0, 0)"
 }
 rightDom.onmouseout = function(){
  rightDom.style.backgroundColor = "rgba(0, 0, 0, 0)"
 }
 //前进/后退按钮鼠标点击事件
 rightDom.onclick = function(){
   num++;
   if(num>4){
    num=0;
   }
   show();
 }
 leftDom.onclick = function(){
  num--;
  if(num<0){
   num=4;
  }
  show();
}

//公共函数show()
function show(){
  for(var j=0;j<spanArr.length;j++){
    spanArr[j].style.backgroundColor = "#00000066";
  }
  spanArr[num].style.backgroundColor = "hsla(0,0%,100%,.3)";
  imgDom.src = "./images/"+num+".webp";
}

//定时器
var autoPlay = setInterval(() => {
  num++;
   if(num>4){
    num=0;
   }
   show();
}, 2000);