ASP.NET 控件开发系列之图片切换web控件

贴出来控件页面的代码. 
PicList.ascx 

1. <%@ Control Language="C#" AutoEventWireup="true" CodeFile="PicList.ascx.cs" Inherits="WebParts_PicList" %>  
2. <style type="text/css">  
3. /* Reset style */  
4. *  
5. {  
6. margin: 0;  
7. padding: 0;  
8. word-break: break-all;  
9. }  
10. body  
11. {  
12. background: #fff;  
13. color: #000000;  
14. font: 12px/1.6em Helvetica, Arial, sans-serif;  
15. margin-left: 0px;  
16. margin-top: 0px;  
17. margin-right: 0px;  
18. margin-bottom: 0px;  
19. }  
20. h1, h2, h3, h4, h5, h6  
21. {  
22. font-size: 1em;  
23. }  
24. a  
25. {  
26. color: #0287CA;  
27. text-decoration: none;  
28. }  
29. a:hover  
30. {  
31. text-decoration: underline;  
32. }  
33. ul, li  
34. {  
35. list-style: none;  
36. }  
37. fieldset, img  
38. {  
39. border: none;  
40. }  
41. legend  
42. {  
43. display: none;  
44. }  
45. em, strong, cite, th  
46. {  
47. font-style: normal;  
48. font-weight: normal;  
49. }  
50. input, textarea, select, button  
51. {  
52. font: 12px Helvetica, Arial, sans-serif;  
53. }  
54. table  
55. {  
56. border-collapse: collapse;  
57. }  
58. html  
59. {  
60. overflow: -moz-scrollbars-vertical;  
61. }  
62. /*Always show Firefox scrollbar*/  
63. /* iFocus style */  
64. #ifocus  
65. {  
66. width: 650px;  
67. height: 245px;  
68. margin: 0px;  
69. border: 1px solid #DEDEDE;  
70. background: #F8F8F8;  
71. }  
72. #ifocus_pic  
73. {  
74. display: inline;  
75. position: relative;  
76. float: left;  
77. width: 540px;  
78. height: 225px;  
79. overflow: hidden;  
80. margin: 10px 0 0 10px;  
81. }  
82. #ifocus_piclist  
83. {  
84. position: absolute;  
85. }  
86. #ifocus_piclist li  
87. {  
88. width: 550px;  
89. height: 225px;  
90. overflow: hidden;  
91. }  
92. #ifocus_piclist img  
93. {  
94. width: 550px;  
95. height: 225px;  
96. }  
97. #ifocus_btn  
98. {  
99. display: inline;  
100. float: right;  
101. width: 91px;  
102. margin: 9px 9px 0 0;  
103. }  
104. #ifocus_btn li  
105. {  
106. width: 91px;  
107. height: 57px;  
108. cursor: pointer;  
109. opacity: 0.5;  
110. -moz-opacity: 0.5;  
111. filter: alpha(opacity=50);  
112. }  
113. #ifocus_btn img  
114. {  
115. width: 75px;  
116. height: 45px;  
117. margin: 7px 0 0 11px;  
118. }  
119. #ifocus_btn .current  
120. {  
121. background: url(img/ifocus_btn_bg.gif) no-repeat;  
122. opacity: 1;  
123. -moz-opacity: 1;  
124. filter: alpha(opacity=100);  
125. }  
126. #ifocus_opdiv  
127. {  
128. position: absolute;  
129. left: 0;  
130. bottom: 0;  
131. width: 545px;  
132. height: 35px;  
133. background: #000;  
134. opacity: 0.5;  
135. -moz-opacity: 0.5;  
136. filter: alpha(opacity=50);  
137. }  
138. #ifocus_tx  
139. {  
140. position: absolute;  
141. left: 8px;  
142. bottom: 8px;  
143. color: #FFF;  
144. }  
145. #ifocus_tx .normal  
146. {  
147. display: none;  
148. }  
149. </style>  
150. <script type="text/javascript">  
151. function $(id) { return document.getElementById(id); }  
152. function addLoadEvent(func){  
153. var oldonload = window.onload;  
154. if (typeof window.onload != 'function') {  
155. window.onload = func;  
156. } else {  
157. window.onload = function(){  
158. oldonload();  
159. func();  
160. }  
161. }  
162. }  
163. function moveElement(elementID,final_x,final_y,interval) {  
164. if (!document.getElementById) return false;  
165. if (!document.getElementById(elementID)) return false;  
166. var elem = document.getElementById(elementID);  
167. if (elem.movement) {  
168. clearTimeout(elem.movement);  
169. }  
170. if (!elem.style.left) {  
171. elem.style.left = "0px";  
172. }  
173. if (!elem.style.top) {  
174. elem.style.top = "0px";  
175. }  
176. var xpos = parseInt(elem.style.left);  
177. var ypos = parseInt(elem.style.top);  
178. if (xpos == final_x && ypos == final_y) {  
179. return true;  
180. }  
181. if (xpos < final_x) {  
182. var dist = Math.ceil((final_x - xpos)/10);  
183. xposxpos = xpos + dist;  
184. }  
185. if (xpos > final_x) {  
186. var dist = Math.ceil((xpos - final_x)/10);  
187. xposxpos = xpos - dist;  
188. }  
189. if (ypos < final_y) {  
190. var dist = Math.ceil((final_y - ypos)/10);  
191. yposypos = ypos + dist;  
192. }  
193. if (ypos > final_y) {  
194. var dist = Math.ceil((ypos - final_y)/10);  
195. yposypos = ypos - dist;  
196. }  
197. elem.style.left = xpos + "px";  
198. elem.style.top = ypos + "px";  
199. var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";  
200. elem.movement = setTimeout(repeat,interval);  
201. }  
202. function classNormal(iFocusBtnID,iFocusTxID){  
203. var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');  
204. var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');  
205. for(var i=0; i<iFocusBtns.length; i++) {  
206. iFocusBtns[i].className='normal';  
207. iFocusTxs[i].className='normal';  
208. }  
209. }  
210. function classCurrent(iFocusBtnID,iFocusTxID,n){  
211. var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');  
212. var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');  
213. iFocusBtns[n].className='current';  
214. iFocusTxs[n].className='current';  
215. }  
216. function iFocusChange() {  
217. if(!$('ifocus')) return false;  
218. $('ifocus').onmouseover = function(){atuokey = true};  
219. $('ifocus').onmouseout = function(){atuokey = false};  
220. var iFocusBtns = $('ifocus_btn').getElementsByTagName('li');  
221. var listLength = iFocusBtns.length;  
222. iFocusBtns[0].onmouseover = function() {  
223. moveElement('ifocus_piclist',0,0,5);  
224. classNormal('ifocus_btn','ifocus_tx');  
225. classCurrent('ifocus_btn','ifocus_tx',0);  
226. }  
227. if (listLength>=2) {  
228. iFocusBtns[1].onmouseover = function() {  
229. moveElement('ifocus_piclist',0,-225,5);  
230. classNormal('ifocus_btn','ifocus_tx');  
231. classCurrent('ifocus_btn','ifocus_tx',1);  
232. }  
233. }  
234. if (listLength>=3) {  
235. iFocusBtns[2].onmouseover = function() {  
236. moveElement('ifocus_piclist',0,-450,5);  
237. classNormal('ifocus_btn','ifocus_tx');  
238. classCurrent('ifocus_btn','ifocus_tx',2);  
239. }  
240. }  
241. if (listLength>=4) {  
242. iFocusBtns[3].onmouseover = function() {  
243. moveElement('ifocus_piclist',0,-675,5);  
244. classNormal('ifocus_btn','ifocus_tx');  
245. classCurrent('ifocus_btn','ifocus_tx',3);  
246. }  
247. }  
248. }  
249. setInterval('autoiFocus()',3500);  
250. var atuokey = false;  
251. function autoiFocus() {  
252. if(!$('ifocus')) return false;  
253. if(atuokey) return false;  
254. var focusBtnList = $('ifocus_btn').getElementsByTagName('li');  
255. var listLength = focusBtnList.length;  
256. for(var i=0; i<listLength; i++) {  
257. if (focusBtnList[i].className == 'current') var currentNum = i;  
258. }  
259. if (currentNum==0&&listLength!=1 ){  
260. moveElement('ifocus_piclist',0,-225,5);  
261. classNormal('ifocus_btn','ifocus_tx');  
262. classCurrent('ifocus_btn','ifocus_tx',1);  
263. }  
264. if (currentNum==1&&listLength!=2 ){  
265. moveElement('ifocus_piclist',0,-450,5);  
266. classNormal('ifocus_btn','ifocus_tx');  
267. classCurrent('ifocus_btn','ifocus_tx',2);  
268. }  
269. if (currentNum==2&&listLength!=3 ){  
270. moveElement('ifocus_piclist',0,-675,5);  
271. classNormal('ifocus_btn','ifocus_tx');  
272. classCurrent('ifocus_btn','ifocus_tx',3);  
273. }  
274. if (currentNum==3 ){  
275. moveElement('ifocus_piclist',0,0,5);  
276. classNormal('ifocus_btn','ifocus_tx');  
277. classCurrent('ifocus_btn','ifocus_tx',0);  
278. }  
279. if (currentNum==1&&listLength==2 ){  
280. moveElement('ifocus_piclist',0,0,5);  
281. classNormal('ifocus_btn','ifocus_tx');  
282. classCurrent('ifocus_btn','ifocus_tx',0);  
283. }  
284. if (currentNum==2&&listLength==3 ){  
285. moveElement('ifocus_piclist',0,0,5);  
286. classNormal('ifocus_btn','ifocus_tx');  
287. classCurrent('ifocus_btn','ifocus_tx',0);  
288. }  
289. }  
290. addLoadEvent(iFocusChange);  
291. </script>  
292. <div align="center">  
293. <div id="ifocus">  
294. <div id="ifocus_pic">  
295. <div id="ifocus_piclist" style="left: 0; top: 0;">  
296. <ul runat="server" id="ulImgBig">  
297. </ul>  
298. </div>  
299. <div id="ifocus_opdiv">  
300. </div>  
301. <div id="ifocus_tx">  
302. <ul runat="server" id="urImgTitle">  
303. </ul>  
304. </div>  
305. </div>  
306. <div id="ifocus_btn">  
307. <ul runat="server" id="ulImgSmall">  
308. </ul>  
309. </div>  
310. </div>  
311. </div>  

下面是控件后台和一个图片类的代码: 

1. public partial class WebParts_PicList : System.Web.UI.UserControl  
2. {  
3. protected void Page_Load(object sender, EventArgs e)  
4. {  
5. ShowImages();  
6. }  
7. public void ShowImages()  
8. {  
9. for (int i = 0; i < ListImages.Count; i++)  
10. {  
11. //标题和小图  
12. if (i == 0)  
13. {  
14. urImgTitle.InnerHtml += "<li class='current'>" + listImages[i].ImageTitle1 + "</li>";  
15. ulImgSmall.InnerHtml += "<li class='current'><img src='" + listImages[i].ImageSrc1 + "' alt='" + listImages[i].ImageAlt1 + "' /></li>";  
16. }  
17. else  
18. {  
19. urImgTitle.InnerHtml += "<li class='normal'>" + listImages[i].ImageTitle1 + "</li>";  
20. ulImgSmall.InnerHtml += "<li class='normal'><img src='" + listImages[i].ImageSrc1 + "' alt='" + listImages[i].ImageAlt1 + "' /></li>";  
21. }  
22. //大图  
23. ulImgBig.InnerHtml += " <li><a href=" + listImages[i].ImageHref1 + " target='_blank'><img src=" + listImages[i].ImageSrc1 + " alt=" + listImages[i].ImageAlt1 + " border='0' /></a></li>";  
24. }  
25. }  
26. private List<ShowImages> listImages;  
27. public List<ShowImages> ListImages  
28. {  
29. get { return listImages; }  
30. set { listImages = value; }  
31. }  
32. }  
33. //图片的属性  
34. public class ShowImages  
35. {  
36. string ImageSrc;  
37. string ImageHref;  
38. string ImageTitle;  
39. string ImageAlt;  
40. public string ImageAlt1  
41. {  
42. get { return ImageAlt; }  
43. set { ImageAlt = value; }  
44. }  
45. public string ImageSrc1  
46. {  
47. get { return ImageSrc; }  
48. set { ImageSrc = value; }  
49. }  
50. public string ImageHref1  
51. {  
52. get { return ImageHref; }  
53. set { ImageHref = value; }  
54. }  
55. public string ImageTitle1  
56. {  
57. get { return ImageTitle; }  
58. set { ImageTitle = value; }  
59. }  
60. }  

实现思路是 ShowImages的集合当作控件的一个属性.然后便利集合循环赋值. 
下面是页面调用的代码: 

复制代码代码如下:

List<ShowImages> listImages = new List<ShowImages>(); 
ShowImages image1 = new ShowImages(); 
image1.ImageAlt1 = "喵喵"; 
image1.ImageHref1 = "//www.zzvips.com"; 
image1.ImageSrc1 = "http://b23.photo.store.qq.com/http_imgload.cgi?/rurl4_b=e52b4cc5fe67c1a2dc328adb766f1633bfc02bb27fe17aa21ca1264a0dac599fc425faf65d1daac8ab7cb5923a15443882d9d0586694a0e5eb0671af60a2f6e739d3c15b1e52f2c518a00344fa791dbaee88cc43&a=25&b=23"; 
image1.ImageTitle1 = "这是我的自画像"; 
listImages.Add(image1); 
listImages.Add(image2); 
listImages.Add(image3); 
listImages.Add(image4); 
PicList1.ListImages = listImages; 

ok 一个简单的控件就实现了
作者：cnblogs 喵喵