用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - html代码库

JS 5屏轮换代码(渐变切换效果 带缩略图)

2013-01-14 作者: 小蜜锋举报

[html]代码库

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS 5屏轮换代码(渐变效果 带缩略图)</title>
<link href="css/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">&nbsp;</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"  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://yuncode.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://yuncode.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://yuncode.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://yuncode.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://yuncode.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"  /></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>
</body>
</html>

[代码运行效果截图]


JS 5屏轮换代码(渐变切换效果 带缩略图)

[源代码打包下载]




网友评论    (发表评论)


发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

输入口令后可复制整站源码

加载中,请稍后...