本文實例講述了js帶縮略圖的圖片輪播效果。分享給大家供大家參考。具體如下：
這是一款基于javaScript實現(xiàn)帶縮略圖的圖片輪播特效代碼，實現(xiàn)過程很簡單。
運(yùn)行效果圖：-------------------查看效果 下載源碼-------------------
小提示：瀏覽器中如果不能正常運(yùn)行，可以嘗試切換瀏覽模式。
在head區(qū)域引入CSS樣式：
<link href="css/VeVB.COm.css" rel="stylesheet" type="text/css" >
為大家分享的JS帶縮略圖的5屏輪換焦點圖特效代碼如下
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>JS帶縮略圖的5屏輪換焦點圖</title><link href="css/VeVB.COm.css" rel="stylesheet" type="text/css" ><script type="text/javascript" src="js/show.js"></script></head><body><div id="p7ssm"> <div id="p7ssm_cf"> </div> <div id="p7ssm_loading"><img src="images/loading.gif" alt="" width="78" height="8" /></div> <table id="p7ssm_fstbl" border="0" cellpadding="0" cellspacing="0" summary="Fullsize Image"> <tr> <td><div id="p7ssm_fullsize"> <div id="p7ssm_fsc"> <div id="p7ssm_fsw"> <div id="p7ssm_fsimg"><a href="javascript:;" id="p7ssm_fslink"><img src="images/biaozhi.gif" alt="" name="p7ssm_im" width="390" height="245" border="0" id="p7ssm_im" /></a></div> <div id="p7ssm_description"></div> </div> </div> </div></td> </tr> </table> <div id="p7SSMwhmb"> <div id="p7ssm_thumbs"> <div id="p7SSMwp_1"> <div class="p7ssm_thumb_section"> <ul><!-- 修改內(nèi)容開始 --> <li><a href="images/001.jpg"> <img src="images/001.jpg" alt="《福娃奧運(yùn)漫游記》獲動漫大賽最佳作品獎" width="390" height="245" /></a> <div class="p7ssm_lk"><a href="http://m.survivalescaperooms.com/">點擊查看詳情</a></div> <div class="p7ssm_fd">《福娃奧運(yùn)漫游記》獲動漫大賽最佳作品獎</div> </li> <li><a href="images/002.jpg"> <img src="images/002.jpg" alt="超級插畫設(shè)計 3D機(jī)器人與平面相結(jié)合" width="390" height="245" /></a> <div class="p7ssm_lk"><a href="http://m.survivalescaperooms.com/">點擊查看詳情</a></div> <div class="p7ssm_fd">超級插畫設(shè)計 3D機(jī)器人與平面相結(jié)合</div> </li> <li><a href="images/003.jpg"> <img src="images/003.jpg" alt="潔凈舒適的XP桌面壁紙 輕松愉快的環(huán)境" width="390" height="245" /></a> <div class="p7ssm_lk"><a href="http://m.survivalescaperooms.com/">點擊查看詳情</a></div> <div class="p7ssm_fd">潔凈舒適的XP桌面壁紙 輕松愉快的環(huán)境</div> </li> <li><a href="images/004.jpg"> <img src="images/004.jpg" alt="室內(nèi)裝修三維設(shè)計 創(chuàng)造簡潔舒適" width="390" height="245" /></a> <div class="p7ssm_lk"><a href="http://m.survivalescaperooms.com/">點擊查看詳情</a></div> <div class="p7ssm_fd">室內(nèi)裝修三維設(shè)計 創(chuàng)造簡潔舒適</div> </li> <li><a href="images/005.jpg"> <img src="images/005.jpg" alt="世界上令人嘆為觀止的仿真的機(jī)器人" width="390" height="245" /></a> <div class="p7ssm_lk"><a href="http://m.survivalescaperooms.com/">點擊查看詳情</a></div> <div class="p7ssm_fd">世界上令人嘆為觀止的仿真的機(jī)器人</div> </li> <!-- 修改內(nèi)容結(jié)束 --></ul> <br class="p7ssm_clearThumbs" /> </div> </div> </div> </div> <div id="p7ssm_toolbar"> <div class="p7ssm_sectionTrigger"><a id="p7SSMtp_1" href="#">New Image Set</a></div> <div id="p7ssm_dragbar" title="Move"><span>Move</span></div> <div id="p7ssm_preview"> <table summary="Thumbnail Preview"> <tr> <td><img src="images/biaozhi.gif" alt="" /></td> </tr> </table> </div> <div id="p7ssm_tools"> <table border="0" cellpadding="0" cellspacing="0" summary="Slideshow Toolbar"> <tr> <td><div id="p7ssm_nav_wrapper"><a id="p7SSMtnav" href="#" title="Menu"><em>Navigate</em></a> <div id="p7SSMwnav"> <div id="p7ssm_navList"> <ul> <li></li> </ul> </div> </div> </div></td> <td><a href="#" title="Hide or Show Thumbnails" id="p7SSMthmb"><em>Hide Thumbs</em></a></td> <td><a href="#" id="p7ssm_first" title="First Image"><em>First</em></a></td> <td><a href="#" id="p7ssm_prev" title="Previous Image"><em>Previous</em></a></td> <td><a href="#" id="p7ssm_pp" class="p7ssm_pause" title="Pause"><em>Pause</em></a></td> <td><a href="#" id="p7ssm_next" title="Next Image"><em>Next</em></a></td> <td><a href="#" id="p7ssm_last" title="Last Image"><em>Last</em></a></td> <td><div id="p7ssm_slidechannel"> <div id="p7ssm_slider"><a href="#" id="p7ssm_slidebar" title="Speed:"><em>Set Speed</em></a></div> </div></td> </tr> </table> </div> </div><!--[if IE 7]><style>#p7ssm, #p7ssm div {zoom: 1;}</style><![endif]--><!--[if IE 6]><style>#p7ssm a, #p7ssm, #p7ssm div, #p7ssm_thumb_wrapper {zoom: 1;}.p7ssm_thumb_section {padding-right: 0; padding-left: 0;}.p7ssm_thumb_section a {float: left;}</style><![endif]--><!--[if IE 5]><style>#p7ssm {}.p7ssm_sectionTrigger {text-align: left;}#p7ssm_navList li {float: left; clear:both; width: 100%;}#p7ssm, #p7ssm_w1, #p7ssm_w2, #p7ssm_description, #p7ssm_preview,#p7ssm_navList a, .p7ssm_sectionTrigger a, #p7ssm_thumbs,.p7ssm_thumb_section, #p7ssm_fsw {height: 1%;}.p7ssm_thumb_section {padding: 0;}</style><![endif]--><!--[if IE 5.5000]><style>#p7ssm, #p7ssm_w1, #p7ssm_w2 {zoom: 1;}</style><![endif]--><script type="text/javascript"><!--P7_SSMinit(1,1,1,1,0,1,1,1,5);//--></script></div><br><br><div align="center"> <p align="center"></p> <p align="center"></p> <p> </p></div></body></html>以上就是為大家分享的js帶縮略圖的圖片輪播效果代碼，希望大家可以喜歡，并應(yīng)用到實踐中。
新聞熱點
疑難解答
