怎样制作大图轮播整理
练习 ：
|
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
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
|
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">*{ margin:0px; padding:0px;}#tu{ width:1280px; height:480px; position:relative; overflow:hidden; margin:30px auto;}#ta{ width:3840px; height:480px; margin-left:0px; transition:0.7s;}.lie{width:1263px; height:480px; background-size:contain; overflow:hidden;}.left{width:30px; height:70px; position:relative; float:left; color:#FFF; font-weight:bold; font-size:30px;<br> opacity:0.4; cursor:pointer; line-height:70px;top:-180px;text-align:center;left:0px; z-index:99; overflow:hidden}.right{width:30px;height:70px;position:relative; float:right; color:#FFF; font-weight:bold;<br> font-size:30px;opacity:0.4; cursor:pointer; line-height:70px;top:-180px; text-align:center;right:0px; z-index:99; overflow:hidden}.left:hover{ overflow:visible; opacity:0.7} .right:hover{ overflow:visible;opacity:0.7}#zuo{ width:150px;height:70px; position:relative; float:left;top:-70px; left:30px;}#zuo1{width:130px;height:50px; background-size:contain; margin:10px 10px;}#you{ width:150px;height:70px; position:relative; float:right;top:-70px;right:30px;}#you1{width:130px;height:50px; background-size:contain; margin:10px 10px;}#xdian1{ width:20px; height:20px;color:white; line-height:20px; position:relative; float:right; right:30px; bottom:30px; cursor:pointer;}#xdian2{ width:20px; height:20px; color:white; line-height:20px; position:relative; float:right; right:30px; bottom:30px; cursor:pointer;}#xdian3{ width:20px; height:20px; color:yellow; line-height:20px; position:relative; float:right; right:30px; bottom:30px; cursor:pointer;}</style></head><body><div id="tu" onmouseover="pause()" onmouseout="contin()"> <table id="ta" cellpadding="0" cellspacing="0"> <tr height="480px"> <td class="lie" style="background-image:url(../%E8%AE%BE%E8%AE%A1/%E4%B8%BB%E9%A1%B5/2016102513556ix3te.jpg)"></td> <td class="lie" style="background-image:url(../%E8%AE%BE%E8%AE%A1/%E4%B8%BB%E9%A1%B5/201611011322xmobzr.jpg)"></td> <td class="lie" style="background-image:url(../%E8%AE%BE%E8%AE%A1/%E4%B8%BB%E9%A1%B5/2016100510182xjx6n.jpg)"></td> </tr> </table> <div class="left" onclick="dian(-1)">< <div id="zuo"> <div id="zuo1" style="background-image:url(../%E8%AE%BE%E8%AE%A1/%E4%B8%BB%E9%A1%B5/2016100510182xjx6n.jpg)" > </div> </div> </div> <div class="right" onclick="dian(1)">> <div id="you"> <div id="you1" style="background-image:url(../%E8%AE%BE%E8%AE%A1/%E4%B8%BB%E9%A1%B5/201611011322xmobzr.jpg)" > </div> </div> </div> <div id="xdian1" onclick="dianji(1)">●</div> <div id="xdian2" onclick="dianji(2)">●</div> <div id="xdian3" onclick="dianji(3)">●</div></div></body></html><script language="javascript">document.getElementById("ta").style.marginLeft="0px";var xiaodian1=document.getElementById("xdian1");var xiaodian2=document.getElementById("xdian2");var xiaodian3=document.getElementById("xdian3");function huan(){ var tp=document.getElementById("ta"); var a=parseInt(tp.style.marginLeft); var tpy=document.getElementById("you1"); var tpz=document.getElementById("zuo1"); if(a<=-2560) { tp.style.marginLeft="0px"; tpz.style.backgroundImage="url(../%E8%AE%BE%E8%AE%A1/%E4%B8%BB%E9%A1%B5/2016100510182xjx6n.jpg)"; tpy.style.backgroundImage="url(../%E8%AE%BE%E8%AE%A1/%E4%B8%BB%E9%A1%B5/201611011322xmobzr.jpg)"; tpz.style.transition="0.7s"; tpy.style.transition="0.7s"; xiaodian3.style.color="yellow"; xiaodian2.style.color="white"; xiaodian1.style.color="white"; } else if(a==-1280) { tp.style.marginLeft=-2560+"px"; tpz.style.backgroundImage="url(../%E8%AE%BE%E8%AE%A1/%E4%B8%BB%E9%A1%B5/201611011322xmobzr.jpg)"; tpy.style.backgroundImage="url(../%E8%AE%BE%E8%AE%A1/%E4%B8%BB%E9%A1%B5/2016102513556ix3te.jpg)"; tpz.style.transition="0.7s"; tpy.style.transition="0.7s"; xiaodian1.style.color="yellow"; xiaodian2.style.color="white"; xiaodian3.style.color="white"; } else if(a==0) { tp.style.marginLeft=-1280+"px"; tpy.style.backgroundImage="url(../%E8%AE%BE%E8%AE%A1/%E4%B8%BB%E9%A1%B5/2016100510182xjx6n.jpg)"; tpz.style.backgroundImage="url(../%E8%AE%BE%E8%AE%A1/%E4%B8%BB%E9%A1%B5/2016102513556ix3te.jpg)"; tpz.style.transition="0.7s"; tpy.style.transition="0.7s"; xiaodian2.style.color="yellow"; xiaodian1.style.color="white"; xiaodian3.style.color="white"; } id=window.setTimeout("huan()",3000);}var id=window.setTimeout("huan()",3000);function pause(){ window.clearTimeout(id);}function contin(){ id = window.setTimeout("huan()",3000); }function dian(m){ var tp=document.getElementById("ta"); var a=parseInt(tp.style.marginLeft); var tpy=document.getElementById("you1"); var tpz=document.getElementById("zuo1"); if(m==-1) { if(a==0) { tp.style.marginLeft=-2560+"px"; tpz.style.backgroundImage="url(../%E8%AE%BE%E8%AE%A1/%E4%B8%BB%E9%A1%B5/201611011322xmobzr.jpg)"; tpy.style.backgroundImage="url(../%E8%AE%BE%E8%AE%A1/%E4%B8%BB%E9%A1%B5/2016102513556ix3te.jpg)"; tpz.style.transition="0.7s"; tpy.style.transition="0.7s"; xiaodian1.style.color="yellow"; xiaodian2.style.color="white"; xiaodian3.style.color="white"; } else if(a==-1280) { tp.style.marginLeft="0px"; tpz.style.backgroundImage="url(../%E8%AE%BE%E8%AE%A1/%E4%B8%BB%E9%A1%B5/2016100510182xjx6n.jpg)"; tpy.style.backgroundImage="url(../%E8%AE%BE%E8%AE%A1/%E4%B8%BB%E9%A1%B5/201611011322xmobzr.jpg)"; tpz.style.transition="0.7s"; tpy.style.transition="0.7s"; xiaodian3.style.color="yellow"; xiaodian2.style.color="white"; xiaodian1.style.color="white"; } else if(a==-2560) { tp.style.marginLeft=-1280+"px"; tpy.style.backgroundImage="url(../%E8%AE%BE%E8%AE%A1/%E4%B8%BB%E9%A1%B5/2016100510182xjx6n.jpg)"; tpz.style.backgroundImage="url(../%E8%AE%BE%E8%AE%A1/%E4%B8%BB%E9%A1%B5/2016102513556ix3te.jpg)"; tpz.style.transition="0.7s"; tpy.style.transition="0.7s"; xiaodian2.style.color="yellow"; xiaodian1.style.color="white"; xiaodian3.style.color="white"; } } else if(m==1) { if(a==-2560) { tp.style.marginLeft="0px"; tpz.style.backgroundImage="url(../%E8%AE%BE%E8%AE%A1/%E4%B8%BB%E9%A1%B5/2016100510182xjx6n.jpg)"; tpy.style.backgroundImage="url(../%E8%AE%BE%E8%AE%A1/%E4%B8%BB%E9%A1%B5/201611011322xmobzr.jpg)"; tpz.style.transition="0.7s"; tpy.style.transition="0.7s"; xiaodian3.style.color="yellow"; xiaodian2.style.color="white"; xiaodian1.style.color="white"; } else if(a==-1280) { tp.style.marginLeft=-2560+"px"; tpz.style.backgroundImage="url(../%E8%AE%BE%E8%AE%A1/%E4%B8%BB%E9%A1%B5/201611011322xmobzr.jpg)"; tpy.style.backgroundImage="url(../%E8%AE%BE%E8%AE%A1/%E4%B8%BB%E9%A1%B5/2016102513556ix3te.jpg)"; tpz.style.transition="0.7s"; tpy.style.transition="0.7s"; xiaodian1.style.color="yellow"; xiaodian2.style.color="white"; xiaodian3.style.color="white"; } else if(a==0) { tp.style.marginLeft=-1280+"px"; tpy.style.backgroundImage="url(../%E8%AE%BE%E8%AE%A1/%E4%B8%BB%E9%A1%B5/2016100510182xjx6n.jpg)"; tpz.style.backgroundImage="url(../%E8%AE%BE%E8%AE%A1/%E4%B8%BB%E9%A1%B5/2016102513556ix3te.jpg)"; tpz.style.transition="0.7s"; tpy.style.transition="0.7s"; xiaodian2.style.color="yellow"; xiaodian1.style.color="white"; xiaodian3.style.color="white"; } }}function dianji(i){ var tp=document.getElementById("ta"); var tpy=document.getElementById("you1"); var tpz=document.getElementById("zuo1"); if(i==3) { tp.style.marginLeft="0px"; tpz.style.backgroundImage="url(../%E8%AE%BE%E8%AE%A1/%E4%B8%BB%E9%A1%B5/2016100510182xjx6n.jpg)"; tpy.style.backgroundImage="url(../%E8%AE%BE%E8%AE%A1/%E4%B8%BB%E9%A1%B5/201611011322xmobzr.jpg)"; tpz.style.transition="0.7s"; tpy.style.transition="0.7s"; xiaodian3.style.color="yellow"; xiaodian2.style.color="white"; xiaodian1.style.color="white"; } else if(i==2) { tp.style.marginLeft=-1280+"px"; tpy.style.backgroundImage="url(../%E8%AE%BE%E8%AE%A1/%E4%B8%BB%E9%A1%B5/2016100510182xjx6n.jpg)"; tpz.style.backgroundImage="url(../%E8%AE%BE%E8%AE%A1/%E4%B8%BB%E9%A1%B5/2016102513556ix3te.jpg)"; tpz.style.transition="0.7s"; tpy.style.transition="0.7s"; xiaodian2.style.color="yellow"; xiaodian1.style.color="white"; xiaodian3.style.color="white"; } else if(i==1) { tp.style.marginLeft=-2560+"px"; tpz.style.backgroundImage="url(../%E8%AE%BE%E8%AE%A1/%E4%B8%BB%E9%A1%B5/201611011322xmobzr.jpg)"; tpy.style.backgroundImage="url(../%E8%AE%BE%E8%AE%A1/%E4%B8%BB%E9%A1%B5/2016102513556ix3te.jpg)"; tpz.style.transition="0.7s"; tpy.style.transition="0.7s"; xiaodian1.style.color="yellow"; xiaodian2.style.color="white"; xiaodian3.style.color="white" }}</script>______________________________________________________________________________________________________________________________________
示例2：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">*{ margin:0px; padding:0px;}#tu{ width:800px; height:500px; position:relative; overflow:hidden; margin:30px auto;}#ta{ width:4000px; height:500px; margin-left:0px; transition:0.7s;}.lie{width:800px; height:500px; background-size:contain}.left{width:40px; height:100px; position:relative; float:left; color:#FFF; font-weight:bold; font-size:36px;<br> opacity:0.4; cursor:pointer; line-height:100px;top:-280px;text-align:center;left:0px; z-index:99}.right{width:40px;height:100px;position:relative; float:right; color:#FFF; font-weight:bold; font-size:36px;opacity:0.4;<br> cursor:pointer; line-height:100px;top:-280px; text-align:center;right:0px; z-index:99}#tu2{ width:612px; height:79px; position:relative; margin:20px auto;}#lie1{width:120px; height:75px; position:relative; float:left; border:1px solid #999; cursor:pointer;}#lie2{width:120px; height:75px; position:relative; float:left; border:1px solid #999; cursor:pointer;}#lie3{width:120px; height:75px; position:relative; float:left; border:1px solid #999; cursor:pointer;}#lie4{width:120px; height:75px; position:relative; float:left; border:1px solid #999; cursor:pointer;}#lie5{width:120px; height:75px; position:relative; float:left; border:1px solid #999; cursor:pointer;}img{width:120px; height:75px;}</style></head><body><div id="tu" onmouseover="pause()" onmouseout="contin()"> <table id="ta" cellpadding="0" cellspacing="0"> <tr height="500px"> <td class="lie" style="background-image:url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/1.jpg)"></td> <td class="lie" style="background-image:url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/2.jpg)"></td> <td class="lie" style="background-image:url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/3.jpg)"></td> <td class="lie" style="background-image:url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/4.jpg)"></td> <td class="lie" style="background-image:url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/5.jpg)"></td> </tr> </table> <div class="left" onclick="dian(-1)"><</div> <div class="right" onclick="dian(1)">></div></div><div id="tu2"> <div id="lie1" onclick="dianji(1)"><img src="新建文件夹/Images/1.jpg" /></div> <div id="lie2" onclick="dianji(2)"><img src="新建文件夹/Images/2.jpg" /></div> <div id="lie3" onclick="dianji(3)"><img src="新建文件夹/Images/3.jpg" /></div> <div id="lie4" onclick="dianji(4)"><img src="新建文件夹/Images/4.jpg" /></div> <div id="lie5" onclick="dianji(5)"><img src="新建文件夹/Images/5.jpg" /></div></div></body></html><script language="javascript">document.getElementById("ta").style.marginLeft="0px";function huan(){ var tp=document.getElementById("ta"); var a=parseInt(tp.style.marginLeft); if(a<=-3200) { tp.style.marginLeft="0px"; dj[0].style.borderColor="red"; dj[2].style.borderColor="#999"; dj[3].style.borderColor="#999"; dj[4].style.borderColor="#999"; dj[1].style.borderColor="#999"; } else { tp.style.marginLeft=(a-800)+"px"; dj[0].style.borderColor="#999"; dj[2].style.borderColor="#999"; dj[3].style.borderColor="#999"; dj[4].style.borderColor="#999"; dj[1].style.borderColor="#999"; dj[(800-a)/800].style.borderColor="red"; } id=window.setTimeout("huan()",3000);}var id=window.setTimeout("huan()",3000);function pause(){ window.clearTimeout(id);}function contin(){ id = window.setTimeout("huan()",3000); }function dian(m){ var tp=document.getElementById("ta"); var a=parseInt(tp.style.marginLeft); if(m==-1) { if(a==0) { tp.style.marginLeft=(a-3200)+"px"; dj[0].style.borderColor="#999"; dj[2].style.borderColor="#999"; dj[3].style.borderColor="#999"; dj[4].style.borderColor="#999"; dj[1].style.borderColor="#999"; dj[(3200-a)/800].style.borderColor="red"; } else { tp.style.marginLeft=(a+800)+"px"; dj[0].style.borderColor="#999"; dj[2].style.borderColor="#999"; dj[3].style.borderColor="#999"; dj[4].style.borderColor="#999"; dj[1].style.borderColor="#999"; dj[(-800-a)/800].style.borderColor="red"; } } else if(m==1) { if(a==-3200) { tp.style.marginLeft="0px"; dj[0].style.borderColor="red"; dj[2].style.borderColor="#999"; dj[3].style.borderColor="#999"; dj[4].style.borderColor="#999"; dj[1].style.borderColor="#999"; } else { tp.style.marginLeft=(a-800)+"px"; dj[0].style.borderColor="#999"; dj[2].style.borderColor="#999"; dj[3].style.borderColor="#999"; dj[4].style.borderColor="#999"; dj[1].style.borderColor="#999"; dj[(800-a)/800].style.borderColor="red"; } }}var tp=document.getElementById("ta");var dj=new Array;dj[0]=document.getElementById("lie1");dj[1]=document.getElementById("lie2");dj[2]=document.getElementById("lie3");dj[3]=document.getElementById("lie4");dj[4]=document.getElementById("lie5");dj[0].style.borderColor="red";function dianji(i){ if(i==1) { dj[0].style.borderColor="red"; dj[2].style.borderColor="#999"; dj[3].style.borderColor="#999"; dj[4].style.borderColor="#999"; dj[1].style.borderColor="#999"; tp.style.marginLeft="0px"; } else if(i==2) { dj[1].style.borderColor="red"; dj[2].style.borderColor="#999"; dj[3].style.borderColor="#999"; dj[4].style.borderColor="#999"; dj[0].style.borderColor="#999"; tp.style.marginLeft="-800px"; } else if(i==3) { dj[2].style.borderColor="red"; dj[1].style.borderColor="#999"; dj[3].style.borderColor="#999"; dj[4].style.borderColor="#999"; dj[0].style.borderColor="#999"; tp.style.marginLeft="-1600px"; } else if(i==4) { dj[3].style.borderColor="red"; dj[2].style.borderColor="#999"; dj[1].style.borderColor="#999"; dj[4].style.borderColor="#999"; dj[0].style.borderColor="#999"; tp.style.marginLeft="-2400px"; } else if(i==5) { dj[4].style.borderColor="red"; dj[2].style.borderColor="#999"; dj[3].style.borderColor="#999"; dj[1].style.borderColor="#999"; dj[0].style.borderColor="#999"; tp.style.marginLeft="-3200px"; }}</script>
|
