记一次仿京东首页的轮播图效果

偶然心想，觉得京东首页的轮播图的思路挺不错的，自己就仿着逻辑写了一个，这是一个刚写的初稿，只是模拟了轮播的性质，css细节上的并没有完善到位
也有一些地方不太完善，希望多多关照，

html代码

<div id="main">
<span id="span" class="clearfix"></span>
  <div class="left_f main_d" id="left"><</div>
  <div class="right_r main_d" id="right">></div>
  <div class="Carousel dsnon"><a href=""><img src="./img/7f55c39534d2fd7e.jpg" alt=""></a></div>
  <div class="Carousel"><a href=""><img src="./img/q.jpg" alt=""></a></div>
  <div class="Carousel"><a href=""><img src="./img/799efcdb5d6978a3.jpg.webp" alt=""></a></div>
  <div class="Carousel"><a href=""><img src="./img/5e6587f46997a85d.jpg" alt=""></a></div>
</div>

js代码

      //初始化变量
  var i;
      var setInt;//定时器变量
  const div_len = document.getElementsByClassName("Carousel");//图片数组
  const a = document.getElementsByClassName("a");//所有a的圆点
  //根据图片的数量自动生成类名为a的a标签,//html_dody:指定的父元素ID，div_bq:标签名，len数量,
  creat = (html_body, div_bq, len) => {
    var i;
    for (i = 0; i < len; i++) {
      var para = document.createElement(div_bq);
      var node = document.createTextNode("");
      para.appendChild(node);
      para.setAttribute("class", "a")
          //默认第一个设置一个显示的类名，不然全都不见了
      if (i === 0) {
        para.setAttribute("class", "a bbx")
      }
      var element = document.getElementById(html_body);
      element.appendChild(para);
    }
  };
  creat("span", "a", div_len.length);

  //初始化，给所有的a类和lbt类添加index索引， 为后面的轮播绑定做铺垫
  for (i = 0; i < a.length; i++) {
    a[i].index = i;
    div_len[i].index = i;
  }

  //图标右边按钮 点击切换图标
  img_click_add = () => {
    var i;
    for (i = 0; i < div_len.length; i++) {
      var class_list = div_len[i].getAttribute('class');
      var isclass = class_list.match('dsnon');
      if (isclass !== null) {
        a[i].classList.remove('bbx')
        div_len[i].classList.remove('dsnon')
        try {
          a[i + 1].classList.add('bbx')
          div_len[i + 1].classList.add("dsnon")
        } catch (e) {
          a[0].classList.add('bbx')
          div_len[0].classList.add("dsnon")
        }
        break
      }
    }
  }
  //图标左边按钮 点击切换图标
  img_click_minus = () => {
    var i;
    for (i = 0; i < div_len.length; i++) {
      var class_list = div_len[i].getAttribute('class');
      var isclass = class_list.match('dsnon');
      if (isclass !== null) {
        div_len[i].classList.remove('dsnon')
        a[i].classList.remove('bbx')
        try {
          div_len[i - 1].classList.add("dsnon")
          a[i - 1].classList.add('bbx')
        } catch (e) {
          a[div_len.length - 1].classList.add('bbx')
          console.log(div_len.length)
          div_len[div_len.length - 1].classList.add("dsnon")
        }
        break
      }
    }
  }
        //设置一个根据index播放的参数
	  const automatic = () => {
    if (nbr > div_len.length - 2 || nbr === div_len - 2) {
      nbr = 0;
    } else {
      nbr += 1
    }
    clearaway()
    div_len[nbr].classList.add('dsnon')
    a[nbr].classList.add('bbx')
  };
  //事件绑定
  document.getElementById('right').onclick = () => {
    img_click_add()
  };
  //事件绑定
  document.getElementById('left').onclick = () => {
    img_click_minus()
  };

        document.getElementById('main').onmouseover = () => {
      clearInterval(setInt)//清除setInt这个定时器
          }
          document.getElementById('main').onmouseout = () => {
            setInt = setInterval(automatic, 1000);//设置setInt定时器
          }
  //关键代码
  for (var key in a) {
    // console.log(a.index, a[key])
    a[key].onmouseover = function () {
      //鼠标放入前移除所有的bbx类
      for (i = 0; i < a.length; i++) {
        a[i].classList.remove('bbx')
      }
      //鼠标放入前移除所有的dsnon类
      for (i = 0; i < div_len.length; i++) {
        div_len[i].classList.remove('dsnon')
      }
      //关键部分，触发时间的时候给指定index索引的标签添加类名
      div_len[this.index].classList.add('dsnon')
      //圆点添加样式
      this.classList.add('bbx')
    }


  }