淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2239|回复: 11
收起左侧

【自家制】仿喵鲜生1190轮播

[复制链接]
  • TA的每日心情
    臭美
    2016-8-31 13:49
  • 签到天数: 274 天

    连续签到: 1 天

    [LV.8]自成一派

    23

    主题

    393

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    32053

    发表于 2015-7-14 13:36:23 | 显示全部楼层 |阅读模式
    本帖最后由 我是小小煒 于 2015-7-14 17:18 编辑

    未标题-3.jpg
    参考效果:http://zzcase.tmall.com/p/rd880258.htm
    1. <!--1920轮播图-->
    2. <!--主框架-->
    3. <div class="J_TWidget"  data-widget-type="Tabs"  data-widget-config="{'effect': 'fade','autoplay': true, 'circular': true,'easing':'easeBoth','navCls':'li_nav','contentCls':'li_cls',}" style="height:275px; overflow:hidden;">
    4.   <div class="li_cls" style="width:1920px;height:380px;">
    5.   <!--轮播内容-->
    6.    <div class="sn-simple-logo" style="padding:0px;left:50%;">
    7.         <div class="sn-simple-logo" style="padding:0px;left:-960px;top:-105px;">
    8.      <div class="J_TWidget"  data-widget-type="Carousel"  data-widget-config="{'effect': 'scrollx','easing': 'easeOutStrong','viewSize': [1920],'circular': true,'duration':'0.8','autoplay':true,'navCls':'lww_nav','contentCls':'lww_cls'}">
    9.      <!--轮播单项内容-->
    10.   <ul class="lww_cls" style="margin:0px;padding:0px;width:1920px;height:380px; overflow:hidden">
    11.    <!--①-->
    12.    <li style="margin:0px;padding:0px;width:1920px;height:380px;">
    13.     <div style="width:1190px; height:380px; margin-left:365px; float:left">
    14.     <a href="#" target="_blank"><img data-pinit="registered" src="https://img.alicdn.com/imgextra/i1/2138614954/TB2XNBgdVXXXXcKXXXXXXXXXXXX_!!2138614954.jpg"></a>
    15.     </div>
    16.    </li>
    17.    <!--②-->
    18.    <li style="margin:0px;padding:0px;width:1920px;height:380px;">
    19.     <div style="width:1190px; height:380px; margin-left:365px; float:left">
    20.     <a href="#" target="_blank"><img data-pinit="registered" src="https://img.alicdn.com/imgextra/i1/2138614954/TB2JEJkdVXXXXbAXXXXXXXXXXXX_!!2138614954.jpg"></a>
    21.     </div>
    22.    </li>
    23.    <!--③-->
    24.    <li style="margin:0px;padding:0px;width:1920px;height:380px;">
    25.     <div style="width:1190px; height:380px; margin-left:365px; float:left">
    26.     <a href="#" target="_blank"><img data-pinit="registered" src="https://img.alicdn.com/imgextra/i3/2138614954/TB2B5dvdVXXXXXfXXXXXXXXXXXX_!!2138614954.jpg"></a>
    27.     </div>
    28.    </li>
    29.   </ul>
    30.   <!--/轮播单项内容-->
    31.   <!--选项内容框架-->
    32.        <div class="sn-simple-logo" style="padding:0px;border:none;border:0px;left:50%;">
    33.                 <div class="sn-simple-logo" style="width:700px;height:45px;padding:0px;border:none;border:0px;left:900px;top:345px;">
    34.          <ul class="lww_nav" style="width:600px;float:left;height:45px;margin-left:10px;text-align:center;border:none;border:0px;">
    35.           <li style="display:inline;list-style: none;width: 24px;height: 24px;line-height: 25px;text-align: center;border-radius: 12px;background: 0 0;display: inline-block;zoom: 1;margin: 0 1px;background: #06F;color: #FFF;">
    36.                         1
    37.                   </li>
    38.           <li style="display:inline;list-style: none;width: 24px;height: 24px;line-height: 25px;text-align: center;border-radius: 12px;background: 0 0;display: inline-block;zoom: 1;margin: 0 1px;background: #06F;color: #FFF;">
    39.                         2
    40.                   </li>
    41.           <li style="display:inline;list-style: none;width: 24px;height: 24px;line-height: 25px;text-align: center;border-radius: 12px;background: 0 0;display: inline-block;zoom: 1;margin: 0 1px;background: #06F;color: #FFF;">
    42.                         3
    43.                   </li>
    44.          </ul>
    45.         </div>
    46.        </div>
    47.        <!--/选项内容框架-->
    48.        <!--倒计时内容调用-->
    49.      <div class="sn-simple-logo" style="width:300px;height:378px;background:#FFF;left:1300px;border:1px #999 solid;">
    50.       <div style="width:270px; height:70px; font-family:微软雅黑; font-size:22px; color:#000;margin:10px 0 0 5px; line-height:26px;">
    51.       下期预告
    52.       <div style="font-size:18px; color:#999; margin-top:10px;">离开场仅剩:</div>
    53.       <!--倒计时内容调用-->
    54.       <div style="width:300px; height:45px; margin-top:10px;">
    55.         <div class="J_TWidget" data-widget-type="Countdown"  data-widget-config="{'endTime': '2015-12-31 23:59:59','interval': 1000,'timeRunCls': '.ks-countdown-run','timeUnitCls':{'d': '.ks-d', 'h':'.ks-h', 'm': '.ks-m', 's': '.ks-s', 'i': '.ks-i'},'minDigit': 1,'timeEndCls': '.ks-countdown-end'}">
    56.       <div class="ks-countdown-run">
    57.       <div style=" width:75px; height:25px; float:left; text-align:center; background:#000; color:#FFF; border-radius:20px; margin-right:10px;">
    58.       <span class="ks-d">00</span>天
    59.       </div>
    60.       
    61.       <div style=" width:60px; height:25px; float:left; text-align:center; background:#000; color:#FFF; border-radius:20px; margin-right:10px;">
    62.       <span class="ks-h">00</span>时
    63.       </div>
    64.       
    65.       <div style=" width:60px; height:25px; float:left; text-align:center; background:#000; color:#FFF; border-radius:20px; margin-right:10px;">
    66.       <span class="ks-m">00</span>分
    67.       </div>
    68.       
    69.       <div style=" width:60px; height:25px; float:left; text-align:center; background:#000; color:#FFF; border-radius:20px; margin-right:10px;">
    70.       <span class="ks-s">00</span>秒
    71.       </div>
    72.       
    73.       </div>
    74.      </div>
    75.       </div>
    76.       <!--/倒计时内容调用-->
    77.       <img src="https://img.alicdn.com/imgextra/i3/2138614954/TB2JdE4dFXXXXcGXpXXXXXXXXXX_!!2138614954.png" style=" width:300px;margin:100px auto">
    78.       </div>
    79.      </div>
    80.      <!--/倒计时内容调用-->
    81.      </div>
    82.      </div>
    83.     </div>
    84.    <!--轮播内容-->
    85.   </div>
    86. </div>
    87. <ul class="li_nav" style="display:none;">
    88. <!--主框架-->
    89. <!--1920轮播图-->
    复制代码



    评分

    参与人数 1美工币 +1 收起 理由
    snrtmnmnyk + 1 感谢分享!

    查看全部评分

    小煒小站 http://www.lliwenwei.net/ 打打小广告
  • TA的每日心情
    臭美
    2016-5-14 09:27
  • 签到天数: 48 天

    连续签到: 1 天

    [LV.5]略有小成

    6

    主题

    692

    帖子

    9246

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    9246

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

    QQ
    发表于 2015-7-14 13:43:20 | 显示全部楼层
    路过                        
    在一片苍茫的马勒戈壁上,生活着一群快乐滴草泥马。
  • TA的每日心情
    思考
    2016-9-11 15:54
  • 签到天数: 206 天

    连续签到: 1 天

    [LV.7]炉火纯青

    24

    主题

    1028

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    32979

    淘宝钻级店美工最佳新人热心会员

    QQ
    发表于 2015-7-14 14:46:48 | 显示全部楼层
    然而这并没有什么卵用

    即使睁开眼睛也看不见,我的心在黑暗中——林疋火昱
  • TA的每日心情
    抱抱
    2015-8-18 14:45
  • 签到天数: 27 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    0

    主题

    25

    帖子

    8084

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    8084

    发表于 2015-7-14 15:23:29 | 显示全部楼层
    哈哈哈  回复下 看看是啥子

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


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

  • TA的每日心情

    2016-5-3 13:49
  • 签到天数: 112 天

    连续签到: 1 天

    [LV.6]渐入佳境

    1

    主题

    11

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    16011

    发表于 2015-7-14 15:39:09 | 显示全部楼层



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


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

  • TA的每日心情
    大哭
    2016-9-21 16:21
  • 签到天数: 128 天

    连续签到: 1 天

    [LV.7]炉火纯青

    4

    主题

    587

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    27829

    最佳新人热心会员

    发表于 2015-7-14 15:44:34 | 显示全部楼层
    Miss飘黑,如果您要查看本帖隐藏内容请回复
    最尼玛讨厌这回复查看内容
    人面桃花里,浅笑如酒……
  • TA的每日心情
    大哭
    2015-12-9 08:52
  • 签到天数: 183 天

    连续签到: 2 天

    [LV.7]炉火纯青

    4

    主题

    254

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    22528

    发表于 2015-7-15 17:05:51 | 显示全部楼层
    然并卵

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


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

  • TA的每日心情

    2015-9-10 21:36
  • 签到天数: 10 天

    连续签到: 1 天

    [LV.3]武林新秀

    1

    主题

    58

    帖子

    2460

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    2460

    发表于 2015-7-17 09:55:57 | 显示全部楼层
    学习一下

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


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

    该用户从未签到

    0

    主题

    4

    帖子

    1754

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    1754

    发表于 2015-7-17 19:12:55 | 显示全部楼层
    水果是五彩的 但是海报上的字却不是五彩 缺乏烘托

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


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

  • TA的每日心情
    不爽
    2016-5-27 11:51
  • 签到天数: 122 天

    连续签到: 1 天

    [LV.7]炉火纯青

    32

    主题

    719

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    13420

    最佳新人热心会员

    QQ
    发表于 2015-7-31 10:56:42 | 显示全部楼层
    淘宝美工论坛Taobaoux.com,全国最大的淘宝美工人才基地

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


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

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

    本版积分规则

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

    GMT+8, 2016-12-9 02:18 , Processed in 0.153254 second(s), 25 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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