实用的JavaScript相册程序。原创---在原创中成长。
代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title>无标题文档</title>
6 <style type="text/css">
7 <!--
8 .STYLE1 {color: #FF0000}
9 -->
10 </style>
11 </head>
12 <body onload="GoON();">
13 <div style="width:200px; margin:0 auto; position:relative; line-height:20px">
14 <div style="width:200px; height:250px; position:relative; overflow:hidden">
15 <div id="photos" style="height:250px; position:absolute; width:600px; background-color:#000000; color:#FFFFFF; left:0; top: -2px;"><div style="height:250px; width:200px; float:left"><img alt="图片1" src="" height="250px" width="200px" /></div>
16 <div style="height:250px; width:200px; float:left"><img alt="图片2" src="" height="250px" width="200px" /></div>
17 <div style="height:250px; width:200px; float:left"><img alt="图片3" src="" height="250px" width="200px" /></div>
18 </div>
19 </div>
20 <div style="cursor:pointer; text-align:center; border:1px #CCCCCC solid" ><span onclick="GoLeft();">《左翻</span></div>
21 <div style="cursor:pointer; text-align:center; border:1px #CCCCCC solid"><span onclick="GoRight();">右翻》</span></div>
22 <div style="cursor:pointer; text-align:center; border:1px #CCCCCC solid; overflow:hidden">
23 <div style="width:30px; float:left; background:#000000; color:#FFFFFF; cursor:pointer" onclick="GoOnAndPlay(0)">1</div>
24 <div style="width:30px; float:left; background:#000000; color:#FFFFFF; cursor:pointer" onclick="GoOnAndPlay(1)">2</div>
25 <div style="width:30px; float:left; background:#000000; color:#FFFFFF; cursor:pointer" onclick="GoOnAndPlay(2)">3</div>
26 </div>
27 <div><span style="font-weight:bold; cursor:pointer" onclick="AutoAlign()">自动对齐</span><br />
28 </div>
29 </div>
30 <script>
31 var Dir ={ Left:true,Right:false}
32 var speed2 = 100; //设置完成一次移动的时间 ※ 这句可以看成是废话，个人认为有必要。可直接给speed赋值 ※
33 var width = 200; //完成一次移动的宽度
34 var mtime = 5; //每次小一定的时间间隔
35 var speed = (width*mtime)/speed2; //每次移动宽度 ※ 此值要为整数 ※
36 var wflg = 0; //移动宽度标志
37 var moveWidth = 200; //移动辅助变量
38 var rgt; //左移一次标志
39 var lft; //右移一次标志
40 var tflg = 0; //全局移动宽度标志
41 var direction = Dir.Right; //初始化移动方向
42 var autoflg; //自动播放标志
43 var count=5; //图片个数
44 //左移一次
45 function GoLeft()
46 {
47 clear();
48 if(ResSetDir(Dir.Left))
49 {
50 tflg += moveWidth;
51 lft = setInterval("LeftMove()", mtime);
52 }
53 }
54 //右移一次
55 function GoRight()
56 {
57 clear();
58 if(ResSetDir(Dir.Right))
59 {
60 tflg -= moveWidth;
61 rgt = setInterval("RightMove()",mtime)
62 }
63 }
64 //重置移动方向
65 // dirt 为方向枚举类型
66 function ResSetDir(dirt)
67 {
68 clear();
69 var can = true;
70 if(tflg==GetObj('photos').scrollWidth-moveWidth)
71 {
72 if(dirt) can = false;
73 }
74 else if(tflg==0)
75 {
76 if(!dirt) can = false;
77 }
78 if(can)
79 { direction = dirt; }
80 return can;
81 }
82 //左边移动一个标志
83 function LeftMove()
84 {
85 if(wflg<width-width%speed)
86 {
87 GetObj('photos').style.posLeft += -speed;
88 wflg += speed;
89 }
90 else
91 {
92 GetObj('photos').style.posLeft += -width%speed;
93 wflg = 0;
94 clear();
95 GoON();
96 }
97 }
98
99 //右边移动一个标志
100 function RightMove()
101 {
102 if(wflg<width-width%speed)
103 {
104 GetObj('photos').style.posLeft += speed;
105 wflg += speed;
106 }
107 else
108 {
109 GetObj('photos').style.posLeft += width%speed;
110 wflg = 0;
111 clear();
112 GoON();
113 }
114 }
115 //自动改变方向
116 function AutoChangeDir()
117 {
118 if(tflg == 0)
119 {
120 direction = Dir.Left;
121 }
122 if(tflg==GetObj('photos').scrollWidth-moveWidth)
123 {
124 direction = Dir.Right;
125 }
126 }
127
128 //自动移动
129 function AutoMove()
130 {
131 AutoChangeDir();
132 if(direction)
133 {
134 GoLeft();
135 }
136 else
137 {
138 GoRight();
139 }
140 //autoflg = setTime(AutoMove(),5000);
141 }
142 //获取Dom
143 function GetObj(id)
144 {
145 return document.getElementById(id);
146 }
147 function GoON()
148 {
149 AutoAlign();
150 autoflg = setInterval("AutoMove()",5000);
151 }
152 //移动到第几个位置上:
153 function GoOnAndPlay(id)
154 {
155 var lef = GetObj('photos').style.posLeft;
156 var tolef = 0-id*width;
157 var len = Math.abs(lef - tolef);
158 if((tolef-lef)>0)
159 {
160 //向右移动
161 clear();
162 if(ResSetDir(Dir.Right))
163 {
164 tflg -= len;
165 rgt = setInterval(function(){ RightMoveLen(len);},mtime*width/len)
166 }
167 }
168 else if((tolef-lef)<0)
169 {
170 //向左移动
171 clear();
172 if(ResSetDir(Dir.Left))
173 {
174 tflg += len;
175 lft = setInterval(function(){ LeftMoveLen(len);}, mtime*width/len);
176 }
177 }
178 else if(tolef == lef )
179 {
180 //不移动
181 }
182 }
183 //左边移动规定长度
184 function LeftMoveLen(w)
185 {
186 if(wflg < w-w%speed)
187 {
188 GetObj('photos').style.posLeft += -speed;
189 wflg += speed;
190 }
191 else
192 {
193 GetObj('photos').style.posLeft += -width%speed;
194 wflg = 0;
195 clear();
196 GoON();
197 }
198 }
199
200 //右边移动规定长度
201 function RightMoveLen(w)
202 {
203 if(wflg < w - w%speed)
204 {
205 GetObj('photos').style.posLeft += speed;
206 wflg += speed;
207 }
208 else
209 {
210 GetObj('photos').style.posLeft += width%speed;
211 wflg = 0;
212 clear();
213 GoON();
214 }
215 }
216
217 //自动补齐
218 function AutoAlign()
219 {
220 clear;
221 var zlens = new Array(count);
222 var bestponit = 0;
223 for(var i = 0 ; i < count ; i++ )
224 {
225 zlens[i] = i*width + GetObj('photos').style.posLeft;
226 }
227 //取出小值
228 var bestponit = 0;
229 for(var i = 0 ; i < count - 1 ; i++ )
230 {
231 bestponit = Math.abs(zlens[i+1]) - Math.abs(zlens[i]) < 0 ? i + 1 : bestponit;
232 }
233 GetObj('photos').style.posLeft = -(bestponit*width);
234 AutoChangeDir();
235 //GoON();
236 }
237
238 function clear()
239 {
240 clearInterval(lft);
241 clearInterval(rgt);
242 clearInterval(autoflg);
243 }
244 </script>
245 </body>
246 </html>
247
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title>无标题文档</title>
6 <style type="text/css">
7 <!--
8 .STYLE1 {color: #FF0000}
9 -->
10 </style>
11 </head>
12 <body onload="GoON();">
13 <div style="width:200px; margin:0 auto; position:relative; line-height:20px">
14 <div style="width:200px; height:250px; position:relative; overflow:hidden">
15 <div id="photos" style="height:250px; position:absolute; width:600px; background-color:#000000; color:#FFFFFF; left:0; top: -2px;"><div style="height:250px; width:200px; float:left"><img alt="图片1" src="" height="250px" width="200px" /></div>
16 <div style="height:250px; width:200px; float:left"><img alt="图片2" src="" height="250px" width="200px" /></div>
17 <div style="height:250px; width:200px; float:left"><img alt="图片3" src="" height="250px" width="200px" /></div>
18 </div>
19 </div>
20 <div style="cursor:pointer; text-align:center; border:1px #CCCCCC solid" ><span onclick="GoLeft();">《左翻</span></div>
21 <div style="cursor:pointer; text-align:center; border:1px #CCCCCC solid"><span onclick="GoRight();">右翻》</span></div>
22 <div style="cursor:pointer; text-align:center; border:1px #CCCCCC solid; overflow:hidden">
23 <div style="width:30px; float:left; background:#000000; color:#FFFFFF; cursor:pointer" onclick="GoOnAndPlay(0)">1</div>
24 <div style="width:30px; float:left; background:#000000; color:#FFFFFF; cursor:pointer" onclick="GoOnAndPlay(1)">2</div>
25 <div style="width:30px; float:left; background:#000000; color:#FFFFFF; cursor:pointer" onclick="GoOnAndPlay(2)">3</div>
26 </div>
27 <div><span style="font-weight:bold; cursor:pointer" onclick="AutoAlign()">自动对齐</span><br />
28 </div>
29 </div>
30 <script>
31 var Dir ={ Left:true,Right:false}
32 var speed2 = 100; //设置完成一次移动的时间 ※ 这句可以看成是废话，个人认为有必要。可直接给speed赋值 ※
33 var width = 200; //完成一次移动的宽度
34 var mtime = 5; //每次小一定的时间间隔
35 var speed = (width*mtime)/speed2; //每次移动宽度 ※ 此值要为整数 ※
36 var wflg = 0; //移动宽度标志
37 var moveWidth = 200; //移动辅助变量
38 var rgt; //左移一次标志
39 var lft; //右移一次标志
40 var tflg = 0; //全局移动宽度标志
41 var direction = Dir.Right; //初始化移动方向
42 var autoflg; //自动播放标志
43 var count=5; //图片个数
44 //左移一次
45 function GoLeft()
46 {
47 clear();
48 if(ResSetDir(Dir.Left))
49 {
50 tflg += moveWidth;
51 lft = setInterval("LeftMove()", mtime);
52 }
53 }
54 //右移一次
55 function GoRight()
56 {
57 clear();
58 if(ResSetDir(Dir.Right))
59 {
60 tflg -= moveWidth;
61 rgt = setInterval("RightMove()",mtime)
62 }
63 }
64 //重置移动方向
65 // dirt 为方向枚举类型
66 function ResSetDir(dirt)
67 {
68 clear();
69 var can = true;
70 if(tflg==GetObj('photos').scrollWidth-moveWidth)
71 {
72 if(dirt) can = false;
73 }
74 else if(tflg==0)
75 {
76 if(!dirt) can = false;
77 }
78 if(can)
79 { direction = dirt; }
80 return can;
81 }
82 //左边移动一个标志
83 function LeftMove()
84 {
85 if(wflg<width-width%speed)
86 {
87 GetObj('photos').style.posLeft += -speed;
88 wflg += speed;
89 }
90 else
91 {
92 GetObj('photos').style.posLeft += -width%speed;
93 wflg = 0;
94 clear();
95 GoON();
96 }
97 }
98
99 //右边移动一个标志
100 function RightMove()
101 {
102 if(wflg<width-width%speed)
103 {
104 GetObj('photos').style.posLeft += speed;
105 wflg += speed;
106 }
107 else
108 {
109 GetObj('photos').style.posLeft += width%speed;
110 wflg = 0;
111 clear();
112 GoON();
113 }
114 }
115 //自动改变方向
116 function AutoChangeDir()
117 {
118 if(tflg == 0)
119 {
120 direction = Dir.Left;
121 }
122 if(tflg==GetObj('photos').scrollWidth-moveWidth)
123 {
124 direction = Dir.Right;
125 }
126 }
127
128 //自动移动
129 function AutoMove()
130 {
131 AutoChangeDir();
132 if(direction)
133 {
134 GoLeft();
135 }
136 else
137 {
138 GoRight();
139 }
140 //autoflg = setTime(AutoMove(),5000);
141 }
142 //获取Dom
143 function GetObj(id)
144 {
145 return document.getElementById(id);
146 }
147 function GoON()
148 {
149 AutoAlign();
150 autoflg = setInterval("AutoMove()",5000);
151 }
152 //移动到第几个位置上:
153 function GoOnAndPlay(id)
154 {
155 var lef = GetObj('photos').style.posLeft;
156 var tolef = 0-id*width;
157 var len = Math.abs(lef - tolef);
158 if((tolef-lef)>0)
159 {
160 //向右移动
161 clear();
162 if(ResSetDir(Dir.Right))
163 {
164 tflg -= len;
165 rgt = setInterval(function(){ RightMoveLen(len);},mtime*width/len)
166 }
167 }
168 else if((tolef-lef)<0)
169 {
170 //向左移动
171 clear();
172 if(ResSetDir(Dir.Left))
173 {
174 tflg += len;
175 lft = setInterval(function(){ LeftMoveLen(len);}, mtime*width/len);
176 }
177 }
178 else if(tolef == lef )
179 {
180 //不移动
181 }
182 }
183 //左边移动规定长度
184 function LeftMoveLen(w)
185 {
186 if(wflg < w-w%speed)
187 {
188 GetObj('photos').style.posLeft += -speed;
189 wflg += speed;
190 }
191 else
192 {
193 GetObj('photos').style.posLeft += -width%speed;
194 wflg = 0;
195 clear();
196 GoON();
197 }
198 }
199
200 //右边移动规定长度
201 function RightMoveLen(w)
202 {
203 if(wflg < w - w%speed)
204 {
205 GetObj('photos').style.posLeft += speed;
206 wflg += speed;
207 }
208 else
209 {
210 GetObj('photos').style.posLeft += width%speed;
211 wflg = 0;
212 clear();
213 GoON();
214 }
215 }
216
217 //自动补齐
218 function AutoAlign()
219 {
220 clear;
221 var zlens = new Array(count);
222 var bestponit = 0;
223 for(var i = 0 ; i < count ; i++ )
224 {
225 zlens[i] = i*width + GetObj('photos').style.posLeft;
226 }
227 //取出小值
228 var bestponit = 0;
229 for(var i = 0 ; i < count - 1 ; i++ )
230 {
231 bestponit = Math.abs(zlens[i+1]) - Math.abs(zlens[i]) < 0 ? i + 1 : bestponit;
232 }
233 GetObj('photos').style.posLeft = -(bestponit*width);
234 AutoChangeDir();
235 //GoON();
236 }
237
238 function clear()
239 {
240 clearInterval(lft);
241 clearInterval(rgt);
242 clearInterval(autoflg);
243 }
244 </script>
245 </body>
246 </html>
247
浙公网安备 33010602011771号