Jquery制作另一个炫丽广告栏-(VS2010版本)
2009-12-05 18:09 chenkai 阅读(1319) 评论(3) 编辑 收藏 举报在templateplazza.net上看到这个SilderShow,比上一个制作还是精美许多,右边文字栏美化较到位,另外一个是包含信息量是上一个2倍多,横幅滚动，上一个我貌似加了超过四个信息量，里面样式就发生变化并且没有出现滚动条，应该样式顶死了，定位4张图信息量,今天来制作另外一个:先做一个简单截图 看看效果:
其中样式居多,文件中这个Sildershow单独定义在(tpniceslideshow.js)JS文件中,Js呈现时类,多个参数都可以自定义属性,方便在外调用.相对应定义Sildershow样式在(tpniceslideshow.css)CSS文件中,具体实现步骤如下:
A:标头导入文件:
1 <head runat="server">
2 <title>用Jquery制作一个SilderShow广告演示栏</title>
3 <meta Content="利用Ajax Jquery制作一个Sildershow广告演示栏"></meta>
4 <meta Content="Author:chenkai Date:2009年12月5日17:20:00"></meta>
5
6 <!--导入Jquery核心文件-->
7 <script type="text/javascript" src="Scripts/jquery-1.3.2.js"></script>
8 <script type="text/javascript" src="Scripts/jquery-1.3.2.min.js"></script>
9
10 <!--导入Silder制作JS Sildershow在js定义实现类 多个参数可以自定义参数有详解 请看源文件-->
11 <script type="text/javascript" src="Scripts/mootools.js"></script>
12 <script type="text/javascript" src="Scripts/tpniceslideshow.js"></script>
13
14 <!--导入自定义样式CSS 对Sildershow样式定义 可以修改-->
15 <link rel="stylesheet" type="text/css" href="CSS/tpniceslideshow.css" />
16
17 </head>
2 <title>用Jquery制作一个SilderShow广告演示栏</title>
3 <meta Content="利用Ajax Jquery制作一个Sildershow广告演示栏"></meta>
4 <meta Content="Author:chenkai Date:2009年12月5日17:20:00"></meta>
5
6 <!--导入Jquery核心文件-->
7 <script type="text/javascript" src="Scripts/jquery-1.3.2.js"></script>
8 <script type="text/javascript" src="Scripts/jquery-1.3.2.min.js"></script>
9
10 <!--导入Silder制作JS Sildershow在js定义实现类 多个参数可以自定义参数有详解 请看源文件-->
11 <script type="text/javascript" src="Scripts/mootools.js"></script>
12 <script type="text/javascript" src="Scripts/tpniceslideshow.js"></script>
13
14 <!--导入自定义样式CSS 对Sildershow样式定义 可以修改-->
15 <link rel="stylesheet" type="text/css" href="CSS/tpniceslideshow.css" />
16
17 </head>
其中mootools.js是一个常用Ajax Library,导入如上文件后来看看具体页面核心代码:
B:页面核心实现代码
1 <!--文件核心代码定义是相对应的 演示图片数量10张 代码偏多 其中一个<div class="imageElement"> 对应一个<div class="TPNiceSlideShowMenuContent">
2 -->
3
4 <form id="form1" runat="server">
5 <div class="TPNSSwrapper">
6 <div id="TPNiceSlideShow">
7 <div class="imageElement">
8 <h3>
9 The Celebrities</h3>
10 <p>
11 Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse</p>
12 <a href="#" title="open link" class="open"></a><img src="Images/11193000.jpg" class="full" alt="The Celebrities" /></div>
13 <div class="imageElement">
14 <h3>
15 Eaque ipsa quae
16 </h3>
17 <p>
18 illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
19 Nemo enim ipsam voluptatem quia voluptas
20 </p>
21 <a href="#" title="open link" class="open"></a>
22 <img src="Images/69460000.jpg" class="full" alt="Eaque ipsa quae " />
23 </div>
24 <div class="imageElement">
25 <h3>
26 The Celebrities</h3>
27 <p>
28 Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse</p>
29 <a href="#" title="open link" class="open"></a>
30 <img src="Images/11193000.jpg" class="full" alt="The Celebrities" />
31 </div>
32 <div class="imageElement">
33 <h3>
34 Bolt - Box Office</h3>
35 <p>
36 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
37 laudantium, totam rem aperiam</p>
38 <a href="#" title="open link" class="open"></a>
39 <img src="Images/12629000.jpg" class="full" alt="Bolt - Box Office" />
40 </div>
41 <div class="imageElement">
42 <h3>
43 Voluptatem sequi nesciunt</h3>
44 <p>
45 Neque porro quisquam est, qui dolorem ipsum quia dolor
46 </p>
47 <a href="#" title="open link" class="open"></a>
48 <img src="Images/17018000.jpg" class="full" alt="Voluptatem sequi nesciunt" />
49 </div>
50 <div class="imageElement">
51 <h3>
52 From Oprah to Springsteen</h3>
53 <p>
54 Sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
55 quaerat voluptatem. Ut enim a</p>
56 <a href="#" title="open link" class="open"></a>
57 <img src="Images/37400000.jpg" class="full" alt="From Oprah to Springsteen" />
58 </div>
59 <div class="imageElement">
60 <h3>
61 Eaque ipsa quae
62 </h3>
63 <p>
64 illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
65 Nemo enim ipsam voluptatem quia voluptas
66 </p>
67 <a href="#" title="open link" class="open"></a>
68 <img src="Images/69460000.jpg" class="full" alt="Eaque ipsa quae " />
69 </div>
70 <div class="imageElement">
71 <h3>
72 Red Carpet</h3>
73 <p>
74 Architecto beatae vitae dicta beatae vitae dicta</p>
75 <a href="#" title="open link" class="open"></a>
76 <img src="Images/22176000.jpg" class="full" alt="Red Carpet" />
77 </div>
78 <div class="imageElement">
79 <h3>
80 Eaque ipsa quae
81 </h3>
82 <p>
83 illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
84 Nemo enim ipsam voluptatem quia voluptas
85 </p>
86 <a href="#" title="open link" class="open"></a>
87 <img src="Images/69460000.jpg" class="full" alt="Eaque ipsa quae " />
88 </div>
89 <div class="imageElement">
90 <h3>
91 2009 Grammy Nomination Concert</h3>
92 <p>
93 Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
94 ex ea commodi consequatur?
95 </p>
96 <a href="#" title="open link"
97 class="open"></a>
98 <img src="Images/23785000.jpg" class="full" alt="2009 Grammy Nomination Concert" />
99 </div>
100 </div>
101 <div id="TPNiceSlideShowMenuWrp">
102 <div id="TPNiceSlideShowMenu">
103 <div class="TPNiceSlideShowMenuContent">
104 <img src="Images/11193001.jpg" alt="The Celebrities" />
105 <p>
106 <a href="javascript:void(0);"><span class="tpnssmenu_title">The Celebrities</span><br />
107 <span class="tpnssmenu_desc">Quis autem vel eum iure re</span> </a>
108 </p>
109 </div>
110 <div class="TPNiceSlideShowMenuContent">
111 <img src="Images/17018001.jpg" alt="The Celebrities" />
112 <p>
113 <a href="javascript:void(0);"><span class="tpnssmenu_title">The Celebrities</span><br />
114 <span class="tpnssmenu_desc">Quis autem vel eum iure re</span> </a>
115 </p>
116 </div>
117 <div class="TPNiceSlideShowMenuContent">
118 <img src="Images/12629001.jpg" alt="Bolt - New Box Office" />
119 <p>
120 <a href="javascript:void(0);"><span class="tpnssmenu_title">Bolt - New Box Office</span><br />
121 <span class="tpnssmenu_desc">Sed ut perspiciatis unde omnis iste natus </span>
122 </a>
123 </p>
124 </div>
125 <div class="TPNiceSlideShowMenuContent">
126 <img src="Images/17018001.jpg" alt="Voluptatem sequi nesciunt" />
127 <p>
128 <a href="javascript:void(0);"><span class="tpnssmenu_title">Voluptatem sequi nesciunt</span><br />
129 <span class="tpnssmenu_desc">Neque porro quisquam est, qui dolorem </span></a>
130 </p>
131 </div>
132 <div class="TPNiceSlideShowMenuContent">
133 <img src="Images/23785001.jpg" alt="2009 Grammy Nominat .." />
134 <p>
135 <a href="javascript:void(0);"><span class="tpnssmenu_title">2009 Grammy Nominat ..</span><br />
136 <span class="tpnssmenu_desc">Quis nostrum exercitationem</span> </a>
137 </p>
138 </div>
139 <div class="TPNiceSlideShowMenuContent">
140 <img src="Images/37400001.jpg" alt="From Oprah to Springs ..." />
141 <p>
142 <a href="javascript:void(0);"><span class="tpnssmenu_title">From Oprah to Springs ...</span><br />
143 <span class="tpnssmenu_desc">Sed quia non numquam eius modi tempora incidunt ut
144 </span></a>
145 </p>
146 </div>
147 <div class="TPNiceSlideShowMenuContent">
148 <img src="Images/69460001.jpg" alt="Eaque ipsa quae " />
149 <p>
150 <a href="javascript:void(0);"><span class="tpnssmenu_title">Eaque ipsa quae </span>
151 <br />
152 <span class="tpnssmenu_desc">Eaque ipsa quae ab illo </span></a>
153 </p>
154 </div>
155 <div class="TPNiceSlideShowMenuContent">
156 <img src="Images/23785001.jpg" alt="2009 Grammy Nominat .." />
157 <p>
158 <a href="javascript:void(0);"><span class="tpnssmenu_title">2009 Grammy Nominat ..</span><br />
159 <span class="tpnssmenu_desc">Quis nostrum exercitationem</span> </a>
160 </p>
161 </div>
162 <div class="TPNiceSlideShowMenuContent">
163 <img src="Images/22176001.jpg" alt="Red Carpet" />
164 <p>
165 <a href="javascript:void(0);"><span class="tpnssmenu_title">Red Carpet</span><br />
166 <span class="tpnssmenu_desc">Architecto beatae vitae dicta</span> </a>
167 </p>
168 </div>
169 <div class="TPNiceSlideShowMenuContent">
170 <img src="Images/23785001.jpg" alt="2009 Grammy Nominat .." />
171 <p>
172 <a href="javascript:void(0);"><span class="tpnssmenu_title">2009 Grammy Nominat ..</span><br />
173 <span class="tpnssmenu_desc">Quis nostrum exercitationem</span> </a>
174 </p>
175 </div>
176
177 </div>
178 </div>
179 <div id="tpniceslideshow_scrollbar" class="tpniceslideshow_scrollbar-vert">
180 <div id="tpniceslideshow_handle" class="tpniceslideshow_handle-vert">
181 </div>
182 </div>
183 <div style="clear: both;">
184 </div>
185 </div>
186 <form id="form1" runat="server">
187 <div class="TPNSSwrapper">
188 <div id="TPNiceSlideShow">
189 <div class="imageElement">
190 <h3>
191 The Celebrities</h3>
192 <p>
193 Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse</p>
194 <a href="#" title="open link" class="open"></a><img src="Images/11193000.jpg" class="full" alt="The Celebrities" /></div>
195 <div class="imageElement">
196 <h3>
197 Eaque ipsa quae
198 </h3>
199 <p>
200 illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
201 Nemo enim ipsam voluptatem quia voluptas
202 </p>
203 <a href="#" title="open link" class="open"></a>
204 <img src="Images/69460000.jpg" class="full" alt="Eaque ipsa quae " />
205 </div>
206 <div class="imageElement">
207 <h3>
208 The Celebrities</h3>
209 <p>
210 Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse</p>
211 <a href="#" title="open link" class="open"></a>
212 <img src="Images/11193000.jpg" class="full" alt="The Celebrities" />
213 </div>
214 <div class="imageElement">
215 <h3>
216 Bolt - Box Office</h3>
217 <p>
218 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
219 laudantium, totam rem aperiam</p>
220 <a href="#" title="open link" class="open"></a>
221 <img src="Images/12629000.jpg" class="full" alt="Bolt - Box Office" />
222 </div>
223 <div class="imageElement">
224 <h3>
225 Voluptatem sequi nesciunt</h3>
226 <p>
227 Neque porro quisquam est, qui dolorem ipsum quia dolor
228 </p>
229 <a href="#" title="open link" class="open"></a>
230 <img src="Images/17018000.jpg" class="full" alt="Voluptatem sequi nesciunt" />
231 </div>
232 <div class="imageElement">
233 <h3>
234 From Oprah to Springsteen</h3>
235 <p>
236 Sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
237 quaerat voluptatem. Ut enim a</p>
238 <a href="#" title="open link" class="open"></a>
239 <img src="Images/37400000.jpg" class="full" alt="From Oprah to Springsteen" />
240 </div>
241 <div class="imageElement">
242 <h3>
243 Eaque ipsa quae
244 </h3>
245 <p>
246 illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
247 Nemo enim ipsam voluptatem quia voluptas
248 </p>
249 <a href="#" title="open link" class="open"></a>
250 <img src="Images/69460000.jpg" class="full" alt="Eaque ipsa quae " />
251 </div>
252 <div class="imageElement">
253 <h3>
254 Red Carpet</h3>
255 <p>
256 Architecto beatae vitae dicta beatae vitae dicta</p>
257 <a href="#" title="open link" class="open"></a>
258 <img src="Images/22176000.jpg" class="full" alt="Red Carpet" />
259 </div>
260 <div class="imageElement">
261 <h3>
262 Eaque ipsa quae
263 </h3>
264 <p>
265 illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
266 Nemo enim ipsam voluptatem quia voluptas
267 </p>
268 <a href="#" title="open link" class="open"></a>
269 <img src="Images/69460000.jpg" class="full" alt="Eaque ipsa quae " />
270 </div>
271 <div class="imageElement">
272 <h3>
273 2009 Grammy Nomination Concert</h3>
274 <p>
275 Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
276 ex ea commodi consequatur?
277 </p>
278 <a href="#" title="open link"
279 class="open"></a>
280 <img src="Images/23785000.jpg" class="full" alt="2009 Grammy Nomination Concert" />
281 </div>
282 </div>
283 <div id="TPNiceSlideShowMenuWrp">
284 <div id="TPNiceSlideShowMenu">
285 <div class="TPNiceSlideShowMenuContent">
286 <img src="Images/11193001.jpg" alt="The Celebrities" />
287 <p>
288 <a href="javascript:void(0);"><span class="tpnssmenu_title">The Celebrities</span><br />
289 <span class="tpnssmenu_desc">Quis autem vel eum iure re</span> </a>
290 </p>
291 </div>
292 <div class="TPNiceSlideShowMenuContent">
293 <img src="Images/17018001.jpg" alt="The Celebrities" />
294 <p>
295 <a href="javascript:void(0);"><span class="tpnssmenu_title">The Celebrities</span><br />
296 <span class="tpnssmenu_desc">Quis autem vel eum iure re</span> </a>
297 </p>
298 </div>
299 <div class="TPNiceSlideShowMenuContent">
300 <img src="Images/12629001.jpg" alt="Bolt - New Box Office" />
301 <p>
302 <a href="javascript:void(0);"><span class="tpnssmenu_title">Bolt - New Box Office</span><br />
303 <span class="tpnssmenu_desc">Sed ut perspiciatis unde omnis iste natus </span>
304 </a>
305 </p>
306 </div>
307 <div class="TPNiceSlideShowMenuContent">
308 <img src="Images/17018001.jpg" alt="Voluptatem sequi nesciunt" />
309 <p>
310 <a href="javascript:void(0);"><span class="tpnssmenu_title">Voluptatem sequi nesciunt</span><br />
311 <span class="tpnssmenu_desc">Neque porro quisquam est, qui dolorem </span></a>
312 </p>
313 </div>
314 <div class="TPNiceSlideShowMenuContent">
315 <img src="Images/23785001.jpg" alt="2009 Grammy Nominat .." />
316 <p>
317 <a href="javascript:void(0);"><span class="tpnssmenu_title">2009 Grammy Nominat ..</span><br />
318 <span class="tpnssmenu_desc">Quis nostrum exercitationem</span> </a>
319 </p>
320 </div>
321 <div class="TPNiceSlideShowMenuContent">
322 <img src="Images/37400001.jpg" alt="From Oprah to Springs ..." />
323 <p>
324 <a href="javascript:void(0);"><span class="tpnssmenu_title">From Oprah to Springs ...</span><br />
325 <span class="tpnssmenu_desc">Sed quia non numquam eius modi tempora incidunt ut
326 </span></a>
327 </p>
328 </div>
329 <div class="TPNiceSlideShowMenuContent">
330 <img src="Images/69460001.jpg" alt="Eaque ipsa quae " />
331 <p>
332 <a href="javascript:void(0);"><span class="tpnssmenu_title">Eaque ipsa quae </span>
333 <br />
334 <span class="tpnssmenu_desc">Eaque ipsa quae ab illo </span></a>
335 </p>
336 </div>
337 <div class="TPNiceSlideShowMenuContent">
338 <img src="Images/23785001.jpg" alt="2009 Grammy Nominat .." />
339 <p>
340 <a href="javascript:void(0);"><span class="tpnssmenu_title">2009 Grammy Nominat ..</span><br />
341 <span class="tpnssmenu_desc">Quis nostrum exercitationem</span> </a>
342 </p>
343 </div>
344 <div class="TPNiceSlideShowMenuContent">
345 <img src="Images/22176001.jpg" alt="Red Carpet" />
346 <p>
347 <a href="javascript:void(0);"><span class="tpnssmenu_title">Red Carpet</span><br />
348 <span class="tpnssmenu_desc">Architecto beatae vitae dicta</span> </a>
349 </p>
350 </div>
351 <div class="TPNiceSlideShowMenuContent">
352 <img src="Images/23785001.jpg" alt="2009 Grammy Nominat .." />
353 <p>
354 <a href="javascript:void(0);"><span class="tpnssmenu_title">2009 Grammy Nominat ..</span><br />
355 <span class="tpnssmenu_desc">Quis nostrum exercitationem</span> </a>
356 </p>
357 </div>
358
359 </div>
360 </div>
361 <div id="tpniceslideshow_scrollbar" class="tpniceslideshow_scrollbar-vert">
362 <div id="tpniceslideshow_handle" class="tpniceslideshow_handle-vert">
363 </div>
364 </div>
365 <div style="clear: both;">
366 </div>
367 </div>
368
369 </form>
2 -->
3
4 <form id="form1" runat="server">
5 <div class="TPNSSwrapper">
6 <div id="TPNiceSlideShow">
7 <div class="imageElement">
8 <h3>
9 The Celebrities</h3>
10 <p>
11 Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse</p>
12 <a href="#" title="open link" class="open"></a><img src="Images/11193000.jpg" class="full" alt="The Celebrities" /></div>
13 <div class="imageElement">
14 <h3>
15 Eaque ipsa quae
16 </h3>
17 <p>
18 illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
19 Nemo enim ipsam voluptatem quia voluptas
20 </p>
21 <a href="#" title="open link" class="open"></a>
22 <img src="Images/69460000.jpg" class="full" alt="Eaque ipsa quae " />
23 </div>
24 <div class="imageElement">
25 <h3>
26 The Celebrities</h3>
27 <p>
28 Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse</p>
29 <a href="#" title="open link" class="open"></a>
30 <img src="Images/11193000.jpg" class="full" alt="The Celebrities" />
31 </div>
32 <div class="imageElement">
33 <h3>
34 Bolt - Box Office</h3>
35 <p>
36 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
37 laudantium, totam rem aperiam</p>
38 <a href="#" title="open link" class="open"></a>
39 <img src="Images/12629000.jpg" class="full" alt="Bolt - Box Office" />
40 </div>
41 <div class="imageElement">
42 <h3>
43 Voluptatem sequi nesciunt</h3>
44 <p>
45 Neque porro quisquam est, qui dolorem ipsum quia dolor
46 </p>
47 <a href="#" title="open link" class="open"></a>
48 <img src="Images/17018000.jpg" class="full" alt="Voluptatem sequi nesciunt" />
49 </div>
50 <div class="imageElement">
51 <h3>
52 From Oprah to Springsteen</h3>
53 <p>
54 Sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
55 quaerat voluptatem. Ut enim a</p>
56 <a href="#" title="open link" class="open"></a>
57 <img src="Images/37400000.jpg" class="full" alt="From Oprah to Springsteen" />
58 </div>
59 <div class="imageElement">
60 <h3>
61 Eaque ipsa quae
62 </h3>
63 <p>
64 illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
65 Nemo enim ipsam voluptatem quia voluptas
66 </p>
67 <a href="#" title="open link" class="open"></a>
68 <img src="Images/69460000.jpg" class="full" alt="Eaque ipsa quae " />
69 </div>
70 <div class="imageElement">
71 <h3>
72 Red Carpet</h3>
73 <p>
74 Architecto beatae vitae dicta beatae vitae dicta</p>
75 <a href="#" title="open link" class="open"></a>
76 <img src="Images/22176000.jpg" class="full" alt="Red Carpet" />
77 </div>
78 <div class="imageElement">
79 <h3>
80 Eaque ipsa quae
81 </h3>
82 <p>
83 illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
84 Nemo enim ipsam voluptatem quia voluptas
85 </p>
86 <a href="#" title="open link" class="open"></a>
87 <img src="Images/69460000.jpg" class="full" alt="Eaque ipsa quae " />
88 </div>
89 <div class="imageElement">
90 <h3>
91 2009 Grammy Nomination Concert</h3>
92 <p>
93 Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
94 ex ea commodi consequatur?
95 </p>
96 <a href="#" title="open link"
97 class="open"></a>
98 <img src="Images/23785000.jpg" class="full" alt="2009 Grammy Nomination Concert" />
99 </div>
100 </div>
101 <div id="TPNiceSlideShowMenuWrp">
102 <div id="TPNiceSlideShowMenu">
103 <div class="TPNiceSlideShowMenuContent">
104 <img src="Images/11193001.jpg" alt="The Celebrities" />
105 <p>
106 <a href="javascript:void(0);"><span class="tpnssmenu_title">The Celebrities</span><br />
107 <span class="tpnssmenu_desc">Quis autem vel eum iure re</span> </a>
108 </p>
109 </div>
110 <div class="TPNiceSlideShowMenuContent">
111 <img src="Images/17018001.jpg" alt="The Celebrities" />
112 <p>
113 <a href="javascript:void(0);"><span class="tpnssmenu_title">The Celebrities</span><br />
114 <span class="tpnssmenu_desc">Quis autem vel eum iure re</span> </a>
115 </p>
116 </div>
117 <div class="TPNiceSlideShowMenuContent">
118 <img src="Images/12629001.jpg" alt="Bolt - New Box Office" />
119 <p>
120 <a href="javascript:void(0);"><span class="tpnssmenu_title">Bolt - New Box Office</span><br />
121 <span class="tpnssmenu_desc">Sed ut perspiciatis unde omnis iste natus </span>
122 </a>
123 </p>
124 </div>
125 <div class="TPNiceSlideShowMenuContent">
126 <img src="Images/17018001.jpg" alt="Voluptatem sequi nesciunt" />
127 <p>
128 <a href="javascript:void(0);"><span class="tpnssmenu_title">Voluptatem sequi nesciunt</span><br />
129 <span class="tpnssmenu_desc">Neque porro quisquam est, qui dolorem </span></a>
130 </p>
131 </div>
132 <div class="TPNiceSlideShowMenuContent">
133 <img src="Images/23785001.jpg" alt="2009 Grammy Nominat .." />
134 <p>
135 <a href="javascript:void(0);"><span class="tpnssmenu_title">2009 Grammy Nominat ..</span><br />
136 <span class="tpnssmenu_desc">Quis nostrum exercitationem</span> </a>
137 </p>
138 </div>
139 <div class="TPNiceSlideShowMenuContent">
140 <img src="Images/37400001.jpg" alt="From Oprah to Springs ..." />
141 <p>
142 <a href="javascript:void(0);"><span class="tpnssmenu_title">From Oprah to Springs ...</span><br />
143 <span class="tpnssmenu_desc">Sed quia non numquam eius modi tempora incidunt ut
144 </span></a>
145 </p>
146 </div>
147 <div class="TPNiceSlideShowMenuContent">
148 <img src="Images/69460001.jpg" alt="Eaque ipsa quae " />
149 <p>
150 <a href="javascript:void(0);"><span class="tpnssmenu_title">Eaque ipsa quae </span>
151 <br />
152 <span class="tpnssmenu_desc">Eaque ipsa quae ab illo </span></a>
153 </p>
154 </div>
155 <div class="TPNiceSlideShowMenuContent">
156 <img src="Images/23785001.jpg" alt="2009 Grammy Nominat .." />
157 <p>
158 <a href="javascript:void(0);"><span class="tpnssmenu_title">2009 Grammy Nominat ..</span><br />
159 <span class="tpnssmenu_desc">Quis nostrum exercitationem</span> </a>
160 </p>
161 </div>
162 <div class="TPNiceSlideShowMenuContent">
163 <img src="Images/22176001.jpg" alt="Red Carpet" />
164 <p>
165 <a href="javascript:void(0);"><span class="tpnssmenu_title">Red Carpet</span><br />
166 <span class="tpnssmenu_desc">Architecto beatae vitae dicta</span> </a>
167 </p>
168 </div>
169 <div class="TPNiceSlideShowMenuContent">
170 <img src="Images/23785001.jpg" alt="2009 Grammy Nominat .." />
171 <p>
172 <a href="javascript:void(0);"><span class="tpnssmenu_title">2009 Grammy Nominat ..</span><br />
173 <span class="tpnssmenu_desc">Quis nostrum exercitationem</span> </a>
174 </p>
175 </div>
176
177 </div>
178 </div>
179 <div id="tpniceslideshow_scrollbar" class="tpniceslideshow_scrollbar-vert">
180 <div id="tpniceslideshow_handle" class="tpniceslideshow_handle-vert">
181 </div>
182 </div>
183 <div style="clear: both;">
184 </div>
185 </div>
186 <form id="form1" runat="server">
187 <div class="TPNSSwrapper">
188 <div id="TPNiceSlideShow">
189 <div class="imageElement">
190 <h3>
191 The Celebrities</h3>
192 <p>
193 Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse</p>
194 <a href="#" title="open link" class="open"></a><img src="Images/11193000.jpg" class="full" alt="The Celebrities" /></div>
195 <div class="imageElement">
196 <h3>
197 Eaque ipsa quae
198 </h3>
199 <p>
200 illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
201 Nemo enim ipsam voluptatem quia voluptas
202 </p>
203 <a href="#" title="open link" class="open"></a>
204 <img src="Images/69460000.jpg" class="full" alt="Eaque ipsa quae " />
205 </div>
206 <div class="imageElement">
207 <h3>
208 The Celebrities</h3>
209 <p>
210 Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse</p>
211 <a href="#" title="open link" class="open"></a>
212 <img src="Images/11193000.jpg" class="full" alt="The Celebrities" />
213 </div>
214 <div class="imageElement">
215 <h3>
216 Bolt - Box Office</h3>
217 <p>
218 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
219 laudantium, totam rem aperiam</p>
220 <a href="#" title="open link" class="open"></a>
221 <img src="Images/12629000.jpg" class="full" alt="Bolt - Box Office" />
222 </div>
223 <div class="imageElement">
224 <h3>
225 Voluptatem sequi nesciunt</h3>
226 <p>
227 Neque porro quisquam est, qui dolorem ipsum quia dolor
228 </p>
229 <a href="#" title="open link" class="open"></a>
230 <img src="Images/17018000.jpg" class="full" alt="Voluptatem sequi nesciunt" />
231 </div>
232 <div class="imageElement">
233 <h3>
234 From Oprah to Springsteen</h3>
235 <p>
236 Sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
237 quaerat voluptatem. Ut enim a</p>
238 <a href="#" title="open link" class="open"></a>
239 <img src="Images/37400000.jpg" class="full" alt="From Oprah to Springsteen" />
240 </div>
241 <div class="imageElement">
242 <h3>
243 Eaque ipsa quae
244 </h3>
245 <p>
246 illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
247 Nemo enim ipsam voluptatem quia voluptas
248 </p>
249 <a href="#" title="open link" class="open"></a>
250 <img src="Images/69460000.jpg" class="full" alt="Eaque ipsa quae " />
251 </div>
252 <div class="imageElement">
253 <h3>
254 Red Carpet</h3>
255 <p>
256 Architecto beatae vitae dicta beatae vitae dicta</p>
257 <a href="#" title="open link" class="open"></a>
258 <img src="Images/22176000.jpg" class="full" alt="Red Carpet" />
259 </div>
260 <div class="imageElement">
261 <h3>
262 Eaque ipsa quae
263 </h3>
264 <p>
265 illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
266 Nemo enim ipsam voluptatem quia voluptas
267 </p>
268 <a href="#" title="open link" class="open"></a>
269 <img src="Images/69460000.jpg" class="full" alt="Eaque ipsa quae " />
270 </div>
271 <div class="imageElement">
272 <h3>
273 2009 Grammy Nomination Concert</h3>
274 <p>
275 Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
276 ex ea commodi consequatur?
277 </p>
278 <a href="#" title="open link"
279 class="open"></a>
280 <img src="Images/23785000.jpg" class="full" alt="2009 Grammy Nomination Concert" />
281 </div>
282 </div>
283 <div id="TPNiceSlideShowMenuWrp">
284 <div id="TPNiceSlideShowMenu">
285 <div class="TPNiceSlideShowMenuContent">
286 <img src="Images/11193001.jpg" alt="The Celebrities" />
287 <p>
288 <a href="javascript:void(0);"><span class="tpnssmenu_title">The Celebrities</span><br />
289 <span class="tpnssmenu_desc">Quis autem vel eum iure re</span> </a>
290 </p>
291 </div>
292 <div class="TPNiceSlideShowMenuContent">
293 <img src="Images/17018001.jpg" alt="The Celebrities" />
294 <p>
295 <a href="javascript:void(0);"><span class="tpnssmenu_title">The Celebrities</span><br />
296 <span class="tpnssmenu_desc">Quis autem vel eum iure re</span> </a>
297 </p>
298 </div>
299 <div class="TPNiceSlideShowMenuContent">
300 <img src="Images/12629001.jpg" alt="Bolt - New Box Office" />
301 <p>
302 <a href="javascript:void(0);"><span class="tpnssmenu_title">Bolt - New Box Office</span><br />
303 <span class="tpnssmenu_desc">Sed ut perspiciatis unde omnis iste natus </span>
304 </a>
305 </p>
306 </div>
307 <div class="TPNiceSlideShowMenuContent">
308 <img src="Images/17018001.jpg" alt="Voluptatem sequi nesciunt" />
309 <p>
310 <a href="javascript:void(0);"><span class="tpnssmenu_title">Voluptatem sequi nesciunt</span><br />
311 <span class="tpnssmenu_desc">Neque porro quisquam est, qui dolorem </span></a>
312 </p>
313 </div>
314 <div class="TPNiceSlideShowMenuContent">
315 <img src="Images/23785001.jpg" alt="2009 Grammy Nominat .." />
316 <p>
317 <a href="javascript:void(0);"><span class="tpnssmenu_title">2009 Grammy Nominat ..</span><br />
318 <span class="tpnssmenu_desc">Quis nostrum exercitationem</span> </a>
319 </p>
320 </div>
321 <div class="TPNiceSlideShowMenuContent">
322 <img src="Images/37400001.jpg" alt="From Oprah to Springs ..." />
323 <p>
324 <a href="javascript:void(0);"><span class="tpnssmenu_title">From Oprah to Springs ...</span><br />
325 <span class="tpnssmenu_desc">Sed quia non numquam eius modi tempora incidunt ut
326 </span></a>
327 </p>
328 </div>
329 <div class="TPNiceSlideShowMenuContent">
330 <img src="Images/69460001.jpg" alt="Eaque ipsa quae " />
331 <p>
332 <a href="javascript:void(0);"><span class="tpnssmenu_title">Eaque ipsa quae </span>
333 <br />
334 <span class="tpnssmenu_desc">Eaque ipsa quae ab illo </span></a>
335 </p>
336 </div>
337 <div class="TPNiceSlideShowMenuContent">
338 <img src="Images/23785001.jpg" alt="2009 Grammy Nominat .." />
339 <p>
340 <a href="javascript:void(0);"><span class="tpnssmenu_title">2009 Grammy Nominat ..</span><br />
341 <span class="tpnssmenu_desc">Quis nostrum exercitationem</span> </a>
342 </p>
343 </div>
344 <div class="TPNiceSlideShowMenuContent">
345 <img src="Images/22176001.jpg" alt="Red Carpet" />
346 <p>
347 <a href="javascript:void(0);"><span class="tpnssmenu_title">Red Carpet</span><br />
348 <span class="tpnssmenu_desc">Architecto beatae vitae dicta</span> </a>
349 </p>
350 </div>
351 <div class="TPNiceSlideShowMenuContent">
352 <img src="Images/23785001.jpg" alt="2009 Grammy Nominat .." />
353 <p>
354 <a href="javascript:void(0);"><span class="tpnssmenu_title">2009 Grammy Nominat ..</span><br />
355 <span class="tpnssmenu_desc">Quis nostrum exercitationem</span> </a>
356 </p>
357 </div>
358
359 </div>
360 </div>
361 <div id="tpniceslideshow_scrollbar" class="tpniceslideshow_scrollbar-vert">
362 <div id="tpniceslideshow_handle" class="tpniceslideshow_handle-vert">
363 </div>
364 </div>
365 <div style="clear: both;">
366 </div>
367 </div>
368
369 </form>
C：页面核心创建一个Sildershow核心代:码
1 <script type="text/javascript">
2 /* <![CDATA[ */
3 function startTPNiceSlideShow() {
4 var TPNiceSlideShow = new TPSlideShowClass($('TPNiceSlideShow'), {
5 timed: true, //自动播放
6 showInfopane: true, //显示简要
7 showMenu: true, //菜单是有效
8 embedLinks: true, //嵌入链接
9 fadeDuration: 500, //渐褪特效延时
10 readMore: true, // 显示更多按键
11 readMoreText: 'Read More', //更多链接文字
12 showTitle: true, //显示标题
13 titleLink: true, //标题链接
14 showDescription: true, //显示描述
15
16 scrollBar: true, //滚动条有效
17 itemCount: 10, //项目总数，影响滚动的定位
18 scrollBarContent: $('TPNiceSlideShowMenuWrp'), //滚动内容ID
19 scrollBarArea: $('tpniceslideshow_scrollbar'), //滚动条区域
20 scrollBarHandle: $('tpniceslideshow_handle'), //滚动条按钮
21
22 delay: 3000 //间隔时间
23 });
24 }
25 window.onDomReady(startTPNiceSlideShow);
26
27 /* ]]> */
28 </script>
29
2 /* <![CDATA[ */
3 function startTPNiceSlideShow() {
4 var TPNiceSlideShow = new TPSlideShowClass($('TPNiceSlideShow'), {
5 timed: true, //自动播放
6 showInfopane: true, //显示简要
7 showMenu: true, //菜单是有效
8 embedLinks: true, //嵌入链接
9 fadeDuration: 500, //渐褪特效延时
10 readMore: true, // 显示更多按键
11 readMoreText: 'Read More', //更多链接文字
12 showTitle: true, //显示标题
13 titleLink: true, //标题链接
14 showDescription: true, //显示描述
15
16 scrollBar: true, //滚动条有效
17 itemCount: 10, //项目总数，影响滚动的定位
18 scrollBarContent: $('TPNiceSlideShowMenuWrp'), //滚动内容ID
19 scrollBarArea: $('tpniceslideshow_scrollbar'), //滚动条区域
20 scrollBarHandle: $('tpniceslideshow_handle'), //滚动条按钮
21
22 delay: 3000 //间隔时间
23 });
24 }
25 window.onDomReady(startTPNiceSlideShow);
26
27 /* ]]> */
28 </script>
29
