js带缩略图的图片轮播效果代码分享

前端技术 2023/09/03 JavaScript

本文实例讲述了js带缩略图的图片轮播效果。分享给大家供大家参考。具体如下：
这是一款基于javaScript实现带缩略图的图片轮播特效代码，实现过程很简单。
运行效果图：-------------------查看效果 下载源码-------------------

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
在head区域引入CSS样式：

<link href=\"css/phpstudy.net.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/phpstudy.net.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><!-- 修改内容开始 -->
        <li><a href=\"images/001.jpg\">
  <img src=\"images/001.jpg\" alt=\"《福娃奥运漫游记》获动漫大赛最佳作品奖\" width=\"390\" height=\"245\" /></a>
         <div class=\"p7ssm_lk\"><a href=\"http://www.phpstudy.net/\">点击查看详情</a></div>
         <div class=\"p7ssm_fd\">《福娃奥运漫游记》获动漫大赛最佳作品奖</div>
        </li>
        <li><a href=\"images/002.jpg\">
  <img src=\"images/002.jpg\" alt=\"超级插画设计 3D机器人与平面相结合\" width=\"390\" height=\"245\" /></a>
         <div class=\"p7ssm_lk\"><a href=\"http://www.phpstudy.net/\">点击查看详情</a></div>
         <div class=\"p7ssm_fd\">超级插画设计 3D机器人与平面相结合</div>
        </li>
        <li><a href=\"images/003.jpg\">
  <img src=\"images/003.jpg\" alt=\"洁净舒适的XP桌面壁纸 轻松愉快的环境\" width=\"390\" height=\"245\" /></a>
         <div class=\"p7ssm_lk\"><a href=\"http://www.phpstudy.net/\">点击查看详情</a></div>
         <div class=\"p7ssm_fd\">洁净舒适的XP桌面壁纸 轻松愉快的环境</div>
        </li>
        <li><a href=\"images/004.jpg\">
  <img src=\"images/004.jpg\" alt=\"室内装修三维设计 创造简洁舒适\" width=\"390\" height=\"245\" /></a>
         <div class=\"p7ssm_lk\"><a href=\"http://www.phpstudy.net/\">点击查看详情</a></div>
         <div class=\"p7ssm_fd\">室内装修三维设计 创造简洁舒适</div>
        </li>
        <li><a href=\"images/005.jpg\">
  <img src=\"images/005.jpg\" alt=\"世界上令人叹为观止的仿真的机器人\" width=\"390\" height=\"245\" /></a>
         <div class=\"p7ssm_lk\"><a href=\"http://www.phpstudy.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\">
      <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带缩略图的图片轮播效果代码，希望大家可以喜欢，并应用到实践中。

本文地址：https://www.stayed.cn/item/8797

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案