淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2856|回复: 15
收起左侧

仿的一款全屏轮播

[复制链接]
  • TA的每日心情
    大哭
    昨天 08:47
  • 签到天数: 963 天

    连续签到: 5 天

    [LV.10]功行圆满

    16

    主题

    1120

    帖子

    22万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    221901

    最佳新人热心会员宣传达人

    发表于 2015-7-25 22:22:46 | 显示全部楼层 |阅读模式
    本帖最后由 异地大光码 于 2015-7-25 22:22 编辑

    仿的一款轮播,天猫的,淘宝的没有测试,不居中可以更改全屏数据,可放首页,更改尺寸数据后也可放在详情页,很久之前仿的,现已不做淘宝了,也会有事没事上来看看。
    1. <div class="J_TWidget" data-widget-config="{"effect": "fade","circular": true ,"contentCls":"easyfullscreen-maxw1","navCls":"nav","prevBtnCls":"prev","nextBtnCls":"next","autoplay":"false"}" data-widget-type="Tabs" style="width:990px;height:600px;">
    2.   <div class="easyfullscreen-maxw1">
    3.     <div class="pa2" style="height:600px;width:990px;">
    4.       <div class="sn-simple-logo" style="width:1920px;height:600px;padding:0px;border:none;display:block;top:0px;left:-465px;z-index:10;">
    5.         <div style="width:1920px;height:600px;display:block;top:0px;left:0px;z-index:10;position:relative;">
    6.           <div class="J_TWidget" data-widget-config="{"contentCls": "veryniceslide-maxsco1","navCls": "veryniceslide-sbtn1","effect": "fade","steps": 1,"autoplay": true,"easing": "easeNone","prevBtnCls":"prev","nextBtnCls":"next","circular": true }" data-widget-type="Carousel" style="width:1920px;height:600px;">
    7.             <ul class="veryniceslide-maxsco1" style="display:block;top:0;left:0;z-index:5;">
    8.               <li style="width:1920px;height:600px;float:left;">
    9.                 <table width="1920" height="600" border="0" cellpadding="0" cellspacing="0">
    10.                   <tbody>
    11.                     <tr>
    12.                       <td>
    13.                          <a href="#" target="_blank"><img src="http://img.alicdn.com/imgextra/i2/752066185/TB2lusGcXXXXXXyXpXXXXXXXXXX_!!752066185.jpg" alt="" width="528" height="600" border="0" /></a>
    14.                       </td>
    15.                       <td>
    16.                          <a href="#" target="_blank"><img src="http://img.alicdn.com/imgextra/i1/752066185/TB2ndMGcXXXXXXQXpXXXXXXXXXX_!!752066185.jpg" alt="" width="783" height="600" border="0" /></a>
    17.                       </td>
    18.                       <td>
    19.                          <a href="#" target="_blank"><img src="http://img.alicdn.com/imgextra/i1/752066185/TB2TsoIcXXXXXcQXXXXXXXXXXXX_!!752066185.jpg" alt="" width="609" height="600" border="0" /></a>
    20.                       </td>
    21.                     </tr>
    22.                   </tbody>
    23.                 </table>
    24.               </li>
    25.               <li style="width:1920px;height:600px;float:left;">
    26.                  <a href="#" target="_blank" style="width:1920px;height:600px;display:block;" data-spm-wangpu-module-id="5003-9340663676" data-spm-anchor-id="a1z10.1.w5003-9340663676.6"> <img src="http://img.alicdn.com/imgextra/i4/752066185/TB250Y2bVXXXXXcXpXXXXXXXXXX_!!752066185.jpg" alt=" 海报" /></a>
    27.               </li>
    28.               <li style="width:1920px;height:600px;float:left;">
    29.                 <table width="1920" height="600" border="0" cellpadding="0" cellspacing="0">
    30.                   <tbody>
    31.                     <tr>
    32.                       <td>
    33.                          <a href="#" target="_blank"><img src="http://img.alicdn.com/imgextra/i4/752066185/TB2umjDbFXXXXcGXpXXXXXXXXXX_!!752066185.jpg" alt="" width="549" height="600" border="0" /></a>
    34.                       </td>
    35.                       <td>
    36.                          <a href="#" target="_blank"><img src="http://img.alicdn.com/imgextra/i4/752066185/TB2lqnGbFXXXXbDXpXXXXXXXXXX_!!752066185.jpg" alt="" width="816" height="600" border="0" /></a>
    37.                       </td>
    38.                       <td>
    39.                          <a href="#" target="_blank"><img src="http://img.alicdn.com/imgextra/i1/752066185/TB2e1_KbFXXXXcKXXXXXXXXXXXX_!!752066185.jpg" alt="" width="555" height="600" border="0" /></a>
    40.                       </td>
    41.                     </tr>
    42.                   </tbody>
    43.                 </table>
    44.               </li>
    45.               <li style="width:1920px;height:600px;float:left;">
    46.                 <table width="1920" height="600" border="0" cellpadding="0" cellspacing="0">
    47.                   <tbody>
    48.                     <tr>
    49.                       <td>
    50.                          <a href="#" target="_blank"><img src="http://img.alicdn.com/imgextra/i2/752066185/TB2lusGcXXXXXXyXpXXXXXXXXXX_!!752066185.jpg" alt="" width="528" height="600" border="0" /></a>
    51.                       </td>
    52.                       <td>
    53.                          <a href="#" target="_blank"><img src="http://img.alicdn.com/imgextra/i1/752066185/TB2ndMGcXXXXXXQXpXXXXXXXXXX_!!752066185.jpg" alt="" width="783" height="600" border="0" /></a>
    54.                       </td>
    55.                       <td>
    56.                          <a href="#" target="_blank"><img src="http://img.alicdn.com/imgextra/i1/752066185/TB2TsoIcXXXXXcQXXXXXXXXXXXX_!!752066185.jpg" alt="" width="609" height="600" border="0" /></a>
    57.                       </td>
    58.                     </tr>
    59.                   </tbody>
    60.                 </table>
    61.               </li>
    62.             </ul>
    63.             <div class="J_TWidget sn-simple-logo" data-widget-config="{"contentCls": "veryniceslide-maxsco2","navCls": "veryniceslide-sbtn1","effect": "none","steps": 1,"autoplay": true,"easing": "easeNone","prevBtnCls":"prev","nextBtnCls":"next","circular": true }" data-widget-type="Carousel" style="width:1920px;height:30px;z-index:10;left:0px;top:570px;padding:0px;border:none;background:rgba(0,0,0,0.2);">
    64.               <div style="width:144px;height:30px;position:relative;margin:0 auto;overflow:hidden;">
    65.                 <ul class="veryniceslide-maxsco2 sn-simple-logo" style="width:144px;overflow:hidden;z-index:20;">
    66.                   <li>
    67.                     <p style="cursor:pointer;float:left;height:30px;margin:0 3px;overflow:hidden;padding:0;width:30px;text-align:center;font-family:arial;background:url(http://img.alicdn.com/imgextra/i2/752066185/TB2R8MCcXXXXXbaXpXXXXXXXXXX_!!752066185.png) no-repeat;"> </p>
    68.                     <p style="cursor:pointer;float:left;height:30px;margin:0 3px;overflow:hidden;padding:0;width:30px;text-align:center;font-family:arial;background:url(http://img.alicdn.com/imgextra/i4/752066185/TB291gLcXXXXXaFXXXXXXXXXXXX_!!752066185.png) no-repeat;"> </p>
    69.                     <p style="cursor:pointer;float:left;height:30px;margin:0 3px;overflow:hidden;padding:0;width:30px;text-align:center;font-family:arial;background:url(http://img.alicdn.com/imgextra/i4/752066185/TB291gLcXXXXXaFXXXXXXXXXXXX_!!752066185.png) no-repeat;"> </p>
    70.                     <p style="cursor:pointer;float:left;height:30px;margin:0 3px;overflow:hidden;padding:0;width:30px;text-align:center;font-family:arial;background:url(http://img.alicdn.com/imgextra/i4/752066185/TB291gLcXXXXXaFXXXXXXXXXXXX_!!752066185.png) no-repeat;"> </p>
    71.                   </li>
    72.                   <li>
    73.                     <p style="cursor:pointer;float:left;height:30px;margin:0 3px;overflow:hidden;padding:0;width:30px;text-align:center;font-family:arial;background:url(http://img.alicdn.com/imgextra/i4/752066185/TB291gLcXXXXXaFXXXXXXXXXXXX_!!752066185.png) no-repeat;"> </p>
    74.                     <p style="cursor:pointer;float:left;height:30px;margin:0 3px;overflow:hidden;padding:0;width:30px;text-align:center;font-family:arial;background:url(http://img.alicdn.com/imgextra/i2/752066185/TB2R8MCcXXXXXbaXpXXXXXXXXXX_!!752066185.png) no-repeat;"> </p>
    75.                     <p style="cursor:pointer;float:left;height:30px;margin:0 3px;overflow:hidden;padding:0;width:30px;text-align:center;font-family:arial;background:url(http://img.alicdn.com/imgextra/i4/752066185/TB291gLcXXXXXaFXXXXXXXXXXXX_!!752066185.png) no-repeat;"> </p>
    76.                     <p style="cursor:pointer;float:left;height:30px;margin:0 3px;overflow:hidden;padding:0;width:30px;text-align:center;font-family:arial;background:url(http://img.alicdn.com/imgextra/i4/752066185/TB291gLcXXXXXaFXXXXXXXXXXXX_!!752066185.png) no-repeat;"> </p>
    77.                   </li>
    78.                   <li>
    79.                     <p style="cursor:pointer;float:left;height:30px;margin:0 3px;overflow:hidden;padding:0;width:30px;text-align:center;font-family:arial;background:url(http://img.alicdn.com/imgextra/i4/752066185/TB291gLcXXXXXaFXXXXXXXXXXXX_!!752066185.png) no-repeat;"> </p>
    80.                     <p style="cursor:pointer;float:left;height:30px;margin:0 3px;overflow:hidden;padding:0;width:30px;text-align:center;font-family:arial;background:url(http://img.alicdn.com/imgextra/i4/752066185/TB291gLcXXXXXaFXXXXXXXXXXXX_!!752066185.png) no-repeat;"> </p>
    81.                     <p style="cursor:pointer;float:left;height:30px;margin:0 3px;overflow:hidden;padding:0;width:30px;text-align:center;font-family:arial;background:url(http://img.alicdn.com/imgextra/i2/752066185/TB2R8MCcXXXXXbaXpXXXXXXXXXX_!!752066185.png) no-repeat;"> </p>
    82.                     <p style="cursor:pointer;float:left;height:30px;margin:0 3px;overflow:hidden;padding:0;width:30px;text-align:center;font-family:arial;background:url(http://img.alicdn.com/imgextra/i4/752066185/TB291gLcXXXXXaFXXXXXXXXXXXX_!!752066185.png) no-repeat;"> </p>
    83.                   </li>
    84.                   <li>
    85.                     <p style="cursor:pointer;float:left;height:30px;margin:0 3px;overflow:hidden;padding:0;width:30px;text-align:center;font-family:arial;background:url(http://img.alicdn.com/imgextra/i4/752066185/TB291gLcXXXXXaFXXXXXXXXXXXX_!!752066185.png) no-repeat;"> </p>
    86.                     <p style="cursor:pointer;float:left;height:30px;margin:0 3px;overflow:hidden;padding:0;width:30px;text-align:center;font-family:arial;background:url(http://img.alicdn.com/imgextra/i4/752066185/TB291gLcXXXXXaFXXXXXXXXXXXX_!!752066185.png) no-repeat;"> </p>
    87.                     <p style="cursor:pointer;float:left;height:30px;margin:0 3px;overflow:hidden;padding:0;width:30px;text-align:center;font-family:arial;background:url(http://img.alicdn.com/imgextra/i4/752066185/TB291gLcXXXXXaFXXXXXXXXXXXX_!!752066185.png) no-repeat;"> </p>
    88.                     <p style="cursor:pointer;float:left;height:30px;margin:0 3px;overflow:hidden;padding:0;width:30px;text-align:center;font-family:arial;background:url(http://img.alicdn.com/imgextra/i2/752066185/TB2R8MCcXXXXXbaXpXXXXXXXXXX_!!752066185.png) no-repeat;"> </p>
    89.                   </li>
    90.                 </ul>
    91.                 <ul class="veryniceslide-sbtn1 sn-simple-logo" style="width:144px;overflow:hidden;z-index:30;">
    92.                   <li style="display:inline;cursor:pointer;float:left;height:30px;margin:0 3px;overflow:hidden;padding:0;width:30px;text-align:center;font-family:arial;">
    93.                      
    94.                   </li>
    95.                   <li style="display:inline;cursor:pointer;float:left;height:30px;margin:0 3px;overflow:hidden;padding:0;width:30px;text-align:center;font-family:arial;">
    96.                      
    97.                   </li>
    98.                   <li style="display:inline;cursor:pointer;float:left;height:30px;margin:0 3px;overflow:hidden;padding:0;width:30px;text-align:center;font-family:arial;">
    99.                      
    100.                   </li>
    101.                   <li style="display:inline;cursor:pointer;float:left;height:30px;margin:0 3px;overflow:hidden;padding:0;width:30px;text-align:center;font-family:arial;">
    102.                      
    103.                   </li>
    104.                 </ul>
    105.               </div>
    106.             </div>
    107.           </div>
    108.         </div>
    109.       </div>
    110.     </div>
    111.   </div>
    112. </div>
    复制代码











    QQ截图20150725220722.png

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


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

  • TA的每日心情
    不爽
    2016-11-24 21:34
  • 签到天数: 153 天

    连续签到: 1 天

    [LV.7]炉火纯青

    3

    主题

    100

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    31612

    最佳新人宣传达人热心会员

    QQ
    发表于 2015-7-26 00:20:31 | 显示全部楼层
    感谢楼主分享精品代码!
    来自安卓客户端来自安卓客户端

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


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

  • TA的每日心情
    心跳
    2015-7-25 19:45
  • 签到天数: 71 天

    连续签到: 1 天

    [LV.6]渐入佳境

    1

    主题

    402

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    14677

    最佳新人热心会员

    发表于 2015-7-26 01:01:57 | 显示全部楼层

    回帖奖励 +4

    测试一下c店
    淘宝装修 就上淘宝美工http://www.taobaoux.com/?action=show&id=287
  • TA的每日心情
    抱抱
    昨天 08:30
  • 签到天数: 679 天

    连续签到: 6 天

    [LV.9]已臻大成

    26

    主题

    2631

    帖子

    18万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    185843

    最佳新人热心会员活跃会员灌水之王

    QQ
    发表于 2015-7-26 09:11:06 | 显示全部楼层
    我去积分13万的怎么升的啊
    QQ交流群  107102001
  • TA的每日心情
    委屈
    2016-1-2 15:21
  • 签到天数: 222 天

    连续签到: 1 天

    [LV.7]炉火纯青

    41

    主题

    1121

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    41680

    天猫美工淘宝皇冠店美工最佳新人热心会员活跃会员优秀版主

    QQ
    发表于 2015-7-26 19:24:59 | 显示全部楼层
    飘羽 发表于 2015-7-26 09:11
    我去积分13万的怎么升的啊

    我也想知道。。。领红包么?

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


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

  • TA的每日心情
    吐舌头
    2016-11-24 14:05
  • 签到天数: 165 天

    连续签到: 1 天

    [LV.7]炉火纯青

    23

    主题

    757

    帖子

    8万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    81124

    最佳新人热心会员活跃会员

    发表于 2015-7-27 09:19:22 | 显示全部楼层
    又一大神不做淘宝了。。。
  • TA的每日心情
    大哭
    2016-11-2 11:09
  • 签到天数: 277 天

    连续签到: 1 天

    [LV.8]自成一派

    2

    主题

    660

    帖子

    6万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    64555

    最佳新人热心会员宣传达人

    发表于 2015-7-27 09:20:29 | 显示全部楼层
    淘宝美工论坛Taobaoux.com,全国最大的淘宝美工人才基地

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


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

  • TA的每日心情
    臭美
    2016-8-31 13:49
  • 签到天数: 274 天

    连续签到: 1 天

    [LV.8]自成一派

    23

    主题

    393

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    32053

    发表于 2015-7-27 11:21:47 | 显示全部楼层
    感谢楼主的分享~
    小煒小站 http://www.lliwenwei.net/ 打打小广告
  • TA的每日心情
    无奈
    前天 10:58
  • 签到天数: 439 天

    连续签到: 1 天

    [LV.9]已臻大成

    28

    主题

    2010

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    14229

    最佳新人热心会员活跃会员优秀版主灌水之王

    发表于 2015-7-27 11:39:24 | 显示全部楼层
    其实我想看看轮播效果

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


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

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

    本版积分规则

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

    GMT+8, 2016-12-10 05:24 , Processed in 0.135807 second(s), 23 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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