JS效果:旋转木马

效果

实现原理

主要是图片的位置摆放问题,利用z-indexopacitytopleft

核心代码为编写的位置JSON:

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
var json = [
{ // 0
width:400,
top:70,
left:50,
opacity:0.2,
zIndex:2
},
{ // 1
width:600,
top:120,
left:0,
opacity:0.8,
zIndex:3
},
{ // 2
width:800,
top:100,
left:200,
opacity:1,
zIndex:4
},
{ // 3
width:600,
top:120,
left:600,
opacity:0.8,
zIndex:3
},
{ //4
width:400,
top:70,
left:750,
opacity:0.2,
zIndex:2
}
];

布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="wrap">
<div class="slider">
<ul>
<li><img src="images/rotate/slidepic1.jpg" /></li>
<li><img src="images/rotate/slidepic2.jpg" /></li>
<li><img src="images/rotate/slidepic3.jpg" /></li>
<li><img src="images/rotate/slidepic4.jpg" /></li>
<li><img src="images/rotate/slidepic5.jpg" /></li>
</ul>
<div class="arrow">
<div class="prev" id="prev"></div>
<div class="next" id='next'></div>
</div>
</div>
</div>

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
<style>
*{
margin:0;
padding:0;
}
.wrap{
width: 1200px;
margin:10px auto;
}
.slider{
height: 500px;
position: relative;
}
.slider li{
list-style: none;
position: absolute;
left:200px;
top:0;
}
.slider li img{
width: 100%;
display: block;
}
.arrow{
opacity: 1;
}
.prev,.next{
width: 76px;
height: 112px;
position: absolute;
top:50%;
margin-top:-56px;
background: url(images/rotate/prev.png) no-repeat;
z-index:99;
}
.next{
right:0;
background: url(images/rotate/next.png) no-repeat;
}
.prev{
left:0;
}
</style>

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
<script>
var json = [
{ // 0
width:400,
top:70,
left:50,
opacity:0.2,
zIndex:2
},
{ // 1
width:600,
top:120,
left:0,
opacity:0.8,
zIndex:3
},
{ // 2
width:800,
top:100,
left:200,
opacity:1,
zIndex:4
},
{ // 3
width:600,
top:120,
left:600,
opacity:0.8,
zIndex:3
},
{ //4
width:400,
top:70,
left:750,
opacity:0.2,
zIndex:2
}
];
//根据json的内容把图片缓动到相应位置,同时缓动
var liArr = document.getElementsByTagName('li');
var next = document.getElementById('next');
var prev = document.getElementById('prev');
function move(){
for(var i=0;i<liArr.length;i++){
animation(liArr[i],json[i]);
}
}
move()
next.onclick = function(){
var last = json.pop();
json.unshift(last);
move()
}
prev.onclick = function(){
var first = json.shift();
json.push(first);
move();
}
</script>
文章目录
  1. 1. 效果
  2. 2. 实现原理
  3. 3. 布局
    1. 3.1. Css代码:
  4. 4. JS实现
|