index.js(无缝滚动)

// 获取元素
var box = my$('box');
var screen = box.children[0];
var ul = screen.children[0];
var ol = screen.children[1];
var arr = my$('arr');
var arrLeft = my$('left');
var arrRight = my$('right');
var imgWidth = screen.offsetWidth;
// 1.动态生成序号
var count = ul.children.length;
for (var i = 0; i < count; i++) {
  var li = document.createElement('li');
  ol.appendChild(li);
  setInnerText(li, i + 1);
  // 让当前li记录它的索引
  //设置标签自定义属性
  li.setAttribute('index', i);
  // 让序列1高亮显示
  if (i === 0) {
    li.classList.add('current');
  }
  // 2.点击序号，滚动到序号对应的图片
  li.onclick = liClick; //事件在循环中调用，避免内存重复调用，改为函数调用
}

// ol中li点击事件
function liClick() {
  // 2.1让ol里面的li取消高亮显示，让当前点击的li高亮显示
  for (var i = 0; i < ol.children.length; i++) {
    var li = ol.children[i];
    li.classList.remove('current');
  }
  this.classList.add('current'); //this指向事件源 li
  // 2.2让图片滚动到当前对应的位置
  //获取图片宽度

  // 获取当前li的索引值
  var liIndex = parseInt(this.getAttribute('index')); // 这里要把字符串类型转成睡着类型
  index = liIndex; //同步图片与ol中索引值
  animate(ul, -liIndex * imgWidth);
}

// 3.鼠标放入盒子里面，自动显示上一张，下一张
box.onmouseenter = function() {
  arr.style.display = 'block';
  // 鼠标移入停止定时器
  clearInterval(timeId);
};
box.onmouseleave = function() {
  arr.style.display = 'none';
  //鼠标移出开始定时器
  timeId = setInterval(function() {
    arrRight.click();
  }, 2000);
};

// 4.点击上一张，下一章，图片对应切换
var index = 0; //第一张图片的索引

// 克隆li  cloneNode()  复制节点
// 参数  true  复制节点中的内容
//       false  只复制当前节点，不复制里面的内容
var liClone = ul.children[0].cloneNode(true); //克隆ul中第一张图片
ul.appendChild(liClone);
// ;
arrRight.onclick = function() {
  // 判断是否是克隆的第一张图片，如果是克隆的第一张图片，此时修改ul的坐标，显示真正的第一张图片
  if (index === count) {
    index = 0;
    ul.style.left = '0px';
  }
  // 总共有5张图片，但是还有一张克隆的图片  克隆的图片的索引是5
  // 4 < 5
  index++;
  if (index < count) {
    ol.children[index].click(); // 获取图片对应的序号，让序号点击
  } else {
    //如果是最后一张图片 以动画的方式，移动到克隆的第一张图片
    animate(ul, -index * imgWidth);
    // 取消所有序号的高亮显示，让第一序号高亮显示
    for (var i = 0; i < ol.children.length; i++) {
      var li = ol.children[i];
      li.classList.remove('current');
      if (i === 0) {
        li.classList.add('current');
      }
    }
  }
};
// 点击上一张
arrLeft.onclick = function() {
  // 如果当前是第一张图片，此时要偷偷的切换到最后一张图片的位置（克隆的第一张图片）
  if (index === 0) {
    index = count;
    ul.style.left = -index * imgWidth + 'px';
  }
  index--;
  ol.children[index].click();
};

// 5.自动播放
var timeId = setInterval(function() {
  arrRight.click();
}, 2000);