轮播图效果实现

html代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="all" id='box'>
  <div class="screen">
    <ul>
      <li><img src="1.jpg" width="500" height="200"/></li>
      <li><img src="2.jpg" width="500" height="200"/></li>
      <li><img src="3.jpg" width="500" height="200"/></li>
      <li><img src="4.jpg" width="500" height="200"/></li>
      <li><img src="5.jpg" width="500" height="200"/></li>
    </ul>
    <ol></ol>
  </div>
  <div id="arr">
    <span id="left">&lt;</span>
    <span id="right">&gt;</span>
  </div>
</div>

css代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
* {
  padding: 0;
  margin: 0;
  list-style: none;
  border: 0;
}

.all {
  width: 500px;
  height: 200px;
  padding: 7px;
  border: 1px solid #ccc;
  margin: 100px auto;
  position: relative;
}

.screen {
  width: 500px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.screen li {
  width: 500px;
  height: 200px;
  overflow: hidden;
  float: left;
}

.screen ul {
  position: absolute;
  left: 0;
  top: 0px;
  width: 3000px;
}

.all ol {
  position: absolute;
  right: 10px;
  bottom: 10px;
  line-height: 20px;
  text-align: center;
}

.all ol li {
  float: left;
  width: 20px;
  height: 20px;
  background: #fff;
  border: 1px solid #ccc;
  margin-left: 10px;
  cursor: pointer;
}

.all ol li.current {
  background: #DB192A;
}

#arr {
  display: none;
}

#arr span {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 5px;
  top: 50%;
  margin-top: -20px;
  background: #000;
  cursor: pointer;
  line-height: 40px;
  text-align: center;
  font-weight: bold;
  font-family: '黑体';
  font-size: 30px;
  color: #fff;
  opacity: 0.3;
  border: 1px solid #fff;
}

#arr #right {
  right: 5px;
  left: auto;
}

JavaScript代码

获取相关元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 获取最外层的div
let box = document.getElementById("box");
// 获取相框
let screen = box.children[0];
// 获取ul
let ulObj = screen.children[0];
// 获取ul中的所有的li
let list = ulObj.children;
// 获取ol
let olObj = screen.children[1];
// 焦点的div
let arr = document.getElementById("arr");
// 获取相框的宽度
let imgWidth = screen.offsetWidth;
// 全局变量，图片索引值
let pic = 0;

动态创建按钮，设置按钮相关操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 根据li个数创建小按钮
for (let i = 0; i < list.length; i++) {
  // 创建li标签,加入到ol中
  let liObj = document.createElement("li");
  olObj.appendChild(liObj);
  // 按钮上显示的数字
  liObj.innerHTML = (i + 1);
  // 在每个ol中的li标签上添加一个自定义属性,存储索引值
  liObj.setAttribute("index", i);
  
  // 注册鼠标进入事件
  liObj.onmouseover = function () {
      // 先清除所有的ol中的li的背景颜色
      for (let j = 0; j < olObj.children.length; j++) {
          olObj.children[j].removeAttribute("class");
      }
      // 设置当前鼠标进来的li的背景颜色
      this.className = "current";
      // 获取鼠标进入的li的当前索引值
      pic = this.getAttribute("index");
      // 移动ul
      animate(ulObj, -pic * imgWidth);
  };
}

初始设置

1
2
3
4
5
// 设置ol中第一个li有背景颜色
olObj.children[0].className = "current";
// 克隆一个ul中第一个li,加入到ul中的最后
// cloneNode()传递给它的参数是true，它将递归复制当前节点的所有子孙节点。
ulObj.appendChild(ulObj.children[0].cloneNode(true));

设置左右按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
// 右边按钮
document.getElementById("right").onclick = clickHandle;
// 向右跳转动画
function clickHandle() {
  // 如果pic的值是ul中li的个数-1的值,此时页面显示克隆的图片,而用户会认为这是第一个图
  // 所以,如果用户再次点击按钮,用户看到的是第二个图片
  if (pic === list.length - 1) {
    // 从第6个图,跳转到第一个图
    // 先设置索引pic=0
    pic = 0;
    // 把ul的位置还原成开始的默认位置
    ulObj.style.left = 0 + "px";
  }
  // 设置pic加1,此时用户就会看到第二个图片了
  pic++;
  // pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
  animate(ulObj, -pic * imgWidth);
  // 如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色
  if (pic == list.length - 1) {
    // 第五个按钮颜色干掉
    olObj.children[olObj.children.length - 1].className = "";
    // 第一个按钮设置颜色
    olObj.children[0].className = "current";
  } else {
    // 干掉所有的小按钮的背景颜色
    for (let i = 0; i < olObj.children.length; i++) {
      olObj.children[i].removeAttribute("class");
    }
    // 当前的pic索引对应的按钮设置颜色
    olObj.children[pic].className = "current";
  }
};
  
// 左边按钮
document.getElementById("left").onclick = function () {
  // 如果此时在第一张图片迅速跳到第六张图
  if (pic == 0) {
    pic = 5;
    ulObj.style.left = -pic * imgWidth + "px";
  }
  pic--;
  animate(ulObj, -pic * imgWidth);
  // 设置按钮的颜色---所有的按钮干掉颜色
  for (let i = 0; i < olObj.children.length; i++) {
    olObj.children[i].removeAttribute("class");
  }
  // 当前的pic索引对应的按钮设置颜色
  olObj.children[pic].className = "current";
};

自动播放

1
2
3
4
5
6
7
8
9
10
11
12
13
let timeId = setInterval(clickHandle,1000);
  // 鼠标进入，显示左右焦点的div
  box.onmouseover = function () {
    arr.style.display = "block";
    // 鼠标进入废掉之前的定时器
    clearInterval(timeId);
  };
  // 鼠标离开，隐藏左右焦点的div
  box.onmouseout = function () {
    arr.style.display = "none";
    // 鼠标离开自动播放
    timeId = setInterval(clickHandle,1000);
  };

移动动画的函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 设置任意的一个元素,移动到指定的目标位置
function animate(element, target) {
  // 先清除定时器
  clearInterval(element.timeId);
  // 定时器的id值存储到对象的一个属性中
  element.timeId = setInterval(function () {
    // 获取元素的当前的位置
    let current = element.offsetLeft;
    // 每次移动的距离
    step = current < target ? 10 : -10;
    // 从当前位置移动到目标位置
    current += step;
    // 比较离目标位置的距离与每次移动的距离
    if (Math.abs(current - target) > Math.abs(step)) {
      element.style.left = current + "px";
    } else {
      // 清理定时器
      clearInterval(element.timeId);
      // 离目标的距离小于每次移动的距离时，直接到达目标
      element.style.left = target + "px";
    }
  }, 10);
}