代码改变世界

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>

 

其中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                 <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                 <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                 <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                 <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                 <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                 <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                 <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                 <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                 <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                 <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                         <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                         <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                         <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                         <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                         <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                         <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                         <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                         <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                         <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                         <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                 <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                 <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                 <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                 <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                 <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                 <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                 <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                 <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                 <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                 <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                         <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                         <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                         <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                         <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                         <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                         <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                         <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                         <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                         <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                         <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 

 

 

无觅相关文章插件,快速提升流量