* {

  padding: 0;

  margin: 0;

}

​

li {

  list-style: none;

}

​

a {

  text-decoration: none;

  color: #050505;

}

​

@font-face {

  font-family: "iconfont";

  /* Project id 2303857 */

  src: url("//at.alicdn.com/t/font_2303857_w55dl274uko.woff2?t=1640252281330")

      format("woff2"),

    url("//at.alicdn.com/t/font_2303857_w55dl274uko.woff?t=1640252281330")

      format("woff"),

    url("//at.alicdn.com/t/font_2303857_w55dl274uko.ttf?t=1640252281330")

      format("truetype");

}

​

.banner {

  position: relative;

  margin: 50px auto;

  border: 1px solid #ccc;

  width: 500px;

  height: 400px;

  overflow: hidden;

}

​

.banner_button {

  display: none;

  position: absolute;

  font-family: "iconfont";

  top: 50%;

  background: rgba(208, 208, 208, 0.5);

  width: 30px;

  height: 30px;

  line-height: 30px;

  text-align: center;

  transform: translate(0, -50%);

}

​

.left_button {

  left: 0px;

}

​

.right_button {

  right: 0px;

}

​

.steta ul {

  position: absolute;

  top: 93%;

  left: 50%;

  transform: translate(-50%, -50%);

  height: 30px;

  line-height: 30px;

  text-align: center;

}

​

.steta ul li {

  float: left;

  width: 15px;

  height: 15px;

  border-radius: 50%;

  margin: 0 10px;

  border: 1px solid #ffffff;

}

​

.colorr {

  background-color: #ffffff;

}

​

.img {

  position: absolute;

  width: 3000px;

  z-index: -1;

}

​

.img li {

  float: left;

  width: 500px;

  height: 400px;

}

​

.img img {

  width: 100%;

  height: 100%;

}

​

var banner = document.querySelector(".banner");

var lb = document.querySelector(".left_button");

var rb = document.querySelector(".right_button");

var img = document.querySelector(".img");

var steta_ul = document.querySelector(".steta").querySelector("ul");

​

// 图片和小圆点 标识符（以 下标 为参照物）

var num = 0;

​

// 所有图片

var img_ul = img.querySelector("ul");

// 单个图片的宽度

var img_li_wdith = img_ul.children[0].offsetWidth;

​

// 鼠标经过 左右按钮显示

banner.addEventListener("mouseenter", function () {

  lb.style.display = "block";

  rb.style.display = "block";

  // 清除 自动播放定时器

  clearInterval(timer);

  timer = null; // 清除定时器变量

});

// 鼠标离开，按钮隐藏

banner.addEventListener("mouseleave", function () {

  lb.style.display = "none";

  rb.style.display = "none";

  // 重新添加定时器

  timer = setInterval(function () {

    // 手动调用 点击事件

    rb.click();

  }, 2000);

});

​

// 根据图片数量添加小圆点

for (var i = 0; i < img_ul.children.length; i++) {

  // 先创建元素，在添加元素

  var li = document.createElement("li");

  // 给元素设置自定义属性，记录索引号

  li.setAttribute("index", i);

  steta_ul.appendChild(li);

  // 小圆圈变色

  li.addEventListener("click", function () {

    // 清除所有小圆圈的颜色

    for (var j = 0; j < steta_ul.children.length; j++) {

      steta_ul.children[j].className = "";

    }

    // 给点击的小圆圈变色（增加类）

    this.className = "colorr";

​

    // 点击小圆圈，变更图片

    // 获取 点击圆圈的 index 属性

    var index = this.getAttribute("index");

    // 防止 图片切换错乱

    num = index;

    // 调用 移动函数

    animate(img, -img_li_wdith * index);

  });

}

// 默认显示第一个小圆点

steta_ul.children[0].className = "colorr";

​

// 克隆 第一个图片 添加到最后，做无缝转换

//  小圆点已添加完成，克隆图片不会影响 小圆点的数量

var clone_li = img_ul.children[0].cloneNode(true);

img.querySelector("ul").appendChild(clone_li);

​

// 点击 左右按钮，图片移动（根据 num 值判断）

rb.addEventListener("click", function () {

  // 无缝衔接

  if (num == img_ul.children.length - 1) {

    img.style.left = 0 + "px";

    num = 0;

  }

  // 根据 num 值 更变图片

  num++;

  animate(img, -img_li_wdith * num);

  // 小圆点 跟随 图片 变化

  circleChange();

});

lb.addEventListener("click", function () {

  if (num == 0) {

    num = img_ul.children.length - 1;

    img.style.left = -img_li_wdith * (img_ul.children.length - 1) + "px";

  }

  num--;

  animate(img, -img_li_wdith * num);

  // 小圆点 跟随 图片 变化

  circleChange();

});

​

// 自动播放轮播图

var timer = setInterval(function () {

  // 手动调用 点击事件

  rb.click();

}, 2000);

​

// 封装 小圆点移动函数

function circleChange() {

  // 清除 所有圆点的 样式

  for (var j = 0; j < steta_ul.children.length; j++) {

    steta_ul.children[j].className = "";

  }

  // 对 操作的圆点 添加 样式

  if (num === img_ul.children.length - 1) {

    // 无缝衔接时，改变第一个圆点样式

    steta_ul.children[0].className = "colorr";

  } else {

    steta_ul.children[num].className = "colorr";

  }

}

​

// 封装 移动函数

function animate(obj, target, callback) {

  // 先清除以前的定时器，只保留当前的一个定时器执行

  clearInterval(obj.timer);

  obj.timer = setInterval(function () {

    // 步长值写到定时器的里面

    // 把我们步长值改为整数 不要出现小数的问题

    var step = (target - obj.offsetLeft) / 10;

    step = step > 0 ? Math.ceil(step) : Math.floor(step);

    if (obj.offsetLeft == target) {

      // 停止动画 本质是停止定时器

      clearInterval(obj.timer);

      // 回调函数写到定时器结束里面

      callback && callback();

    }

    // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10

    obj.style.left = obj.offsetLeft + step + "px";

  }, 15);

}

​