淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1202|回复: 2
收起左侧

一组天猫790轮播代码(带缩略图)

[复制链接]
  • TA的每日心情

    2015-10-20 15:41
  • 签到天数: 2 天

    连续签到: 1 天

    [LV.1]初学乍练

    3

    主题

    30

    帖子

    1326

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    1326

    发表于 2015-3-12 15:15:14 | 显示全部楼层 |阅读模式
    1. <s class="skin-box-tp"><b></b></s>
    2. <div class="skin-box-bd clear-fix">
    3.    <span>
    4.   <div data-widget-config="{


























    5.             "contentCls": "slide-kun137938725457content",


























    6.             "triggerCls": "slide-kun137938725457triggers",


























    7.             "navCls": "slide-kun137938725457triggers",


























    8.             "triggerType": "mouse",


























    9.             "effect": "scrollx",


























    10.             "steps": 1,


























    11.             "autoplay": true,


























    12.             "circular": true


























    13.         }" data-widget-type="Carousel" class="J_TWidget" style="padding:0px;margin:0px;width:790px;">
    14.     <div style="height:317px;width:790px;overflow:hidden;padding:0px;margin:0px;position:relative;">
    15.       <ul class="slide-kun137938725457content" style="height:317px;width:999999px;padding:0px;margin:0px;left:-2370px;">
    16.         <li style="width:790px;height:317px;display:block;padding:0px;margin:0px;list-style-type:none;float:left;" class="ks-switchable-panel-internal627">
    17.           <div style="padding:0px;margin:0px;">
    18.              <a target="_blank" style="padding:0px;margin:0px;"  data-spm-wangpu-module-id="5003-3790267362" data-spm-anchor-id="a220o.1000855.w5003-3790267362.1"> <img width="790px" height="315px" border="0px" src="http://img04.taobaocdn.com/imgextra/i4/1902439175/TB2JAIobFXXXXXPXpXXXXXXXXXX_!!1902439175.jpg" /></a>
    19.           </div>
    20.           <div style="height:2px;font-size:2px;line-height:2px;float:left;width:196px;background-color:#0000FF;">
    21.             
    22.           </div>
    23.         </li>
    24.         <li style="width:790px;height:317px;display:block;padding:0px;margin:0px;float:left;" class="ks-switchable-panel-internal627">
    25.           <div style="padding:0px;margin:0px;">
    26.              <a target="_blank" style="padding:0px;margin:0px;" > <img width="790px" height="315px" border="0px" src="http://img01.taobaocdn.com/imgextra/i1/1902439175/TB2EXlCbFXXXXXgXpXXXXXXXXXX_!!1902439175.jpg" /></a>
    27.           </div>
    28.           <div style="height:2px;font-size:2px;line-height:2px;margin-left:198px;width:196px;background-color:#0000FF;">
    29.             
    30.           </div>
    31.         </li>
    32.         <li style="width:790px;height:317px;display:block;padding:0px;margin:0px;list-style-type:none;float:left;" class="ks-switchable-panel-internal627">
    33.           <div style="padding:0px;margin:0px;">
    34.              <a target="_blank" style="padding:0px;margin:0px;"  data-spm-wangpu-module-id="5003-3790267362" data-spm-anchor-id="a220o.1000855.w5003-3790267362.3"> <img width="790px" height="315px" border="0px" src="http://img03.taobaocdn.com/imgextra/i3/1902439175/TB2sNdvbFXXXXbnXpXXXXXXXXXX_!!1902439175.jpg" /></a>
    35.           </div>
    36.           <div style="height:2px;font-size:2px;line-height:2px;margin-left:396px;width:196px;background-color:#0000FF;">
    37.             
    38.           </div>
    39.         </li>
    40.         <li style="width:790px;height:317px;display:block;padding:0px;margin:0px;list-style-type:none;float:left;" class="ks-switchable-panel-internal627">
    41.           <div style="padding:0px;margin:0px;">
    42.              <a target="_blank" style="padding:0px;margin:0px;"  data-spm-wangpu-module-id="5003-3790267362" data-spm-anchor-id="a220o.1000855.w5003-3790267362.4"> <img width="790px" height="315px" border="0px" src="http://img04.taobaocdn.com/imgextra/i4/1902439175/TB2wyBZaXXXXXbbXpXXXXXXXXXX_!!1902439175.jpg" /></a>
    43.           </div>
    44.           <div style="height:2px;font-size:2px;line-height:2px;float:right;width:196px;background-color:#0000FF;">
    45.             
    46.           </div>
    47.         </li>
    48.       </ul>
    49.     </div>
    50.     <div style="height:74px;width:790px;overflow:hidden;padding:0px;margin:0px;">
    51.       <ul class="slide-kun137938725457triggers" style="padding:0px;margin:0px;width:790px;height:74px;">
    52.         <li style="float:left;list-style-type:none;" class="ks-switchable-trigger-internal626">
    53.            <img width="196px" height="74px" src="http://img04.taobaocdn.com/imgextra/i4/1902439175/TB21VZobFXXXXawXpXXXXXXXXXX_!!1902439175.jpg" />
    54.         </li>
    55.         <li style="float:left;margin-left:2px;list-style-type:none;" class="ks-switchable-trigger-internal626">
    56.            <img width="196px" height="74px" src="http://img02.taobaocdn.com/imgextra/i2/1902439175/TB2owKDbFXXXXb8XpXXXXXXXXXX_!!1902439175.jpg" />
    57.         </li>
    58.         <li style="float:left;margin-left:2px;list-style-type:none;" class="ks-switchable-trigger-internal626">
    59.            <img width="196px" height="74px" src="http://img01.taobaocdn.com/imgextra/i1/1902439175/TB2YBCHbFXXXXXtXXXXXXXXXXXX_!!1902439175.jpg" />
    60.         </li>
    61.         <li style="float:right;list-style-type:none;" class="ks-switchable-trigger-internal626 ks-active">
    62.            <img width="196px" height="74px" src="http://img02.taobaocdn.com/imgextra/i2/1902439175/TB27uyHbFXXXXarXXXXXXXXXXXX_!!1902439175.jpg" />
    63.         </li>
    64.       </ul>
    65.     </div>
    66.   </div>
    67.    </span>
    68. </div>
    69. <s class="skin-box-bt"><b></b></s>
    复制代码

    今天再分享一款790轮播代码给大家,带缩略图,简单方便实用..


    <s class="skin-box-tp"><b></b></s>
    <div class="skin-box-bd clear-fix">
             <span>
            <div data-widget-config="{


























                &quot;contentCls&quot;: &quot;slide-kun137938725457content&quot;,


























                &quot;triggerCls&quot;: &quot;slide-kun137938725457triggers&quot;,


























                &quot;navCls&quot;: &quot;slide-kun137938725457triggers&quot;,


























                &quot;triggerType&quot;: &quot;mouse&quot;,


























                &quot;effect&quot;: &quot;scrollx&quot;,


























                &quot;steps&quot;: 1,


























                &quot;autoplay&quot;: true,


























                &quot;circular&quot;: true


























            }" data-widget-type="Carousel" class="J_TWidget" style="padding:0px;margin:0px;width:790px;">
                    <div style="height:317px;width:790px;overflow:hidden;padding:0px;margin:0px;position:relative;">
                            <ul class="slide-kun137938725457content" style="height:317px;width:999999px;padding:0px;margin:0px;left:-2370px;">
                                    <li style="width:790px;height:317px;display:block;padding:0px;margin:0px;list-style-type:none;float:left;" class="ks-switchable-panel-internal627">
                                            <div style="padding:0px;margin:0px;">
                                                     <a target="_blank" style="padding:0px;margin:0px;"  data-spm-wangpu-module-id="5003-3790267362" data-spm-anchor-id="a220o.1000855.w5003-3790267362.1"> <img width="790px" height="315px" border="0px" src="http://img04.taobaocdn.com/imgextra/i4/1902439175/TB2JAIobFXXXXXPXpXXXXXXXXXX_!!1902439175.jpg" /></a>
                                            </div>
                                            <div style="height:2px;font-size:2px;line-height:2px;float:left;width:196px;background-color:#0000FF;">
                                                    &nbsp;
                                            </div>
                                    </li>
                                    <li style="width:790px;height:317px;display:block;padding:0px;margin:0px;float:left;" class="ks-switchable-panel-internal627">
                                            <div style="padding:0px;margin:0px;">
                                                     <a target="_blank" style="padding:0px;margin:0px;" > <img width="790px" height="315px" border="0px" src="http://img01.taobaocdn.com/imgextra/i1/1902439175/TB2EXlCbFXXXXXgXpXXXXXXXXXX_!!1902439175.jpg" /></a>
                                            </div>
                                            <div style="height:2px;font-size:2px;line-height:2px;margin-left:198px;width:196px;background-color:#0000FF;">
                                                    &nbsp;
                                            </div>
                                    </li>
                                    <li style="width:790px;height:317px;display:block;padding:0px;margin:0px;list-style-type:none;float:left;" class="ks-switchable-panel-internal627">
                                            <div style="padding:0px;margin:0px;">
                                                     <a target="_blank" style="padding:0px;margin:0px;"  data-spm-wangpu-module-id="5003-3790267362" data-spm-anchor-id="a220o.1000855.w5003-3790267362.3"> <img width="790px" height="315px" border="0px" src="http://img03.taobaocdn.com/imgextra/i3/1902439175/TB2sNdvbFXXXXbnXpXXXXXXXXXX_!!1902439175.jpg" /></a>
                                            </div>
                                            <div style="height:2px;font-size:2px;line-height:2px;margin-left:396px;width:196px;background-color:#0000FF;">
                                                    &nbsp;
                                            </div>
                                    </li>
                                    <li style="width:790px;height:317px;display:block;padding:0px;margin:0px;list-style-type:none;float:left;" class="ks-switchable-panel-internal627">
                                            <div style="padding:0px;margin:0px;">
                                                     <a target="_blank" style="padding:0px;margin:0px;"  data-spm-wangpu-module-id="5003-3790267362" data-spm-anchor-id="a220o.1000855.w5003-3790267362.4"> <img width="790px" height="315px" border="0px" src="http://img04.taobaocdn.com/imgextra/i4/1902439175/TB2wyBZaXXXXXbbXpXXXXXXXXXX_!!1902439175.jpg" /></a>
                                            </div>
                                            <div style="height:2px;font-size:2px;line-height:2px;float:right;width:196px;background-color:#0000FF;">
                                                    &nbsp;
                                            </div>
                                    </li>
                            </ul>
                    </div>
                    <div style="height:74px;width:790px;overflow:hidden;padding:0px;margin:0px;">
                            <ul class="slide-kun137938725457triggers" style="padding:0px;margin:0px;width:790px;height:74px;">
                                    <li style="float:left;list-style-type:none;" class="ks-switchable-trigger-internal626">
                                             <img width="196px" height="74px" src="http://img04.taobaocdn.com/imgextra/i4/1902439175/TB21VZobFXXXXawXpXXXXXXXXXX_!!1902439175.jpg" />
                                    </li>
                                    <li style="float:left;margin-left:2px;list-style-type:none;" class="ks-switchable-trigger-internal626">
                                             <img width="196px" height="74px" src="http://img02.taobaocdn.com/imgextra/i2/1902439175/TB2owKDbFXXXXb8XpXXXXXXXXXX_!!1902439175.jpg" />
                                    </li>
                                    <li style="float:left;margin-left:2px;list-style-type:none;" class="ks-switchable-trigger-internal626">
                                             <img width="196px" height="74px" src="http://img01.taobaocdn.com/imgextra/i1/1902439175/TB2YBCHbFXXXXXtXXXXXXXXXXXX_!!1902439175.jpg" />
                                    </li>
                                    <li style="float:right;list-style-type:none;" class="ks-switchable-trigger-internal626 ks-active">
                                             <img width="196px" height="74px" src="http://img02.taobaocdn.com/imgextra/i2/1902439175/TB27uyHbFXXXXarXXXXXXXXXXXX_!!1902439175.jpg" />
                                    </li>
                            </ul>
                    </div>
            </div>
             </span>
    </div>
    <s class="skin-box-bt"><b></b></s>


    790轮播.png

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    委屈
    2016-8-4 14:49
  • 签到天数: 52 天

    连续签到: 1 天

    [LV.5]略有小成

    1

    主题

    17

    帖子

    8200

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    8200

    发表于 2015-3-12 16:30:29 | 显示全部楼层
    请问这个轮播可以放详情用吗

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情

    2015-10-20 15:41
  • 签到天数: 2 天

    连续签到: 1 天

    [LV.1]初学乍练

    3

    主题

    30

    帖子

    1326

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    1326

     楼主| 发表于 2015-3-16 09:39:05 | 显示全部楼层
    cjzmg 发表于 2015-3-12 16:30
    请问这个轮播可以放详情用吗

    没试过,详情顶部能用,你可试试

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

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

    本版积分规则

    小黑屋|Archiver|手机版|粤公网安备44060502000322号|淘宝美工论坛 ( 桂ICP备12007265号-8 )  

    GMT+8, 2016-12-9 10:02 , Processed in 0.125534 second(s), 15 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表