本文实例讲述了js带缩略图的图片轮播效果。分享给大家供大家参考。具体如下：
这是一款基于javaScript实现带缩略图的图片轮播特效代码，实现过程很简单。
运行效果图：-------------------查看效果 下载源码-------------------
小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
在head区域引入CSS样式：
<link href="https://www.jb51.net/css/jb51.net.css" type="text/css" >
为大家分享的JS带缩略图的5屏轮换焦点图特效代码如下
<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS带缩略图的5屏轮换焦点图</title> <link href="https://www.jb51.net/css/jb51.net.css" type="text/css" > <script type="text/javascript" src="https://www.jb51.net/js/show.js"></script> </head> <body> <div> <div> </div> <div><img src="https://www.jb51.net/images/loading.gif" alt="" /></div> <table cellpadding="0" cellspacing="0" summary="Fullsize Image"> <tr> <td><div> <div> <div> <div><a href="javascript:;"><img src="https://www.jb51.net/images/biaozhi.gif" alt="" /></a></div> <div></div> </div> </div> </div></td> </tr> </table> <div> <div> <div> <div> <ul><!-- 修改内容开始 --> <li><a href="https://www.jb51.net/images/001.jpg"> <img src="https://www.jb51.net/images/001.jpg" alt="《福娃奥运漫游记》获动漫大赛最佳作品奖" /></a> <div><a href="https://www.jb51.net/">点击查看详情</a></div> <div>《福娃奥运漫游记》获动漫大赛最佳作品奖</div> </li> <li><a href="https://www.jb51.net/images/002.jpg"> <img src="https://www.jb51.net/images/002.jpg" alt="超级插画设计 3D机器人与平面相结合" /></a> <div><a href="https://www.jb51.net/">点击查看详情</a></div> <div>超级插画设计 3D机器人与平面相结合</div> </li> <li><a href="https://www.jb51.net/images/003.jpg"> <img src="https://www.jb51.net/images/003.jpg" alt="洁净舒适的XP桌面壁纸 轻松愉快的环境" /></a> <div><a href="https://www.jb51.net/">点击查看详情</a></div> <div>洁净舒适的XP桌面壁纸 轻松愉快的环境</div> </li> <li><a href="https://www.jb51.net/images/004.jpg"> <img src="https://www.jb51.net/images/004.jpg" alt="室内装修三维设计 创造简洁舒适" /></a> <div><a href="https://www.jb51.net/">点击查看详情</a></div> <div>室内装修三维设计 创造简洁舒适</div> </li> <li><a href="https://www.jb51.net/images/005.jpg"> <img src="https://www.jb51.net/images/005.jpg" alt="世界上令人叹为观止的仿真的机器人" /></a> <div><a href="https://www.jb51.net/">点击查看详情</a></div> <div>世界上令人叹为观止的仿真的机器人</div> </li> <!-- 修改内容结束 --></ul> <br /> </div> </div> </div> </div> <div> <div><a href="#">New Image Set</a></div> <div title="Move"><span>Move</span></div> <div> <table summary="Thumbnail Preview"> <tr> <td><img src="https://www.jb51.net/images/biaozhi.gif" alt="" /></td> </tr> </table> </div> <div> <table cellpadding="0" cellspacing="0" summary="Slideshow Toolbar"> <tr> <td><div><a href="#" title="Menu"><em>Navigate</em></a> <div> <div> <ul> <li></li> </ul> </div> </div> </div></td> <td><a href="#" title="Hide or Show Thumbnails"><em>Hide Thumbs</em></a></td> <td><a href="#" title="First Image"><em>First</em></a></td> <td><a href="#" title="Previous Image"><em>Previous</em></a></td> <td><a href="#" title="Pause"><em>Pause</em></a></td> <td><a href="#" title="Next Image"><em>Next</em></a></td> <td><a href="#" title="Last Image"><em>Last</em></a></td> <td><div> <div><a href="#" 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> <p></p> <p></p> <p> </p> </div> </body> </html>
以上就是为大家分享的js带缩略图的图片轮播效果代码，希望大家可以喜欢，并应用到实践中。
您可能感兴趣的文章: