html5马赛克图片幻灯片.zip资源-CSDN文库

共8个文件

jpg：5个

js：2个

html：1个

版权申诉

javascript

jQuery

html5

148 浏览量 2022-11-18 22:13:58 上传评论收藏 307KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

html5马赛克图片幻灯片.zip （8个子文件）

html5马赛克图片幻灯片

html5马赛克图片幻灯片.jpg 103KB

jiaoben412

images

slideshow_large_1.jpg 51KB

slideshow_large_3.jpg 65KB

slideshow_large_2.jpg 33KB

slideshow_large_4.jpg 39KB

index.html 7KB

jquery-1.3.2.min.js 56KB

webwidget_slideshow_html5_simple.js 35KB

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>html5马赛克图片幻灯片 - 网页模板</title> <style type="text/css"> h2{ color: red; } pre{ padding: 4px; border: #F90 dotted 1px; } </style> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/webwidget_slideshow_html5_simple.js"></script> <script language="javascript" type="text/javascript"> $(function() { $("#webwidget_slideshow_html5_simple").webwidget_slideshow_html5_simple({ slideshow_transition_effect: 'Mosaic,Wipe_from_horizontal_blind,Wipe_from_vertical_blind,Wipe_from_vertical_center,Wipe_from_horizontal_center,Wipe_to_horizontal_center,Wipe_to_vertical_center,Wipe_from_bottom_to_top,Wipe_from_top_to_bottom,Wipe_from_right_to_left', slideshow_time_interval: '4000', slideshow_window_width: '400', slideshow_window_height: '300', slideshow_background_color: '#FFF', slideshow_border: '#999 solid 2px', text_effect: 'text_fade' }); }); </script> </head> <body> <h1>适用浏览器：FireFox、Chrome、Safari、Opera、傲游、搜狗. </h1> <h2>不支持IE8、360、世界之窗。</h2> <div id="webwidget_slideshow_html5_simple"> <ul> <li> <a href="#" ><img src="images/slideshow_large_1.jpg" alt="Sky" /></a> </li> <li> <img src="images/slideshow_large_2.jpg" alt="Sea" /> </li> <li> <a href="#" ><img src="images/slideshow_large_3.jpg" alt="Flower" /></a> </li> <li> <a href="#" ><img src="images/slideshow_large_4.jpg" alt="Tree" /></a> </li> <li> <a href="#" ><img src="images/slideshow_large_1.jpg" alt="Sky" /></a> </li> <li> <a href="#" ><img src="images/slideshow_large_2.jpg" alt="Sea" /> </a> </li> <li> <a href="#" ><img src="images/slideshow_large_3.jpg" alt="Flower" /></a> </li> <li> <a href="#" ><img src="images/slideshow_large_4.jpg" alt="Tree" /></a> </li><li> <a href="#" ><img src="images/slideshow_large_1.jpg" alt="Sky" /></a> </li> <li> <a href="#" ><img src="images/slideshow_large_2.jpg" alt="Sea" /> </a> </li> </ul> </div> <h2>Usage</h2> <h3>Include js files.</h3> <pre> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script><br /><script src="js/webwidget_slideshow_html5_simple.js"></script> </pre> <h3>Add html.</h3> <pre> <div id="webwidget_slideshow_html5_simple"><br /> <ul><br /> <li><br /> <a href="#"><img src="images/slideshow_large_1.jpg" alt="Sky" /></a><br /> </li><br /> <li><br /> <img src="images/slideshow_large_2.jpg" alt="Sea" /><br /> </li><br /> <li><br /> <a href="#"><img src="images/slideshow_large_3.jpg" alt="Flower" /></a><br /> </li><br /> <li><br /> <a href="#"><img src="images/slideshow_large_4.jpg" alt="Tree" /></a><br /> </li><br /> <li><br /> <a href="#"><img src="images/slideshow_large_1.jpg" alt="Sky" /></a><br /> </li><br /> <li><br /> <a href="#"><img src="images/slideshow_large_2.jpg" alt="Sea" /></a><br /> </li><br /> <li><br /> <a href="#"><img src="images/slideshow_large_3.jpg" alt="Flower" /></a><br /> </li><br /> <li><br /> <a href="#"><img src="images/slideshow_large_4.jpg" alt="Tree" /></a><br /> </li><br /> <li><br /> <a href="#"><img src="images/slideshow_large_1.jpg" alt="Sky" /></a><br /> </li><br /> <li><br /> <a href="#"><img src="images/slideshow_large_2.jpg" alt="Sea" /></a><br /> </li><br /> </ul><br /></div> </pre> <h3>Add startup script.</h3> <pre> <script language="javascript" type="text/javascript"><br /> $(function() {<br /> $("#webwidget_slideshow_html5_simple").webwidget_slideshow_html5_simple({<br /> slideshow_transition_effect: 'Mosaic,Wipe_from_horizontal_blind,Wipe_from_vertical_blind,Wipe_from_vertical_center,Wipe_from_horizontal_center,Wipe_to_horizontal_center,Wipe_to_vertical_center,Wipe_from_bottom_to_top,Wipe_from_top_to_bottom,Wipe_from_right_to_left',<br /> slideshow_time_interval: '4000',<br /> slideshow_window_width: '500',<br /> slideshow_window_height: '400',<br /> slideshow_background_color: '#FFF',<br /> slideshow_border: '#999 solid 2px',<br /> text_effect: 'text_fade'<br /> });<br /> });<br /> </script> </pre> <h4>parameter explanatory </h4> <table width="600" border="1"> <tr> <td>slideshow_transition_effect:</td> <td >each image transition effect</td> </tr> <tr> <td>slideshow_time_interval:</td> <td>images interval time</td> </tr> <tr> <td>text_effect:</td> <td> <p>alt="Sky"<br/><strong>options:</strong>text_nothing text_color text_fade text_jump text_rebound text_typewriter text_whirl text_run text_runin</p></td> </tr> </table> <div style="text-align:center;clear:both"> <p>适用浏览器：适用浏览器：FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。</p> <p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉