我之前发过一个,但右侧就是一张图片上加的链接,不真实。这次花了两天的时间做了一个高仿真的,总结一下比较上一次的优势。
1、分三种状态,开团前、开团中、开团后。
2、可直接收藏宝贝和加入购物车。
3、倒计时双位数显示(为了某些人的强迫症)。
觉得好就支持一下哈
下面奉上代码,不过要回复可见哦,我可辛苦两天才弄出来的!
隐藏30天后自动显示,30天内超过100人回复我再把代码详解放出来!!
----------------------割---------------------------
<div class="slider-promo J_TWidget" data-widget-config="{'effect':'fade','contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}" data-widget-type="Slide" style="padding:5px;border:1px solid rgb(226,226,226);width:460px;height:360px;margin:10px 5px;float:left;">
<ul class="lst-main" style="margin:0px;padding:0px;width:460px;height:300px;float:left;">
<li style="display:block;z-index:1;opacity:0;">
<div class="item" style="width:460px;height:300px;">
<span><a data-attr-replace="[{'type':'href','desc':'第一个宝贝链接地址 '}]" href="http://item.taobao.com/item.htm?spm=686.1000925.1000774.49.GzPc29&id=36975390051&scene=taobao_shop" target="_blank"> <img alt="" border="0" data-attr-replace="[{'type':'src','desc':'第一个大图片地址(大小460*300)'}]" data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/216448845/T2FssLXXXbXXXXXXXX_!!216448845.jpg" height="300" src="http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/spaceball.gif" width="460" /></a></span></div>
</li>
<li style="display:block;z-index:1;opacity:0;">
<div class="item" style="width:460px;height:300px;">
<span><a data-attr-replace="[{'type':'href','desc':'第二个宝贝链接地址 '}]" href="http://item.taobao.com/item.htm?spm=686.1000925.1000774.49.GzPc29&id=36975390051&scene=taobao_shop" target="_blank"> <img alt="" border="0" data-attr-replace="[{'type':'src','desc':'第2个大图片地址(大小460*300)'}]" data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/216448845/T2HZNVXClaXXXXXXXX_!!216448845.jpg" height="300" src="http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/spaceball.gif" width="460" /></a></span></div>
</li>
<li style="display:block;z-index:1;opacity:0;">
<div class="item" style="width:460px;height:300px;">
<span><a data-attr-replace="[{'type':'href','desc':'第三个宝贝链接地址 '}]" href="http://item.taobao.com/item.htm?spm=686.1000925.1000774.49.GzPc29&id=36975390051&scene=taobao_shop" target="_blank"> <img alt="" data-attr-replace="[{'type':'src','desc':'第3个大图片地址(大小460*300)'}]" data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/216448845/T2R1.CXbVbXXXXXXXX_!!216448845.jpg" height="300" src="http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/spaceball.gif" width="460" /></a></span></div>
</li>
<li style="display:block;z-index:1;opacity:0;">
<div class="item" style="width:460px;height:300px;">
<span><a data-attr-replace="[{'type':'href','desc':'第四个宝贝链接地址 '}]" href="http://item.taobao.com/item.htm?spm=686.1000925.1000774.49.GzPc29&id=36975390051&scene=taobao_shop" target="_blank"> <img alt="" border="0" data-attr-replace="[{'type':'src','desc':'第4个大图片地址(大小460*300)'}]" data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/216448845/T2L_sFXfdbXXXXXXXX_!!216448845.jpg" height="300" src="http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/spaceball.gif" width="460" /></a></span></div>
</li>
<li style="display:block;z-index:1;opacity:0;">
<div class="item" style="width:460px;height:300px;">
<span><a data-attr-replace="[{'type':'href','desc':'第五个宝贝链接地址 '}]" href="http://item.taobao.com/item.htm?spm=686.1000925.1000774.49.GzPc29&id=36975390051&scene=taobao_shop" target="_blank"> <img alt="" border="0" data-attr-replace="[{'type':'src','desc':'第5个大图片地址(大小460*300)'}]" data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/216448845/T2IJSJXAJaXXXXXXXX_!!216448845.jpg" height="300" src="http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/spaceball.gif" width="460" /></a></span></div>
</li>
</ul>
<ul class="lst-trigger" style="margin:10px 0;padding:0px;width:460px;height:44px;float:left;">
<li style="margin:0px 15px 0px 0px;border:1px solid rgb(226,226,226);width:67px;height:44px;text-align:center;float:left;">
<span><a data-attr-replace="[{'type':'href','desc':'第一个宝贝小图链接地址 '}]" href="http://item.taobao.com/item.htm?spm=686.1000925.1000774.49.GzPc29&id=36975390051&scene=taobao_shop" target="_blank"> <img alt="" border="0" data-attr-replace="[{'type':'src','desc':'第1个小图片地址(大小66*44)'}]" data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/216448845/T2FssLXXXbXXXXXXXX_!!216448845.jpg" src="http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/spaceball.gif" style="width:67px;height:44px;" /></a></span></li>
<li style="margin:0px 15px 0px 0px;border:1px solid rgb(226,226,226);width:67px;height:44px;text-align:center;float:left;">
<span><a data-attr-replace="[{'type':'href','desc':'第二个宝贝小图链接地址 '}]" href="http://item.taobao.com/item.htm?spm=686.1000925.1000774.49.GzPc29&id=36975390051&scene=taobao_shop" target="_blank"> <img alt="" border="0" data-attr-replace="[{'type':'src','desc':'第2个小图片地址(大小66*44)'}]" data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/216448845/T2HZNVXClaXXXXXXXX_!!216448845.jpg" src="http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/spaceball.gif" style="width:67px;height:44px;" /></a></span></li>
<li style="margin:0px 15px 0px 0px;border:1px solid rgb(226,226,226);width:67px;height:44px;text-align:center;float:left;">
<span><a data-attr-replace="[{'type':'href','desc':'第三个宝贝小图链接地址 '}]" href="http://item.taobao.com/item.htm?spm=686.1000925.1000774.49.GzPc29&id=36975390051&scene=taobao_shop" target="_blank"> <img alt="" border="0" data-attr-replace="[{'type':'src','desc':'第一个小图片地址(大小66*44)'}]" data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/216448845/T2R1.CXbVbXXXXXXXX_!!216448845.jpg" src="http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/spaceball.gif" style="width:67px;height:44px;" /></a></span></li>
<li style="margin:0px 15px 0px 0px;border:1px solid rgb(226,226,226);width:67px;height:44px;text-align:center;float:left;">
<span><a data-attr-replace="[{'type':'href','desc':'第四个宝贝小图链接地址 '}]" href="http://item.taobao.com/item.htm?spm=686.1000925.1000774.49.GzPc29&id=36975390051&scene=taobao_shop" target="_blank"> <img alt="" border="0" data-attr-replace="[{'type':'src','desc':'第一个小图片地址(大小66*44)'}]" data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/216448845/T2L_sFXfdbXXXXXXXX_!!216448845.jpg" src="http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/spaceball.gif" style="width:67px;height:44px;" /></a></span></li>
<li style="margin:0px 0px 0px 0px;border:1px solid rgb(226,226,226);width:67px;height:44px;text-align:center;float:left;">
<span><a data-attr-replace="[{'type':'href','desc':'第五个宝贝小图链接地址 '}]" href="http://item.taobao.com/item.htm?spm=686.1000925.1000774.49.GzPc29&id=36975390051&scene=taobao_shop" target="_blank"> <img alt="" border="0" data-attr-replace="[{'type':'src','desc':'第一个小图片地址(大小66*44)'}]" data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/216448845/T2IJSJXAJaXXXXXXXX_!!216448845.jpg" src="http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/spaceball.gif" style="width:67px;height:44px;" /></a></span></li>
</ul>
</div>
<div style="height:372px;width:468px;float:right;padding:10px 0; ">
<div style=" height:352px;width:468px;border-top: 1px dashed #959595;">
<div style=" height:54px;padding:3px 6px;margin:0 0 0 10px;"> <span style=" background:#EF8D00;display: inline-block;color: white;padding: 2px 6px;margin-right: 6px;margin-top: 3px;font-size: 14px;line-height: 18px;border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;">包邮</span><a href="http://item.taobao.com/item.htm?spm=686.1000925.1000774.49.GzPc29&id=36975390051&scene=