10产品左右轮播展示代码

bioger1

效果图：效果图见上图
说明：次代码没有经过优化，请大家自行优化后再使用吧

1. <div class="sg-hd" style="height:40px;line-height:36px;background:#FFF url(http://img03.taobaocdn.com/imgextra/i3/770458061/TB2hEGRXFXXXXaEXpXXXXXXXXXX-770458061.jpg) no-repeat center center;margin-bottom:10px;overflow:hidden;">
   
2.   <h3 style="font-size:12px;color:#875A4E;text-align:center;margin-top:2px;">精品展示台</h3>
   
3. </div>
   
4. <div class="sg-bd J_TWidget tshow_aMdA7" style="font-family:arial;background:#DDCAB7;height:335px;width:950px;overflow:hidden;padding-top:20px;" data-widget-config="{"navCls":"ks-switchable-nav","contentCls":"ks-switchable-content","steps":1,"viewSize": [829],"prevBtnCls": "prev","nextBtnCls": "next","disableBtnCls": "disable",
   
5. 
   
6. "circular":true,
   
7. 
   
8. "effect":"scrollx",
   
9. 
   
10. "easing":"bounceOut",
    
11. 
    
12. "duration":1.0,
    
13. 
    
14. "interval":"4",
    
15. 
    
16. "autoplay":true}" data-widget-type="Carousel">
    
17.   <div style="overflow:hidden;clear:both;zoom:1;width:950px;">
    
18.     <div class="prev" style="float:left;margin-top:134px;background:#E9E9E9 url(http://img01.taobaocdn.com/imgextra/i1/770458061/TB238HCXVXXXXcCXXXXXXXXXXXX-770458061.gif) no-repeat center 0;width:50px;height:32px;cursor:pointer;">   </div>
    
19.     <div class="scroller" style="float:left;height:300px;width:829px;overflow:hidden;margin-left:10px;">
    
20.       <ul class="ks-switchable-content">
    
21.         <li style="width:829px;height:300px;overflow:hidden;"> <a style="float:left;display:block;_display:inline;cursor:pointer;width:165px;height:300px;background:url(http://img04.taobaocdn.com/imgextra/i4/770458061/TB2ZJLDXVXXXXasXXXXXXXXXXXX-770458061.jpg) no-repeat center center;text-decoration:none;margin:0 1px 1px 0;" href="http://item.taobao.com/item.htm?id=0&scene=taobao_shop" target="_blank"> <span style="display:block;background:#FFF;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);opacity:0.8;margin-top:240px;color:#333;height:60px;"> <span style="display:block;height:30px;line-height:30px;overflow:hidden;padding:0 10px 0 10px;">此商品不存在或未同步</span> <b style="display:block;padding:0 10px 0 10px;">￥99</b> </span> </a> <a style="float:left;display:block;_display:inline;cursor:pointer;width:165px;height:300px;background:url(http://img04.taobaocdn.com/imgextra/i4/770458061/TB2JrrDXVXXXXXVXXXXXXXXXXXX-770458061.jpg) no-repeat center center;text-decoration:none;margin:0 1px 1px 0;" href="http://item.taobao.com/item.htm?id=0&scene=taobao_shop" target="_blank"> <span style="display:block;background:#FFF;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);opacity:0.8;margin-top:240px;color:#333;height:60px;"> <span style="display:block;height:30px;line-height:30px;overflow:hidden;padding:0 10px 0 10px;">此商品不存在或未同步</span> <b style="display:block;padding:0 10px 0 10px;">￥99</b> </span> </a> <a style="float:left;display:block;_display:inline;cursor:pointer;width:165px;height:300px;background:url(http://img01.taobaocdn.com/imgextra/i1/770458061/TB2SVDDXVXXXXbvXXXXXXXXXXXX-770458061.jpg) no-repeat center center;text-decoration:none;margin:0 1px 1px 0;" href="http://item.taobao.com/item.htm?id=0&scene=taobao_shop" target="_blank"> <span style="display:block;background:#FFF;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);opacity:0.8;margin-top:240px;color:#333;height:60px;"> <span style="display:block;height:30px;line-height:30px;overflow:hidden;padding:0 10px 0 10px;">此商品不存在或未同步</span> <b style="display:block;padding:0 10px 0 10px;">￥99</b> </span> </a> <a style="float:left;display:block;_display:inline;cursor:pointer;width:165px;height:300px;background:url(http://img02.taobaocdn.com/imgextra/i2/770458061/TB2KhTCXVXXXXXDXpXXXXXXXXXX-770458061.jpg) no-repeat center center;text-decoration:none;margin:0 1px 1px 0;" href="http://item.taobao.com/item.htm?id=0&scene=taobao_shop" target="_blank"> <span style="display:block;background:#FFF;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);opacity:0.8;margin-top:240px;color:#333;height:60px;"> <span style="display:block;height:30px;line-height:30px;overflow:hidden;padding:0 10px 0 10px;">此商品不存在或未同步</span> <b style="display:block;padding:0 10px 0 10px;">￥99</b> </span> </a> <a style="float:left;display:block;_display:inline;cursor:pointer;width:165px;height:300px;background:url(http://img02.taobaocdn.com/imgextra/i2/770458061/TB2oF2DXVXXXXXaXXXXXXXXXXXX-770458061.jpg) no-repeat center center;text-decoration:none;margin:0 0 1px 0;" href="http://item.taobao.com/item.htm?id=0&scene=taobao_shop" target="_blank"> <span style="display:block;background:#FFF;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);opacity:0.8;margin-top:240px;color:#333;height:60px;"> <span style="display:block;height:30px;line-height:30px;overflow:hidden;padding:0 10px 0 10px;">此商品不存在或未同步</span> <b style="display:block;padding:0 10px 0 10px;">￥99</b> </span> </a> </li>
    
22.         <li style="width:829px;height:300px;overflow:hidden;"> <a style="float:left;display:block;_display:inline;cursor:pointer;width:165px;height:300px;background:url(http://img04.taobaocdn.com/imgextra/i4/770458061/TB2ZJLDXVXXXXasXXXXXXXXXXXX-770458061.jpg) no-repeat center center;text-decoration:none;margin:0 1px 1px 0;" href="http://item.taobao.com/item.htm?id=0&scene=taobao_shop" target="_blank"> <span style="display:block;background:#FFF;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);opacity:0.8;margin-top:240px;color:#333;height:60px;"> <span style="display:block;height:30px;line-height:30px;overflow:hidden;padding:0 10px 0 10px;">此商品不存在或未同步</span> <b style="display:block;padding:0 10px 0 10px;">￥99</b> </span> </a> <a style="float:left;display:block;_display:inline;cursor:pointer;width:165px;height:300px;background:url(http://img04.taobaocdn.com/imgextra/i4/770458061/TB2JrrDXVXXXXXVXXXXXXXXXXXX-770458061.jpg) no-repeat center center;text-decoration:none;margin:0 1px 1px 0;" href="http://item.taobao.com/item.htm?id=0&scene=taobao_shop" target="_blank"> <span style="display:block;background:#FFF;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);opacity:0.8;margin-top:240px;color:#333;height:60px;"> <span style="display:block;height:30px;line-height:30px;overflow:hidden;padding:0 10px 0 10px;">此商品不存在或未同步</span> <b style="display:block;padding:0 10px 0 10px;">￥99</b> </span> </a> <a style="float:left;display:block;_display:inline;cursor:pointer;width:165px;height:300px;background:url(http://img01.taobaocdn.com/imgextra/i1/770458061/TB2SVDDXVXXXXbvXXXXXXXXXXXX-770458061.jpg) no-repeat center center;text-decoration:none;margin:0 1px 1px 0;" href="http://item.taobao.com/item.htm?id=0&scene=taobao_shop" target="_blank"> <span style="display:block;background:#FFF;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);opacity:0.8;margin-top:240px;color:#333;height:60px;"> <span style="display:block;height:30px;line-height:30px;overflow:hidden;padding:0 10px 0 10px;">此商品不存在或未同步</span> <b style="display:block;padding:0 10px 0 10px;">￥99</b> </span> </a> <a style="float:left;display:block;_display:inline;cursor:pointer;width:165px;height:300px;background:url(http://img02.taobaocdn.com/imgextra/i2/770458061/TB2KhTCXVXXXXXDXpXXXXXXXXXX-770458061.jpg) no-repeat center center;text-decoration:none;margin:0 1px 1px 0;" href="http://item.taobao.com/item.htm?id=0&scene=taobao_shop" target="_blank"> <span style="display:block;background:#FFF;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);opacity:0.8;margin-top:240px;color:#333;height:60px;"> <span style="display:block;height:30px;line-height:30px;overflow:hidden;padding:0 10px 0 10px;">此商品不存在或未同步</span> <b style="display:block;padding:0 10px 0 10px;">￥99</b> </span> </a> <a style="float:left;display:block;_display:inline;cursor:pointer;width:165px;height:300px;background:url(http://img02.taobaocdn.com/imgextra/i2/770458061/TB2oF2DXVXXXXXaXXXXXXXXXXXX-770458061.jpg) no-repeat center center;text-decoration:none;margin:0 0 1px 0;" href="http://item.taobao.com/item.htm?id=0&scene=taobao_shop" target="_blank"> <span style="display:block;background:#FFF;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);opacity:0.8;margin-top:240px;color:#333;height:60px;"> <span style="display:block;height:30px;line-height:30px;overflow:hidden;padding:0 10px 0 10px;">此商品不存在或未同步</span> <b style="display:block;padding:0 10px 0 10px;">￥99</b> </span> </a> </li>
    
23.       </ul>
    
24.     </div>
    
25.     <div class="next" style="float:right;margin-top:134px;background:#E9E9E9 url(http://img01.taobaocdn.com/imgextra/i1/770458061/TB238HCXVXXXXcCXXXXXXXXXXXX-770458061.gif) no-repeat center -32px;width:50px;height:32px;cursor:pointer;">   </div>
    
26.   </div>
    
27.   <ul class="ks-switchable-nav" style="color:#875A4E;font-size:20px;font-family:tahoma;margin-left:455px;">
    
28.     <li style="width:20px;height:20px;line-height:20px;text-align:center;float:left;cursor:pointer;"> ● </li>
    
29.     <li style="width:20px;height:20px;line-height:20px;text-align:center;float:left;cursor:pointer;"> ● </li>
    
30.   </ul>
    
31. </div>
    
32. <a name="sgmb"></a>

复制代码

上一篇：淘宝店铺装修全屏海报代码
下一篇：淘宝天猫全屏轮播代码