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

作者：bea

本文实例讲述了js带缩略图的图片轮播效果。分享给大家供大家参考。具体如下：这是一款基于javaScript实现带缩略图的图片轮播特效代码，实现过程很简单。运行效果图：-------------------查看效果下载源码------------------- 小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。在head区域引入CSS样式： <link href="css/.css" rel="stylesheet" type="text/css"

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

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


<link href="css/.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/.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="/">点击查看详情</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="/">点击查看详情</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="/">点击查看详情</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="/">点击查看详情</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="/">点击查看详情</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带缩略图的图片轮播效果代码，希望大家可以喜欢，并应用到实践中。

有用 | 无用

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

猜你喜欢

您可能感兴趣的文章: