本文实例为大家分享了js轮播图之旋转木马效果的具体代码,供大家参考,具体内容如下
思路:给定一个数组,储存每张图片的位置,旋转将位置进行替换
左旋转:将数组第一个数据删除,然后添加到数组的最后
右旋转:将数组最后一个数据删除,然后添加到数组的开头
先附上效果图,再来实现
接下来就是最主要的,封装原生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
|
//封装函数获取任意一个元素的任意属性的值(兼容ie8)
function getStyle(element, attr) {
return window.getComputedStyle ? window.getComputedStyle(element, null )[attr] : element.currentStyle[attr];
}
//封装js变速动画
function animate(element, json, fn) {
//每次启动定时器之前先停止
clearInterval(element.tmId);
element.tmId = setInterval( function () {
var flag = true ;
//遍历对象中的每个属性
for ( var attr in json) {
//执行透明度动画
if (attr == "opacity" ) {
//获取当前元素的属性值
var current = parseInt(getStyle(element, attr)*100);
//获取目标值
var target = json[attr]*100;
//移动的步数
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//移动后的值
current += step;
element.style[attr] = current / 100;
} else if (attr == "zIndex" ) {
//改变层级属性
element.style[attr] = json[attr];
} else {
//获取当前元素的属性值
var current = parseInt(getStyle(element, attr));
//获取目标值
var target = json[attr];
//移动的步数
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//移动后的值
current += step;
element.style[attr] = current + "px" ;
if (current != target) {
flag = false ;
}
}
}
if (flag) {
clearInterval(element.tmId);
//如果有回调函数就调用
if (fn) fn();
}
// 测试
// console.log("目标:" + target + "/当前:" + current + "/步数:" + step);
}, 20);
}
|
封装完函数,剩下的直接调用就可以了,最后附上旋转木马完整代码?
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
|
<!DOCTYPE html>
< html >
< head lang = "en" >
< meta charset = "UTF-8" >
< title >旋转木马轮播图</ title >
< link rel = "stylesheet" href = "css/css(1).css" rel = "external nofollow" />
< script src = "common.js" ></ script >
< script >
var config = [
{
width: 400,
top: 20,
left: 50,
opacity: 0.2,
zIndex: 2
},//0
{
width: 600,
top: 70,
left: 0,
opacity: 0.8,
zIndex: 3
},//1
{
width: 800,
top: 100,
left: 200,
opacity: 1,
zIndex: 4
},//2
{
width: 600,
top: 70,
left: 600,
opacity: 0.8,
zIndex: 3
},//3
{
width: 400,
top: 20,
left: 750,
opacity: 0.2,
zIndex: 2
}//4
];
window.onload = function () {
var flag = true;
var list = $query("#slide").getElementsByTagName("li");
function flower() {
//1、图片散开
for (var i = 0; i < list.length ; i++) {
//设置每个li的宽,透明度,left,top,zindex
animate(list[i], config[i], function () {
flag = true ;
});
}
}
flower();//初始化调用函数
//按钮的显示与隐藏
$query("#slide") .onmouseover = function () {
$query("#arrow") .style.opacity = "1" ;
}
$query("#slide") .onmouseout = function () {
$query("#arrow") .style.opacity = "0" ;
}
//点击切换
$query("#arrLeft") .onclick = function () {
if (flag) {
config.unshift(config.pop());
flower();
flag = false ;
}
}
$query("#arrRight") .onclick = function () {
if (flag) {
config.push(config.shift());
flower();
flag = false ;
}
}
//自动切换
setInterval(function () {
config.push(config.shift());
flower();
}, 2000);
}
</script>
</ head >
< body >
< div class = "wrap" id = "wrap" >
< div class = "slide" id = "slide" >
< ul >
< li >< a href = "#" >< img src = "images/slidepic1.jpg" alt = "" /></ a ></ li >
< li >< a href = "#" >< img src = "images/slidepic2.jpg" alt = "" /></ a ></ li >
< li >< a href = "#" >< img src = "images/slidepic3.jpg" alt = "" /></ a ></ li >
< li >< a href = "#" >< img src = "images/slidepic4.jpg" alt = "" /></ a ></ li >
< li >< a href = "#" >< img src = "images/slidepic5.jpg" alt = "" /></ a ></ li >
</ ul >
< div class = "arrow" id = "arrow" >
< a href = "javascript:void(0);" class = "prev" id = "arrLeft" ></ a >
< a href = "javascript:void(0);" class = "next" id = "arrRight" ></ a >
</ div >
</ div >
</ div >
</ body >
</ html >
|
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:https://blog.csdn.net/qq_38944959/article/details/86506035