js image carousel effect code sharing with thumbnails_javascript skills

The example in this article describes the js image carousel effect with thumbnails. Share it with everyone for your reference. The details are as follows:
This is a code based on javaScript that implements image carousel effects with thumbnails. The implementation process is very simple.
Operation rendering: -------------------View the effect Download the source code---------- --------

Tips: If the browser does not work properly, you can try switching the browsing mode.
Introduce CSS styles in the head area:

<link href="css/jb51.net.css" rel="stylesheet" type="text/css" >

The JS 5-screen rotating focus image special effects code with thumbnails shared with you is as follows

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JS带缩略图的5屏轮换焦点图</title>
<link href="css/jb51.net.css" rel="stylesheet" type="text/css" >
<script type="text/javascript" src="js/show.js"></script>



<div id="p7ssm">
   <div id="p7ssm_cf"> </div>
   <div id="p7ssm_loading"><img src="/static/imghw/default1.png" data-src="images/loading.gif" class="lazy" alt="" style="max-width:90%"></div>
   <table id="p7ssm_fstbl" border="0" cellpadding="0" cellspacing="0" summary="Fullsize Image">
    <tbody><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="/static/imghw/default1.png" data-src="images/biaozhi.gif" class="lazy" alt="" name="p7ssm_im" style="max-width:90%" border="0" id="p7ssm_im"></a></div>
         <div id="p7ssm_description"></div>
        </div>
       </div>
      </div></td>
    </tr>
   </tbody></table>
   <div id="p7SSMwhmb">
    <div id="p7ssm_thumbs">
     <div id="p7SSMwp_1">
      <div class="p7ssm_thumb_section">
       <ul><!-- 修改内容开始 -->
        <li><a href="images/001.jpg">
  <img src="/static/imghw/default1.png" data-src="images/001.jpg" class="lazy" alt="js image carousel effect code sharing with thumbnails_javascript skills" style="max-width:90%"></a>
         <div class="p7ssm_lk"><a href="http://www.jb51.net/">点击查看详情</a></div>
         <div class="p7ssm_fd">js image carousel effect code sharing with thumbnails_javascript skills</div>
        </li>
        <li><a href="images/002.jpg">
  <img src="/static/imghw/default1.png" data-src="images/002.jpg" class="lazy" alt="超级插画设计 3D机器人与平面相结合" style="max-width:90%"></a>
         <div class="p7ssm_lk"><a href="http://www.jb51.net/">点击查看详情</a></div>
         <div class="p7ssm_fd">超级插画设计 3D机器人与平面相结合</div>
        </li>
        <li><a href="images/003.jpg">
  <img src="/static/imghw/default1.png" data-src="images/003.jpg" class="lazy" alt="洁净舒适的XP桌面壁纸 轻松愉快的环境" style="max-width:90%"></a>
         <div class="p7ssm_lk"><a href="http://www.jb51.net/">点击查看详情</a></div>
         <div class="p7ssm_fd">洁净舒适的XP桌面壁纸 轻松愉快的环境</div>
        </li>
        <li><a href="images/004.jpg">
  <img src="/static/imghw/default1.png" data-src="images/004.jpg" class="lazy" alt="室内装修三维设计 创造简洁舒适" style="max-width:90%"></a>
         <div class="p7ssm_lk"><a href="http://www.jb51.net/">点击查看详情</a></div>
         <div class="p7ssm_fd">室内装修三维设计 创造简洁舒适</div>
        </li>
        <li><a href="images/005.jpg">
  <img src="/static/imghw/default1.png" data-src="images/005.jpg" class="lazy" alt="世界上令人叹为观止的仿真的机器人" style="max-width:90%"></a>
         <div class="p7ssm_lk"><a href="http://www.jb51.net/">点击查看详情</a></div>
         <div class="p7ssm_fd">世界上令人叹为观止的仿真的机器人</div>
        </li>
       <!-- 修改内容结束 --></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">
      <tbody><tr>
       <td><img src="/static/imghw/default1.png" data-src="images/biaozhi.gif" class="lazy" alt=""></td>
      </tr>
     </tbody></table>
    </div>
    <div id="p7ssm_tools">
     <table border="0" cellpadding="0" cellspacing="0" summary="Slideshow Toolbar">
      <tbody><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>
     </tbody></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>

The above is the js image carousel effect code with thumbnails shared with you. I hope you can like it and apply it in practice.