轮播图（二）--4种无缝切换轮播图

发表于 | 更新于: | 分类于 | | 阅读次数:
字数统计: 5.1k 字 | 阅读时长 ≈ 24 分钟
本篇介绍了4种不同的无缝切换轮播图的实现方法

本篇介绍了目前最常用的4种无缝切换轮播图的实现方法，它们各有特点，但都引了同一个js动画函数（这个函数是我自己封装的），我们一起来看看吧

moveAnimation动画函数

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
function moveAnimation(obj, json, fn) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function () {
      var flag = true;
      //用来判断是否停止定时器的条件，一定要写到定时器的里面（每隔30ms判断一次定时器是否应该停止），遍历的外面
      for (var attr in json) {
          var current = 0;
          if (attr == "opacity") {
              current = parseInt(getStyle(obj, attr) * 100)||0;  // 防止ie中不认识opacity从而输出undefined
          } else {
              current = parseInt(getStyle(obj, attr));
          }
          var step = (json[attr] - current) / 10;
          step = step > 0 ? Math.ceil(step) : Math.floor(step);
          if (attr == "opacity") {  // 判断要做动画的样式中是否有opacity
              if ("opacity" in obj.style) {  // 判断浏览器是否支持opacity样式
                  obj.style[attr] = (current + step) / 100;
              } else {
                  obj.style.filter = "alpha(opacity=" + (current + step) + ")";
              }
          } else if (attr == "zIndex") {
              obj.style[attr]=json[attr];  // zIndex一般不要加过渡动画
          } else {
              obj.style[attr] = current + step + "px";
          }
          if (current != json[attr]) {
              flag = false;
          }
      }
      if (flag) {
          clearInterval(obj.timer);
          if (fn) {
              fn();//定时器停止后执行回调函数
          }
      }
  }, 30)
}
function getStyle(obj, attr) {
  if (obj.currentStyle) {
      return obj.currentStyle[attr];
  } else {
      return window.getComputedStyle(obj, null)[attr];
  }
}

这个动画函数，几乎涵盖了大部分可以做动画的样式，当我们需要对元素进行动画时，可以直接使用它。在下面以及接下来有关于轮播图的博客中，我们都会使用这个函数，这里先介绍了，后续我们就直接使用了，不再做过多的介绍了哦。

无缝切换轮播图（有箭头，无序号）

轮播图自动切换，鼠标进入停止切换，鼠标移除继续自动切换，并且可以通过点击左右箭头来控制切换上一张或下一张图片，没有图片序号，不能通过序号来进行图片切换

核心思想

当前图片右侧的图片从右侧滑入，当前图片左侧的图片从左侧滑入，修改ul的left值，控制图片的滑动，当最后一张图片在可视区域时，下一张图片（也就是第一张图片）应该从右侧滑入才满足轮播图的需要，而不是从左侧滑动直到第一张。那么我们怎么解决最后一张图片在显示的同时，第一张图片又在可视区的右侧呢？其实上一篇博客中我们已经介绍了这种问题的解决方法：就是复制第一张图片，添加到最后一张图片的后面。
兼顾对于左右箭头（也就是切换上一张、下一张图片的显示）和自动轮播效果，其实自动轮播效果就等同于每隔一段时间点击一次右箭头（切换下一张图片）。这样想，整个思路是不是清晰很多了，也就是我们只需要考虑点击不同的按钮ul向左或向右滑一定的距离即可

完整代码

效果预览
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
html,
body {
    margin: 0;
    padding: 0;
}
ul,
ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
.wrap {
    width: 400px;
    height: 260px;
    padding: 5px;
    border: 1px solid #ccc;
    margin: 100px auto;
    position: relative;
}
.slide {
    width: 400px;
    height: 260px;
    position: relative;
    overflow: hidden;
}
ul {
    width: 3200px;
    position: absolute;
    left: 0;
}
ul li {
    float: left;
}
img {
    width: 400px;
    height: 260px;
    vertical-align: middle;
}
.arr {
    width: 400px;
    height: 50px;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    display: none;
}
.arr span {
    width: 50px;
    line-height: 50px;
    text-align: center;
    font-family: "黑体";
    font-size: 30px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #ccc;
    position: absolute;
    cursor: pointer;
}
.arr .pre {
    left: 0px;
}
.arr .next {
    right: 0px;
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="wrap" id="wrap">
    <div class="slide" id="slide">
        <ul id="ul">
            <li><img src="img/1.jpg" alt=""></li>
            <li><img src="img/2.jpg" alt=""></li>
            <li><img src="img/3.jpg" alt=""></li>
            <li><img src="img/4.jpg" alt=""></li>
            <li><img src="img/5.jpg" alt=""></li>
            <li><img src="img/6.jpg" alt=""></li>
            <li><img src="img/7.jpg" alt=""></li>
        </ul>
        <div class="arr" id="arr">
            <span class="pre" id="pre"><</span>
            <span class="next" id="next">></span>
        </div>
    </div>
</div>

JS

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
var wrap = document.getElementById('wrap');
var ul = document.getElementById('ul');
var lis = ul.children;
var lis_len = lis.length;  // 7
var lefter = lis[0].offsetWidth;
var arr = document.getElementById('arr');
var next = document.getElementById('next');
var pre = document.getElementById('pre');
var key = 0;
var timer = null;
ul.append(lis[0].cloneNode(true)); //复制第1张图片并追加到最后,此时lis.length为8,而lis_len仍为7
//自动执行动画nextAnimate
timer = setInterval(nextAnimate, 2000);//每隔3s执行一次点击next动画
//分别点击next/pre执行函数
arr.addEventListener('click', function (e) {
    var e = e || window.e;
    var target = e.target || e.srcElement;
    var targetId = target.id;
    if (targetId === 'next') {
        nextAnimate();
    } else {
        preAnimate();
    }
});
//鼠标经过停止动画
wrap.addEventListener('mouseover', function () {
    arr.style.display = "block";
    clearInterval(timer);
})
//鼠标移出开启动画
wrap.addEventListener('mouseout', function () {
    arr.style.display = "none";
    timer = setInterval(nextAnimate, 2000);
})
//点击next按钮动画
function nextAnimate() {
    key++;
    if (key > lis_len) {//lis.length为8,当key为7时，要显示第8张（也就是第1张图），当key为8时要显示第2张图，第2张图的当前key值为1
        ul.style.left = 0;//让当前显示的是第1张图
        key = 1;//要显示第2张图
    }
    moveAnimation(ul, { left: -key * lefter });//执行动画，滑动到要显示的图片
}
//点击pre按钮动画
function preAnimate() {
    key--;
    if (key < 0) {//key为0时，要显示第1张图（也就是倒数第1张图），当key为-1时要显示倒数第2张图，也就是第7张图，第7张图的当前key值为6
        ul.style.left = -lis_len * lefter + "px";//让当前显示的是倒数第1张图
        key = lis_len-1;//要显示倒数第2张，也就是第7张图
    }
    moveAnimation(ul, { left: -key * lefter });//执行动画，滑动到要显示的图片
}

注：上面的JS代码中，用key值保存当前显示的图片的下标，其最大值为“原始图片数组.length+1”（这里为8），当key=0时显示的是第1张图片，当key=6时当前显示的是第7张图片，当key=7时当前显示的是第8张（由第一张复制而来，视觉上等同于第1张图片），当key=8时要显示第2张图片，此时让ul.style.left=0瞬时让整个ul回归原位（此时可视区显示的是第一张图片，key=0,要显示第二张，则让key=1，再执行moveAnimation函数即可）。只要搞懂这个，上面的代码就没有什么难理解的了。另外，别忘了引上面那个moveAnimation动画函数

无缝切换轮播图（无箭头，有序号）

轮播图自动切换，鼠标进入停止切换，鼠标移除继续自动切换，并且可以通过鼠标经过序号来控制切换任何一张图片，没有左右箭头，不能通过箭头来进行上一张或下一张图片切换

核心思想

原理跟前面的相同，同样是复制第一张图片到最后。这种方式与之前不同的是，要根据图片的数目生成下标序号，通过鼠标经过下标序号来切换图片显示，当当前显示的图片跟我们要切换显示的图片不相邻时，可视区快速通过间隔图片直到滑动到我们所要显示的图片为止

完整代码

效果预览
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
html,
body {
    margin: 0;
    padding: 0;
}

ul,
ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
.wrap {
    width: 400px;
    height: 260px;
    padding: 5px;
    border: 1px solid #ccc;
    margin: 100px auto;
    position: relative;
}
.slide {
    width: 400px;
    height: 260px;
    position: relative;
    overflow: hidden;
}
ul {
    width: 3200px;
    position: absolute;
    left: 0;
}
ul li {
    float: left;
}
img {
    width: 400px;
    height: 260px;
    vertical-align: middle;
}
ol {
    width: 200px;
    position: absolute;
    bottom: 5px;
    left: 50%;
    margin-left: -100px;
}
ol li {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    float: left;
    margin-right: 10px;
    background-color: #fff;
    color: #000;
    border-radius: 50%;
    cursor: pointer;
}
ol li:last-child {
    margin-right: 0;
}
ol li.cur {
    background-color: yellowgreen;
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="wrap" id="wrap">
    <div class="slide" id="slide">
        <ul id="ul">
            <li><img src="img/1.jpg" alt=""></li>
            <li><img src="img/2.jpg" alt=""></li>
            <li><img src="img/3.jpg" alt=""></li>
            <li><img src="img/4.jpg" alt=""></li>
            <li><img src="img/5.jpg" alt=""></li>
            <li><img src="img/6.jpg" alt=""></li>
            <li><img src="img/7.jpg" alt=""></li>
        </ul>
    </div>
</div>

JS

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
var wrap = document.getElementById('wrap');
var slide = document.getElementById('slide');
var ul = document.getElementById('ul');
var lis = ul.children;
var lis_len = lis.length;//7
var lefter = lis[0].offsetWidth;
var ol = document.createElement('ol');//创建ol
for (var i = 0; i < lis_len; i++) {
    var li = document.createElement('li');
    li.innerHTML = i + 1;
    ol.append(li);//把li追加到ol中
}
slide.append(ol);//把ol追加到页面中
var ollis = ol.children;
ollis[0].className = "cur";
ul.append(lis[0].cloneNode(true)); // 复制第一张图片插入到最后,此时lis.length为8,而lis_len仍为7
var cir_num = 0;//控制当前circle序号
var key = 0;//控制显示的图片序号
//自动执行动画
var timer = null;
timer = setInterval(nextAnimate, 2000);//注：不要用ul.timer会跟moveAnimation里的定时器冲突
//鼠标经过ollis切换到当前序号的图片显示
for (var i = 0; i < lis_len; i++) {
    ollis[i].index = i;//获取当前遍历到的序号
    ollis[i].addEventListener('mouseover', function () {//鼠标移动到circle上切换图片            
        cir_num = key = this.index;//从当前图片开始播放切换
        moveAnimation(ul, { left: -key * lefter });//鼠标经过，滚动到当前图片
        toggleCur();
    })
}
//鼠标经过停止动画
wrap.addEventListener('mouseover', function () {
    clearInterval(timer);
});
//鼠标移出开启动画
wrap.addEventListener('mouseout', function () {
    timer = setInterval(nextAnimate, 2000);
})
//自动执行动画函数
function nextAnimate() {
    key++;
    if (key > lis_len) {//lis.length值为8，当key值为8时，当前显示的是第1张图，要显示第2张图
        ul.style.left = 0;
        key = 1;//如果key值为0会导致1张图重复播放
    }
    moveAnimation(ul, { left: -key * lefter });
    cir_num++;
    cir_num>lis_len-1?cir_num=0:cir_num;//当播放到第8张图片（也就是第1张图片）时，第1个数字为当前标识
    toggleCur();
}
//切换olli的类cur
function toggleCur() {
    for (var i = 0; i < lis_len; i++) {
        ollis[i].className = "";
    }
    ollis[cir_num].className = "cur";
}

注：这里key存储的是可视区显示的图片的序号，由于复制了第一张图片的原因，key值最大可取到“原始图片数组.length+1”（这里为8），当key=8时为要显示第二张图片；而cir_num存储的是ol中下标的序号，其值最大为“原始图片数组.length-1”（这里为6），当cir_num=6时，当前显示的是第7张图片

无缝切换轮播图（有箭头，有序号）

这种方式既可以自动轮播，又可以通过点击左右箭头切换图片，同时还可以通过下标来控制任何一张的显示。其实搞懂了上面两种方式，这种方式就显得很简单了，它就是上面两种方式的综合版

核心思想

①复制第1张图片到最后②图片自动轮播即每隔一段时间点击一次右箭头（下一张）③通过key控制当前显示的图片，通过cir_num控制下标序号

完整代码

效果预览
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
87
88
html,
body {
    margin: 0;
    padding: 0;
}
ul,
ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
.wrap {
    width: 400px;
    height: 260px;
    padding: 5px;
    border: 1px solid #ccc;
    margin: 100px auto;
    position: relative;
}
.slide {
    width: 400px;
    height: 260px;
    position: relative;
    overflow: hidden;
}
ul {
    width: 3200px;
    position: absolute;
    left: 0;
}
ul li {
    float: left;
}
img {
    width: 400px;
    height: 260px;
    vertical-align: middle;
}
.arr {
    width: 400px;
    height: 50px;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    display: none;
}
.arr span {
    width: 50px;
    line-height: 50px;
    text-align: center;
    font-family: "黑体";
    font-size: 30px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #ccc;
    position: absolute;
    cursor: pointer;
}
.arr .pre {
    left: 0px;
}
.arr .next {
    right: 0px;
}
ol {
    width: 200px;
    position: absolute;
    bottom: 5px;
    left: 50%;
    margin-left: -100px;
}
ol li {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    float: left;
    margin-right: 10px;
    background-color: #fff;
    color: #000;
    border-radius: 50%;
    cursor: pointer;
}
ol li:last-child {
    margin-right: 0;
}
ol li.cur {
    background-color: yellowgreen;
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="wrap" id="wrap">
    <div class="slide" id="slide">
        <ul id="ul">
            <li><img src="img/1.jpg" alt=""></li>
            <li><img src="img/2.jpg" alt=""></li>
            <li><img src="img/3.jpg" alt=""></li>
            <li><img src="img/4.jpg" alt=""></li>
            <li><img src="img/5.jpg" alt=""></li>
            <li><img src="img/6.jpg" alt=""></li>
            <li><img src="img/7.jpg" alt=""></li>
        </ul>
        <div class="arr" id="arr">
            <span class="pre" id="pre"><</span>
                    <span class="next" id="next">></span>
        </div>
    </div>
</div>

JS

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
var wrap = document.getElementById('wrap');
var slide = document.getElementById('slide');
var ul = document.getElementById('ul');
var lis = ul.children;
var lis_len = lis.length;//7
var lefter = lis[0].offsetWidth;
var arr = document.getElementById('arr');
var ol = document.createElement('ol');//创建ol
for (var i = 0; i < lis_len; i++) {
    var li = document.createElement('li');
    li.innerHTML = i + 1;
    ol.append(li);//把li追加到ol中
}
slide.append(ol);//把ol追加到页面中
var ollis = ol.children;
ollis[0].className = "cur";
ul.append(lis[0].cloneNode(true)); // 复制第一张图片插入到最后,此时lis.length为8,而lis_len仍为7
var cir_num = 0;//控制当前circle序号
var key = 0;//控制显示的图片序号
//自动执行动画nextAnimate
var timer = null;
timer = setInterval(nextAnimate, 2000);//注：不能用ul.timer会跟moveAnimation里的定时器冲突
//分别点击next/pre执行函数
arr.addEventListener('click',function(e){
    var e=e||window.e;
    var target=e.target||e.srcElement;
    var targetId=target.id;
    if(targetId==='next'){
        nextAnimate();
    }else{
        preAnimate();
    }
});
//鼠标经过ollis切换到当前序号的图片显示
for (var i = 0; i < lis_len; i++) {
    ollis[i].index = i;//获取当前遍历到的序号
    //鼠标移动到circle上切换图片
    ollis[i].addEventListener('mouseover', function () {
        cir_num = key = this.index;//从当前图片开始播放切换
        moveAnimation(ul, { left: -key * lefter });//鼠标经过，滚动到当前图片
        toggleCur();
    })
}
//鼠标经过停止动画
wrap.addEventListener('mouseover', function () {
    arr.style.display = 'block';
    clearInterval(timer);
});
//鼠标移出开启动画
wrap.addEventListener('mouseout', function () {
    arr.style.display = 'none';
    timer = setInterval(nextAnimate, 2000);
})
//next动画函数/自动执行动画函数，自动执行即每隔规定时间触发一次next动画函数
function nextAnimate() {
    key++;
    if (key > lis_len) {//lis.length值为8，当key值为8时，当前显示的是第1张图，要显示第2张图
        ul.style.left = 0;
        key = 1;//如果key值为0会导致1张图重复播放
    }
    moveAnimation(ul, { left: -key * lefter });
    cir_num++;
    cir_num>lis_len-1?cir_num=0:cir_num;//当播放到第8张图片（也就是第1张图片）时，第1个数字为当前标识        
    toggleCur();
}
//pre动画
function preAnimate() {
    key--;
    if (key < 0) {
        ul.style.left = -lis_len * lefter + "px";
        key = lis_len-1;
    }
    moveAnimation(ul, { left: -key * lefter });       
    cir_num--;
    cir_num<0?cir_num=lis_len-1:cir_num;
    toggleCur();
}
//切换olli的类cur
function toggleCur() {
    for (var i = 0; i < lis_len; i++) {
        ollis[i].className = "";
    }
    ollis[cir_num].className = "cur";
}

上面这三种就是无缝切换轮播图的三种形式了，下面我们将介绍一种另类的无缝切换轮播图–经典网易轮播图

经典网易轮播图

我之所以称其为经典网易轮播图，是因为这个轮播图是我在浏览网易页面时发现的，而且这种轮播图在其它页面比较少见，可能是因为其外观与“无缝切换轮播图（有箭头，有序号）”一样，但实现方法稍微复杂，所以采用率比较小。但是这种轮播图的交互效果跟上面或者说我们平时用的带序号的轮播图的交互效果是不同的，甚至可以说这种交互更优于其它交互（仅代表我个人见解）

核心思想

网易轮播图不同于上一种轮播图的地方在于当通过下标切换图片时，若要切换的两张图片之间不相邻，那么上一种轮播图会快速经过中间的间隔图片，而网易轮播图则直接切换到目标图片，并不会经过中间间隔的图片。由于这种交互方式的问题，我们就不能再用上面那种布局思路（即把所有图片在ul中横向排列，通过控制ul的left值来控制图片的滑动），而是要把图片堆叠到一起，当鼠标经过某个序号时，对应序号的图片滑进可视区，那这样的话，我们也就不用再复制第一张图片到ul末尾了

完整代码

效果预览
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
87
88
html,
body {
    margin: 0;
    padding: 0;
}
ul,
ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
.wrap {
    width: 400px;
    height: 260px;
    padding: 5px;
    border: 1px solid #ccc;
    margin: 100px auto;
    position: relative;
}
.slide {
    width: 400px;
    height: 260px;
    position: relative;
    overflow: hidden;
}
ul {
    width: 400px;
}
ul li {
    position: absolute;
    top: 0;
    left: 0;
}
img {
    width: 400px;
    height: 260px;
    vertical-align: middle;
}
.arr {
    width: 400px;
    height: 50px;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    display: none;
}
.arr span {
    width: 50px;
    line-height: 50px;
    text-align: center;
    font-family: "黑体";
    font-size: 30px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #ccc;
    position: absolute;
    cursor: pointer;
}
.arr .pre {
    left: 0px;
}
.arr .next {
    right: 0px;
}
ol {
    width: 200px;
    position: absolute;
    bottom: 5px;
    left: 50%;
    margin-left: -100px;
}
ol li {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    float: left;
    margin-right: 10px;
    background-color: #fff;
    color: #000;
    border-radius: 50%;
    cursor: pointer;
}
ol li:last-child {
    margin-right: 0;
}
ol li.cur {
    background-color: yellowgreen;
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="wrap" id="wrap">
    <div class="slide" id="slide">
        <ul id="ul">
            <li><img src="img/1.jpg" alt=""></li>
            <li><img src="img/2.jpg" alt=""></li>
            <li><img src="img/3.jpg" alt=""></li>
            <li><img src="img/4.jpg" alt=""></li>
            <li><img src="img/5.jpg" alt=""></li>
            <li><img src="img/6.jpg" alt=""></li>
            <li><img src="img/7.jpg" alt=""></li>
        </ul>
        <div class="arr" id="arr">
            <span class="pre" id="pre"><</span>
            <span class="next" id="next">></span>
        </div>
    </div>
</div>

JS

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
87
88
var wrap = document.getElementById('wrap');
var slide = document.getElementById('slide');
var ul = document.getElementById('ul');
var lis = ul.children;
var lis_len=lis.length;//7
var lefter=lis[0].offsetWidth;
var arr = document.getElementById('arr');
var ol = document.createElement('ol');//创建ol
for (var i = 0; i < lis_len; i++) {
    var li = document.createElement('li');
    li.innerHTML = i + 1;
    ol.append(li);//把li追加到ol中
}
slide.append(ol);//把ol追加到页面中
var ollis = ol.children;
ollis[0].className = "cur";
//当前显示第1张图片，其它图片都叠放在右侧
for (var i = 0; i < lis_len; i++) {
    lis[i].style.left = lefter + "px";
}
lis[0].style.left = 0;
var key = 0;
//自动播放执行
var timer = null;
timer = setInterval(nextAnimate, 2000);
//分别点击next/pre执行函数
arr.addEventListener('click',function(e){
    var e=e||window.e;
    var target=e.target||e.srcElement;
    var targetId=target.id;
    if(targetId==='next'){
        nextAnimate();
    }else{
        preAnimate();
    }
});
//鼠标经过ollis切换到当前序号的图片显示
for (var i = 0; i < lis_len; i++) {
    ollis[i].index = i;
    ollis[i].addEventListener('mouseover', function () {
        that = this.index;
        if (that > key) {
            moveAnimation(lis[key], { left: -lefter });
            lis[that].style.left = lefter + "px";
        } else {
            moveAnimation(lis[key], { left: lefter });
            lis[that].style.left = -lefter + "px";
        }
        key = that;
        moveAnimation(lis[key], { left: 0 });
        toggleCur();
    })
}
//鼠标经过停止计时器，arr显示
wrap.addEventListener('mouseover', function () {
    clearInterval(timer);
    arr.style.display = "block";
})
//鼠标移出开启定时器，arr隐藏
wrap.addEventListener('mouseout', function () {
    timer = setInterval(nextAnimate, 2000);
    arr.style.display = "none";
})
//点击下一张next函数/自动播放函数
function nextAnimate() {
    moveAnimation(lis[key], { left: -lefter });//先将当前图片向左滑动
    key++;//key值切换为要显示的图片的序号
    key > lis_len - 1 ? key = 0 : key;//首尾判断
    lis[key].style.left = lefter + "px";//要显示的图片迅速切换到指定位置
    moveAnimation(lis[key], { left: 0 });//要显示的图片从指定位置滑到显示位
    toggleCur();//切换ollis的cur
}
//切换上一张pre函数
function preAnimate() {
    moveAnimation(lis[key], { left: lefter });
    key--;
    key < 0 ? key = lis_len-1 : key;
    lis[key].style.left = -lefter + "px";
    moveAnimation(lis[key], { left: 0 });
    toggleCur();
}
//切换olli的类cur
function toggleCur() {
    for (var i = 0; i < lis_len; i++) {
        ollis[i].className = "";
    }
    ollis[key].className = "cur";
}

注：key值为当前显示的或要显示的图片的序号，当要显示的图片的序号大于当前显示的图片的序号时，从右向左滑动，否则从左向右滑动

总结：这种4中形式的是目前最常用的轮播图，如果小伙伴们还有其它轮播图的实现方法，或者对我整理的这些有疑问或指正请在下面告诉我哦
本篇文章是由二蛋的前端博客：http://yyeggs.com/slideshow_switch/ 整理，转载请注明

坚持原创技术分享，您的支持将鼓励我继续创作！