index.html 
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0px;
        margin: 0px;
    }
    
    #out {
        width: 520px;
        height: 333px;
        background-color: #bfa;
        margin: 50px auto;
        padding: 10px 0px;
        position: relative;
        overflow: hidden;
    }
    
    #imglist {
        list-style: none;
        /* width: 2600px; */
        position: absolute;
        left: 0px;
    }
    
    #imglist li {
        float: left;
        margin: 0px 10px;
    }
    
    #navdiv {
        position: absolute;
        bottom: 15px;
        /* left: 200px; */
    }
    
    #navdiv a {
        float: left;
        width: 15px;
        height: 15px;
        background-color: red;
        margin: 0 5px;
        opacity: 0.5;
        border-radius: 50%;
    }
    
    #navdiv a:hover {
        background-color: #686269;
    }
</style>
<script src="js/tool.js"></script>
<script>
    window.onload = function() {
        var img = document.getElementsByTagName("img");
        var imglist = document.getElementById("imglist");
        imglist.style.width = 520 * img.length + "px";
        // 设置导航块居中
        var navdiv = document.getElementById("navdiv");
        var out = document.getElementById("out");
        navdiv.style.left = (out.offsetWidth - navdiv.offsetWidth) / 2 + "px";

        var index = 0;
        var arra = document.getElementsByTagName("a");
        arra[index].style.backgroundColor = "#686269";

        // 为每一个超链接添加单机响应事件
        for (var i = 0; i < arra.length; i++) {
            arra[i].num = i;
            arra[i].onclick = function() {
                // 当我们手动去切换的时候，去停止轮播图
                clearInterval(timer);
                // 为每个超链接做标记
                index = this.num;

                // imglist.style.left = -520 * index + "px";
                setA();
                move(imglist, "left", -520 * index, 20, function() {
                    // 手动点击切换结束之后，再次开启定时器。
                    autoChenge();

                });
            }

        }
        autoChenge();

        function setA() {
            // 判断索引是否是最后一张
            if (index >= arra.length) {
                index = 0;
                //如果为最后一张，直接将imglist的left设置为0，
                imglist.style.left = 0;
            }
            for (var i = 0; i < arra.length; i++) {
                // 设置为空，防止设置颜色之后，在内联样式里优先级过高，
                arra[i].style.backgroundColor = "";
            }
            arra[index].style.backgroundColor = "#686269";
        }
        // 设置定时器
        // 定义定时器标识
        var timer;

        function autoChenge() {
            timer = setInterval(function() {
                index++;
                //  %= 算法 判断index的长度是否超过img的长度，如果超过就返回0
                index %= img.length;
                move(imglist, "left", -520 * index, 20, function() {
                    setA();
                });
            }, 3000);

        }
    }
</script>

<body>

    <div id="out">
        <ul id="imglist">
            <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/1.jpg" alt=""></li>
        </ul>
        <div id="navdiv">
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
    </div>

</body>

</html>

tool.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
//实现动画效果
function move(obj, arrtr, target, speed, callback) {
    clearInterval(obj.timer);
    // 获取当前位置
    var current = parseInt(getstyle(obj, arrtr));
    // 判断speed正负
    // 0-800 向左移
    //800-0 向右移
    if (current > target) {
        speed = -speed;
    }
    // 将timer作为属性 给自身的obj元素。
    obj.timer = setInterval(function() {
        var oldvalue = parseInt(getstyle(obj, arrtr));

        var newvalue = oldvalue + speed;
        // 向左移时，需要判断newvalue是否小于target
        // 向右移时，需要判断newvalue是否大于target
        if ((speed < 0 && newvalue < target) || (speed > 0 && newvalue > target)) {
            newvalue = target;
        }
        obj.style[arrtr] = newvalue + "px";
        if (newvalue == target) {
            clearInterval(obj.timer);
            // 如果有回调函数就调用，没有则不调用。
            callback && callback();
        }

    }, 20);
    // return false;


};

// 获取元素的样式

function getstyle(obj, name) {
    if (window.getComputedStyle) {
        return getComputedStyle(obj, null)[name];

    } else {
        return obj.currentStyle[name];
    }

}

愿你的坚持终有收获。