轮播图 | Ataraxia

布局：

一个显示图片窗口，不显示超过显示窗口的图片
一个水平显示图片的imgBox
一个图片位置标记
一个左右切换的按钮

功能：

打开网页自动切换图片，位置标记也相应改变
点击位置标记切换到对应图片
点击左右按钮进行图片切换
进入图片框计时暂停，离开重新开始计时

实现细节

用index标记空值当前应该显示的图片和图片标记的位置。
图片的display设为block消去3px的空隙
将图片设置为浮动使其水平显示
位置标识的li的display设为inline-block并被li设置宽高，使其水平显示
鼠标移到对应标记位置显示对应的图片

ref

let index = 0;
let timer = null;
let wrapperContainer = document.querySelector(".wrapper-container");
let wrapper = document.querySelector(".wrapper");
let imgNum = wrapper.children[0].children.length;
let conWidth = wrapperContainer.offsetWidth;

let indicatorList = document.querySelector(".indicator ul").children;
// 根据index显示对应图片
let picChange = function() {
  index = index === imgNum ? 0:index;// 4就变成0
  index = index === -1 ? 3:index;// -1就变成4
  wrapper.style.left = -index*conWidth+'px';// 图片更新
  // 标记更新
  let active = document.querySelector(".active");
  active.className = '';
  indicatorList[index].className = 'active';
}

function autoPlay() {
  index++;

  picChange();

  timer = setTimeout(autoPlay ,2000);
};

timer = setTimeout(autoPlay, 2000);

let stopAction = function () {
  clearTimeout(timer);
}
let restartAction = function () {
  timer = setTimeout(autoPlay ,2000);
}

wrapperContainer.addEventListener('mouseenter', stopAction);
wrapperContainer.addEventListener('mouseleave', restartAction);

let leftArrow = document.querySelector('.left-arrow');
let rightArrow = document.querySelector('.right-arrow');

leftArrow.addEventListener('click',()=>{
  index--;
  picChange();
})
rightArrow.addEventListener('click',()=>{
  index++;
  picChange();
})


for (let i = 0; i < indicatorList.length; i++) {
  indicatorList[i].addEventListener('mouseover', ()=>{
    index = i;
    picChange();
  });
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>轮播图</title>
  <link rel="stylesheet" href="./style.css">
  <script defer src="./src/index.js"></script>
</head>
<body>
  <!-- 显示框 -->
  <div class="wrapper-container">
    <!-- 图片框 -->
    <div class="wrapper">
      <ul>
        <li><img src="./1.jpg" alt=""></li>
        <li><img src="./2.jpg" alt=""></li>
        <li><img src="./3.jpg" alt=""></li>
        <li><img src="./4.jpg" alt=""></li>
      </ul>
    </div>
    <!-- 位置标识 -->
    <div class="indicator">
      <ul>
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <!-- 左右箭头 -->
    <div class="arrow-container">
      <!-- <div class="left-arrow"></div>
      <div class="right-arrow"></div> -->
      <a href="#" class="left-arrow">&lt;</a>
      <a href="#" class="right-arrow">&gt;</a>
    </div>
  </div>

</body>
</html>

* {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}


.wrapper-container {
  position: relative;
  width: 600px;
  height: 400px;
  margin-left: 300px;
  overflow: hidden;
}

.wrapper {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 400%;
}

img {
  float: left;
  display: block;
  width: 600px;
}

.indicator {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50px);
  z-index: 3;
}

.indicator li {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: pink;
  margin-right: 10px;
}

li.active {
  background-color: red;
}

.arrow-container {
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: space-between;
  align-items: center;
}

/* 左右箭头 div版 */
/* .left-arrow, .right-arrow {
  height: 15px;
  width: 15px;
  background-color: blue;
  cursor: pointer;
} */

.left-arrow, .right-arrow {
  display: inline-block;
  width: 50px;
  height: 50px;
}

a {
  outline: none;  /*outline?*/
  text-decoration: none;
  font-size: 30px;
  /* 水平垂直居中 */
  text-align: center;
  line-height: 50px;
}