css3+javascript实现翻页幻灯片
css3+javascript实现翻页幻灯片
|
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
|
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #content{ width: 500px; height: 300px; margin: 40px auto; position: relative; transform-style: preserve-3d; } #content>div{ width: 100%; height: 100%; position: absolute; transform-origin: center bottom; } #content img{ width: 100%; height: 100%; } #next{ position: absolute; top:190px; left: calc(33% - 60px); } #prev{ position: absolute; top: 190px; left: calc(68% + 30px); } @keyframes next{ //创建一个动画这是一个翻到下面的效果 from{ -wbelit-transform: perspective(1000px) rotateX(0deg); /* 开始位置是 0°*/ opacity: 1; //初始透明为1 } to{ -webkit-transform: perspective(1000px) rotateX(-180deg); /*结束位置是 180°*/ opacity: 0; //结束透明为0 } } @keyframes prev{ //创建一个由上边翻到上边的动画 0%{ -webkit-transform: perspective(1000px) rotateX(180deg); /* 初始开始位置 */ opacity:0; //初始为透明 } 57% { -webkit-transform: perspective(1000px) rotateX(-16deg); /* 动画进行到 56% 的时候他为 -16° */ opacity:1; //透明已经为1 了 } 66% { -webkit-transform: perspective(1000px) rotateX(14deg); /* 再回到 14° 的位置 */ } 74% { -webkit-transform: perspective(1000px) rotateX(-12deg); /* 再回到 -12°的位置 */ } 81% { -webkit-transform: perspective(1000px) rotateX(10deg); /* 再回到 10°的位置 */ } 87% { -webkit-transform: perspective(1000px) rotateX(-8deg); /* 再回到 -8°的位置 */ } 92% { -webkit-transform: perspective(1000px) rotateX(6deg); /* 再回到 6° 的位置 */ } 96% { -webkit-transform: perspective(1000px) rotateX(-4deg); /* 再回到 -4° 的位置 */ } 100% { -webkit-transform: perspective(1000px) rotateX(0deg); /* 最后回归 0° */ }<br> } .next{ animation: next 1s ease 1 normal 0s; /* 执行向下的动画 */ transform: rotateX(-180deg); /* 因为初始位置是0 但当你执行完动画还会回到原位 所以它转到哪里就把他设在哪里不要再让它回去了 */ opacity: 0; } .prev{ animation: prev 1.2s ease 1 normal 0s; /* 执行向上的动画 */ transform: rotateX(0deg); /* 同上 */ opacity: 1; } </style> </head> <body> <button id="next">←</button><button id="prev">→</button> <div id="content"> <div class="prev"><img src="images/012.jpeg"></div> <!-- 设置默认的第一页 --> <div class="next"><img src="images/017.jpeg"></div> <div class="next"><img src="images/020.jpeg"></div> <div class="next"><img src="images/027.jpeg"></div> <div class="next"><img src="images/0df3d7ca7bcb0a46ce09bc1e6e63f6246b60afe9.jpg"></div> </div> <script> window.onload=function(){ var next=document.getElementById("next"); var prev=document.getElementById("prev"); var content=document.getElementById("content"); var oDiv=content.getElementsByTagName("div"); var x=0; next.onclick=function(){ //当向下翻页时 oDiv[x].setAttribute("class","next"); //第一个页 设置class名让他向下走去 x++ if(x>oDiv.length-1){ x=0 } oDiv[x].setAttribute("class","prev"); //++过后让他的下一个页面起来 } prev.onclick=function(){ //同上只是++变-- oDiv[x].setAttribute("class","next"); x-- if(x<0){ x=oDiv.length-1 } oDiv[x].setAttribute("class","prev"); } } </script> </body></html> |
