WebTest/pinyougou/js/index.js

window.onload = function () {
  var focus = document.querySelector('.focus');
  var arrow_l = document.querySelector('.arrow-l');
  var arrow_r = document.querySelector('.arrow-r');
  var ul = focus.querySelector('ul');
  var ol = focus.querySelector('.circle');
  focus.addEventListener('mouseenter', function () {
    arrow_l.style.display = 'block';
    arrow_r.style.display = 'block';
    clearInterval(timer);
  });
  focus.addEventListener('mouseleave', function () {
    arrow_l.style.display = 'none';
    arrow_r.style.display = 'none';
    timer = setInterval(() => {
      arrow_r.click();
    }, 2000);
  });
  for(var i = 0; i < ul.children.length; i++) {
    var li = this.document.createElement('li');
    li.setAttribute('index', i);
    ol.appendChild(li);
    li.addEventListener('click', function () {
      var index = this.getAttribute('index');
      var left = -1 * index * focus.offsetWidth;
      // 每点一个小li，就要滚动图片的位置
      animate(ul, left);
      liChange(this);
      num = index;
    });
  }
  ol.children[0].className = 'current';
  // 循环图片，克隆第一张放到尾部
  ul.appendChild(ul.children[0].cloneNode(true));
  var num = 0;
  arrow_l.addEventListener('click',  function () {
    if(num == 0){
      num = ul.children.length-1;
      ul.style.left = -1 * num * focus.offsetWidth + 'px';
    }
    num--;
    var left = -1 * num * focus.offsetWidth;
    animate(ul, left);
    liChange(ol.children[num%ol.children.length]);
  });
  arrow_r.addEventListener('click',  function () {
    if(num == ul.children.length-1){
      num = 0;
      ul.style.left = 0;
    }
    num++;
    var left = -1 * num * focus.offsetWidth;
    animate(ul, left);
    liChange(ol.children[num%ol.children.length]);
  });
  var timer = setInterval(() => {
    arrow_r.click();
  }, 2000);

  function liChange(obj) {
    // 排他思想，给点击的小li加上样式
    for(var i = 0; i < ol.children.length; i++){
      ol.children[i].className = '';
    }
    obj.className = 'current';
  }
}