提取的一个淘宝幻灯片效果
作者:蛛蛛虎 日期:2010-06-24
只是精简了其中无用的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>
<!-- javascript -->
<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>
<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>
<!-- javascript -->
<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 | 
| 
| 广东省广州市 电信| 
| 通过审核]发表评论