rotation chart

Posted on | In , | 本文总阅读数 次

主要介绍一下轮播图的一种实现方式

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
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #outer {
            width: 500px;
            height: 333px;
            margin: 100px 10% 1000px;
            position: relative;
            overflow: hidden;
        }

        #imgList {
            list-style: none;
            /*width: 3200px;*/
            position: absolute;
            left: 0px;
        }

        #imgList li {
            float: left;
        }

        #navDiv {
            position: absolute;
            bottom: 10px;
        }


        #navDiv a {
            width: 10px;
            height: 10px;
            float: left;
            background-color: #bbffaa;
            /*opacity: 0.8;*/
            margin: 0 5px;
        }

        #navDiv a:hover {
            background-color: black;
        }

    </style>

    <script type="text/javascript">
        onload = function () {
            // 可以根据图片数量的多少来自动增加 ul 的宽度
            var imgList = document.getElementById("imgList");
            var imgAll = document.getElementsByTagName("img");
            imgList.style.width = 500 * imgAll.length + "px";

            // 设置导航按钮可以根据它的数量自动居中
            var navDiv = document.getElementById("navDiv");
            var outer = document.getElementById("outer");
            navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth) / 2 + "px";

            // 设置页面打开第一个导航按钮默认是黑色的
            var index = 0;
            var allA = document.querySelectorAll("#navDiv a");
            allA[index].style.backgroundColor = "black";

            // 点击哪个按钮就切换到对应的图片，设置所有的 a 绑定单机响应函数
            for (var i = 0; i < allA.length; i++) {
                allA[i].num = i;
                allA[i].onclick = function () {
                    clearInterval(timer);
                    index = this.num;
                    setA();
                    move(imgList, "left", -500 * index, 5000, function () {
                        autoChange();
                    });
                }
            }

            function setA() {
                // 判断当前索引是否为最后一张
                if (index >= imgAll.length - 1) {
                    index = 0;
                    imgList.style.left = 0;
                }

                for (var i = 0; i < allA.length; i++) {
                    allA[i].style.backgroundColor = "";
                }
                allA[index].style.backgroundColor = "black";
            }

            function move(obj, attr, target, speed, callback) {
                clearInterval(obj.timer);
                var current = parseInt(getComputedStyle(obj, null)[attr]);
                if (current > target) {
                    speed = -speed;
                }
                obj.timer = setInterval(function () {
                    var oldValue = parseInt(getComputedStyle(obj, null)[attr]);
                    var newValue = oldValue + speed;
                    if (newValue > target && speed > 0 || newValue < target && speed < 0) {
                        newValue = target;
                    }
                    obj.style[attr] = newValue + "px";
                    if (newValue == target) {
                        clearInterval(obj.timer);
                        if (callback) {
                            callback();
                        }
                    }

                }, 30);
            }

            // 自动切换图片
            autoChange();
            var timer;
            function autoChange() {
                timer = setInterval(function () {
                    index++;
                    index %= imgAll.length;
                    move(imgList, "left", -500 * index, 30, function () {
                        setA();
                    })
                }, 3000)
            }
        }
    </script>
</head>
<body>
<div id="outer">
    <ul id="imgList">
        <li><a href="https://www.baidu.com" title="百度"><img src="img/1.jpg" alt=""></a></li>
        <li><a href="https://www.baidu.com" title="百度"><img src="img/2.jpg" alt=""></a></li>
        <li><a href="https://www.baidu.com" title="百度"><img src="img/3.jpg" alt=""></a></li>
        <li><a href="https://www.baidu.com" title="百度"><img src="img/4.jpg" alt=""></a></li>
        <li><a href="https://www.baidu.com" title="百度"><img src="img/5.jpg" alt=""></a></li>
        <li><a href="https://www.baidu.com" title="百度"><img src="img/1.jpg" alt=""></a></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>

JavaScript设置步骤：

  1. 第一步：在设置ul的宽度时候，我们需要动态的去设置，即图片添加或减少多少，
    ul都能根据图片的数量来进行动态变化
  2. 第二步：在设置轮播按钮的时候，我们也需要根据按钮的数量来进行动态的居中
  3. 第三步：在设置默认第一个导航按钮为另一种形态的时候，我们也要在JavaScript进行设置
  4. 第四步：设置鼠标的单机响应事件，即按到哪个按钮就自动切换到对应的图片

    在进行第四步时也是最难的一部分，需要给ul开启定位，通过它的偏移量来设置图片的位置，
    同时设置完图片后，导航按钮也不会自动对应的图片下方导航按钮的位置，我们需要手动设置，
    之后再通过定义一个函数来实现ul的偏移量的设置

  5. 第五步：设置自动实现图片轮播的效果，开启一个定时器，来调用第四步定义的函数，
    实现图片的自动轮播

    设置完手动点击切换图片和自动切换图片后，我们还需要设置手动点击切换图片的优先级要更高，
    即手动点击切换图片时，关闭自动切换图片，再在第四步定义的函数的回调函数callback中调用
    第五步定义的自动切换图片函数来重新开启自动切换图片

注：在开启定时器后，要记得关闭定时器，不然多次点击按钮（单机响应函数绑定给了按钮）之后，图片切换会越来越快，就是因为不断开启定时器，然而却没有关闭定时器；
还有就是图片切换到最后一张图片时，再通过设置ul的偏移量为0，来切换为最开始的第一张图片