抱歉，您的浏览器无法访问本站

本页面需要浏览器支持（启用）JavaScript


了解详情 >

Mr.wang

Time flies and people come and go

博客

归档

简单轮播图原理解析

Mr.wang
javascript

发布于：2019年3月12日
次浏览

关于轮播图操作Dom的部分函数

部分简单轮播图函数解析

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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
/**
 * 动画函数 animate 版本1
 * @param element   动画元素
 * @param target    动画目标值
 * @param step      动画步长(可选参数)
 */
function animate(element, target, step) {
    step = step || 10;
    var current = element.offsetLeft;
    clearInterval(element.timer);
    element.timer = setInterval(function () {
        current += current < target ? step : -step;
        element.style.left = current + 'px';
        if (Math.abs(target - current) <= step) {
            clearInterval(element.timer);
            element.style.left = target + 'px';
        }
    }, 24);
}

/**
 * 动画函数 animate 版本2
 * @param element   动画元素
 * @param target    动画目标值
 */
function animate_v2(element, target) {
    clearInterval(element.timer);
    element.timer = setInterval(function () {
        var current = element.offsetLeft;
        var step = (target - current) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        current += step;
        element.style.left = current + 'px';
        if (target === current) {
            clearInterval(element.timer);
        }
    }, 240);
}

/**
 * 动画函数 animate 版本3 宽度动画
 * @param element   动画元素
 * @param target    动画目标值
 */
function animate_v3(element, target) {
    clearInterval(element.timer);
    element.timer = setInterval(function () {
        /* 改变 v3.1 →: 获取盒子宽度  */
        var current = element.offsetWidth;
        var step = (target - current) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        current += step;
        /* 改变 v3.2 →: 设置宽度样式  */
        element.style.width = current + 'px';
        if (target === current) {
            clearInterval(element.timer);
        }
    }, 24);
}


/**
 * 动画函数 animate_v4  任意单位为px的属性能发生变化
 * @param element       动画元素
 * @param attr          动画属性
 * @param target        动画目标
 */

/* 改变 v4.1 →: 多了一个 attr 参数代表属性  */
function animate_v4(element, attr, target) {
    clearInterval(element.timer);
    element.timer = setInterval(function () {
        /* 改变 v4.2 →: 根据传进来的属性获取当前样式值  */
        var current = parseFloat(getComputedStyle(element)[attr]);
        var step = (target - current) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        current += step;
        /* 改变 v4.3 →: 根据属性设置样式   */
        element.style[attr] = current + 'px';
        if (target === current) {
            clearInterval(element.timer);
        }
    }, 24);
}

/* 改变 v5.1 →: 参数变成样式对象 styleObj  */
function animate_v5(element, styleObj) {
    clearInterval(element.timer);
    element.timer = setInterval(function () {
        /* 1. 立 flag，假设要清除 */
        var flag = true;
        /* 改变 v5.2 →: 遍历样式对象   */
        for (var attr in styleObj) {
            /* 改变 v5.3 →: 根据属性名，获取目标值  */
            var target = styleObj[attr];
            var current = parseFloat(getComputedStyle(element)[attr]);
            var step = (target - current) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            current += step;
            element.style[attr] = current + 'px';
            /* 2. 改 flag，假设不成立，修改成 假 */
            if (target !== current) {
                flag = false;
            }
        }
        /* 3. 用 flag，循环结束后判断 flag 的值是真还是假 */
        if (flag) {
            clearInterval(element.timer);
        }
    }, 24);
}
/**
 * v8    层级不做动画，透明度，px 有动画效果
 * @param element
 * @param styleObj
 */
function animate_v8(element, styleObj) {
    clearInterval(element.timer);
    element.timer = setInterval(function () {
        var flag = true;
        for (var attr in styleObj) {
            if (attr === 'zIndex') {
                var target = styleObj[attr];
                element.style[attr] = target;
            } else if (attr === 'opacity') {
                /* v6.1 在数据的源头，把<目标值>和<当前值>乘 100 处理成<整数> */
                var target = 100 * styleObj[attr];
                var current = 100 * parseFloat(getComputedStyle(element)[attr]);
                var step = (target - current) / 10;
                /* 取整为什么会出问题？数据的源头是小数，直接处理数据源头 */
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                current += step;
                /* v6.2 单位设置，不要 px 单位，除 100 变回小数 */
                element.style[attr] = current / 100;
                if (target !== current) {
                    flag = false;
                }
            } else {
                /* 改变 v5.3 →: 根据属性名，获取目标值  */
                var target = styleObj[attr];
                var current = parseFloat(getComputedStyle(element)[attr]);
                var step = (target - current) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                current += step;
                element.style[attr] = current + 'px';
                /* 2. 改 flag，假设不成立，修改成 假 */
                if (target !== current) {
                    flag = false;
                }
            }

        }
        /* 3. 用 flag，循环结束后判断 flag 的值是真还是假 */
        if (flag) {
            clearInterval(element.timer);
        }
    }, 24);
}


/* vX.1 开放新的参数：动画回调函数 fn */
function animate_vX(element, styleObj, fn) {
    clearInterval(element.timer);
    element.timer = setInterval(function () {
        var flag = true;
        for (var attr in styleObj) {
            if (attr === 'zIndex') {
                var target = styleObj[attr];
                element.style[attr] = target;
            } else if (attr === 'opacity') {
                /* v6.1 在数据的源头，把<目标值>和<当前值>乘 100 处理成<整数> */
                var target = 100 * styleObj[attr];
                var current = 100 * parseFloat(getComputedStyle(element)[attr]);
                var step = (target - current) / 10;
                /* 取整为什么会出问题？数据的源头是小数，直接处理数据源头 */
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                current += step;
                /* v6.2 单位设置，不要 px 单位，除 100 变回小数 */
                element.style[attr] = current / 100;
                if (target !== current) {
                    flag = false;
                }
            } else {
                /* 改变 v5.3 →: 根据属性名，获取目标值  */
                var target = styleObj[attr];
                var current = parseFloat(getComputedStyle(element)[attr]);
                var step = (target - current) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                current += step;
                element.style[attr] = current + 'px';
                /* 2. 改 flag，假设不成立，修改成 假 */
                if (target !== current) {
                    flag = false;
                }
            }

        }
        /* 3. 用 flag，循环结束后判断 flag 的值是真还是假 */
        if (flag) {
            clearInterval(element.timer);
            /* vX.2 动画结束后，调用函数 */
            // if (fn) {
            //     fn();
            // }
            /**
             *    ||      找真，如果前面假，后面就是真，执行后面代码
             *    &&      找假，如果前面真，后面就是假，执行后面代码
             **/
            fn && fn();
        }
    }, 24);
}



博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：http://wang-z.gitee.io/2019/03/12/js-%E8%BD%AE%E6%92%AD%E5%9B%BE%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/

本页文档最后更新于：2021年4月13日

javascript

评论