素材分类

10产品左右轮播展示代码

0
回复
1859
查看
[复制链接]
  • TA的每日心情

    2017-11-4 16:08
  • 签到天数: 2 天

    [LV.1]初来乍到

    474

    主题

    497

    帖子

    3985

    积分

    论坛元老

    Rank: 8Rank: 8

    积分
    3985
    发表于 2015-1-3 14:16:24 | 显示全部楼层 |阅读模式
    QQ图片20150103141300.jpg

    效果图:效果图见上图
    说明:次代码没有经过优化,请大家自行优化后再使用吧
    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. "circular":true,

    6. "effect":"scrollx",

    7. "easing":"bounceOut",

    8. "duration":1.0,

    9. "interval":"4",

    10. "autoplay":true}" data-widget-type="Carousel">
    11.   <div style="overflow:hidden;clear:both;zoom:1;width:950px;">
    12.     <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>
    13.     <div class="scroller" style="float:left;height:300px;width:829px;overflow:hidden;margin-left:10px;">
    14.       <ul class="ks-switchable-content">
    15.         <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>
    16.         <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>
    17.       </ul>
    18.     </div>
    19.     <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>
    20.   </div>
    21.   <ul class="ks-switchable-nav" style="color:#875A4E;font-size:20px;font-family:tahoma;margin-left:455px;">
    22.     <li style="width:20px;height:20px;line-height:20px;text-align:center;float:left;cursor:pointer;"> ● </li>
    23.     <li style="width:20px;height:20px;line-height:20px;text-align:center;float:left;cursor:pointer;"> ● </li>
    24.   </ul>
    25. </div>
    26. <a name="sgmb"></a>
    复制代码





    上一篇:淘宝店铺装修全屏海报代码
    下一篇:淘宝天猫全屏轮播代码
    该会员没有填写今日想说内容.
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    关注官方微信

    微信号:dean_green

    微博:blueFresh素材大全

    QQ1群:45163589

    QQ2群:54765476

    全国服务热线:

    400-123-456789

    (工作日:周一至周五 9:00-16:00)
    北京市朝阳区红军营南路19号集美家居后院楼2层

    Archiver-手机版-小黑屋-Sitemap- TOP网坛

    Powered by TOP网坛 X3.4© 2001-2013