提取的一个淘宝幻灯片效果

昨天Bestchao让我帮忙提取淘宝上的一个幻灯片效果,闲着无聊就提取了出来。

只是精简了其中无用的js和Css。

另:js下载到本地后不能使用,这点应该是Js做了处理。以后有时间再研究下。

js幻灯片比起flash还是有优越性的,因为对搜索引擎更为友好。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>幻灯片效果</title>
<!-- css -->
<style type="text/css">
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
ul,ol{list-style:none;}
.slider-promo{position:relative;overflow:hidden;}
.slider-promo .lst-main{overflow:hidden;_width:100%;height:258px;}
.slider-promo .lst-main li a{display:block;overflow:hidden;}
.slider-promo .lst-trigger{position:absolute;z-index:10;bottom:9px;right:4px;height:19px;line-height:17px;color:#fff;}
.slider-promo .lst-trigger li{float:left;margin-right:5px;width:17px;font-weight:700;border:1px solid #fff;background-color:#999;height:auto;line-height:inherit;text-align:center;cursor:pointer;}
.slider-promo .lst-trigger .current{width:22px;background-color:#000;}
.slider-promo img{vertical-align:top;}
body {
    margin:0 auto;
    text-align:center;
    }
</style>
<!-- javascri&#112;t -->
<script type="text/javascript" src="http://a.tbcdn.cn/tbra/1.0/tbra-aio.js?t=200911111751.js"></script>
<script type="text/javascript" src="http://a.tbcdn.cn/app/shop/shop.js?t=201005271325.js"></script>
</head>
<body>
<div id="content" class="eshop tb-shop "  data-cat="J_Cat0">

              <table  border="0" cellpadding="0" cellspacing="0" height="314" width="343">
                <tr>
                  <td width="33"></td>
                  <td width="310"><div class="slider-promo J_Slider" style="height: 310px">
                    <ul>
                      <li><a href="http://item.taobao.com/auction/item_detail.htm?item_num_id=5537445709" target="_blank"><img alt="" border="0" src="http://img07.taobaocdn.com/bao/uploaded/i7/T1sb0BXhNqXXaH3n.._113609.jpg_310x310.jpg" /></a></li>
                      <li><a href="http://item.taobao.com/auction/item_detail.htm?item_num_id=5948572333" target="_blank"><img alt="" border="0" src="http://img04.taobaocdn.com/bao/uploaded/i4/T1dQRDXfhlXXc92ZLb_093355.jpg_310x310.jpg" /></a></li>
                      <li><a href="http://item.taobao.com/auction/item_detail-0db1-cfe4b868130d758f155db4a4c241d71e.htm" target="_blank"><img alt="" border="0" src="http://img01.taobaocdn.com/bao/uploaded/i1/T1oWXrXddXXXchlRza_122142.jpg_310x310.jpg" /></a></li>
                      <li><a href="http://item.taobao.com/item.htm?id=4728470011" target="_blank"><img border="0" src="http://img08.taobaocdn.com/imgextra/i8/200082961/T2DDXfXaNdXXXXXXXX_!!200082961.jpg" /></a></li>
                      <li><a href="http://item.taobao.com/item.htm?id=5700816877" target="_blank"><img alt="" border="0" height="310" src="http://img02.taobaocdn.com/bao/uploaded/i2/T1.r4CXeBnXXbUNVQW_022348.jpg_310x310.jpg" width="310" /></a></li>
                    </ul>
                  </div></td>
                </tr>
              </table>
</div>
</body>
</html>


效果参阅:http://fanke-tb.taobao.com/

今天无意看到福星站上也有整理此效果代码。Js本地后可正常使用。

再分享下:

转载地址:http://www.fxdaima.com/daima/70/498.html

[本日志由 蛛蛛虎 于 2010-07-05 08:46 AM 编辑]
上一篇: windows下批处理自定义IP、子网掩码、网关、dns
下一篇: 精确到秒的倒计时Js
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: 幻灯片
相关日志:
评论: 1 | 引用: 0 | 查看次数: -
肆道
回复回复肆道[2010-10-23 05:37 PM | | | 广东省广州市 电信| del | 通过审核]
[ 正在加载评论信息,请稍后... ]
发表评论
昵 称:
密 码: 游客发言不需要密码.
邮 箱: 支持Gravatar头像.
网 址: 输入网址便于回访.
内 容:
验证码:
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.