淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 562|回复: 6
收起左侧

[装修相关] 淘宝一个不错的轮播代码

[复制链接]
  • TA的每日心情
    臭美
    4 天前
  • 签到天数: 238 天

    连续签到: 2 天

    [LV.7]炉火纯青

    7

    主题

    150

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    43745

    最佳新人热心会员

    QQ
    发表于 2015-8-20 09:48:13 | 显示全部楼层 |阅读模式
    1. <div style="height:644px;">
    2. <div class="footer-more-trigger" style="width:1920px; height:644px; border:0; padding:0; top:auto; left:auto;">
    3. <div class="footer-more-trigger" style="width:1920px; height:644px; border:0; padding:0; top:0; left:-485px;">
    4. <!--Carousel start-->
    5. <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrollx','easing':'easeBothStrong','contentCls':'content_yuzhou_bg','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':true,'interval':8,'duration':1.2,'pauseOnHover':false,'circular':true}">
    6. <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrollx','easing':'easeBothStrong','contentCls':'content_yuzhou_01','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':true,'interval':8,'duration':1,'pauseOnHover':false,'circular':true}">
    7. <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrollx','easing':'easeBothStrong','contentCls':'content_yuzhou_02','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':true,'interval':8,'duration':1.5,'pauseOnHover':false,'circular':true}">
    8. <!--Carouse_bg-->
    9. <div style="width:1920px; height:644px; overflow:hidden;">
    10. <ul class="content_yuzhou_bg">
    11. <li style="width:1920px; height:644px; background:url(http://img01.taobaocdn.com/imgextra/i1/279450718/TB2eichcVXXXXcKXpXXXXXXXXXX_!!279450718.gif) repeat;">
    12. </li>
    13. <li style="width:1920px; height:644px; background:url(http://img02.taobaocdn.com/imgextra/i2/279450718/TB2Fy3ocVXXXXa9XpXXXXXXXXXX_!!279450718.gif) repeat;">
    14. </li>
    15. <li style="width:1920px; height:644px;background:url(http://img02.taobaocdn.com/imgextra/i2/279450718/TB2sXImcVXXXXbSXpXXXXXXXXXX_!!279450718.jpg) repeat;">
    16. </li>
    17. </ul>
    18. </div>
    19. <!--//Carousel_bg end-->
    20. <!--Carousel_01-->
    21. <div class="footer-more-trigger" style="width:1920px; height:644px; overflow:hidden; border:0; padding:0; top:0; left:0;">
    22. <div style="width:1920px; height:644px;">
    23. <ul class="content_yuzhou_01">
    24. <li style="width:1920px; height:644px;">
    25. <div style="width:485px; height:644px; float:left;">
    26. </div>
    27. <div style="width:1000px; height:644px; float:left;">
    28. <img src="http://img02.taobaocdn.com/imgextra/i2/279450718/TB2Uh.lcVXXXXb5XpXXXXXXXXXX_!!279450718.png" />
    29. </div>
    30. <div style="width:485px; height:644px; float:left;">
    31. </div>
    32. </li>
    33. <li style="width:1920px; height:644px;">
    34. <div style="width:485px; height:644px; float:left;">
    35. </div>
    36. <div style="width:1000px; height:644px; float:left;">
    37. <img src="http://img01.taobaocdn.com/imgextra/i1/279450718/TB2KjUDcVXXXXbEXXXXXXXXXXXX_!!279450718.png" />
    38. </div>
    39. <div style="width:485px; height:644px; float:left;">
    40. </div>
    41. </li>
    42. <li style="width:1920px; height:644px;">
    43. <div style="width:485px; height:644px; float:left;">
    44. </div>
    45. <div style="width:1000px; height:644px; float:left;">
    46. <img src="http://img03.taobaocdn.com/imgextra/i3/279450718/TB2b67zcVXXXXcyXXXXXXXXXXXX_!!279450718.png" />
    47. </div>
    48. <div style="width:485px; height:644px; float:left;">
    49. </div>
    50. </li>
    51. </ul>
    52. </div>
    53. </div>
    54. <!--//Carousel_01 end-->
    55. <!--Carousel_02-->
    56. <div class="footer-more-trigger" style="width:1920px; height:644px; overflow:hidden; border:0; padding:0; top:0; left:0;">
    57. <div style="width:1920px; height:644px;">
    58. <ul class="content_yuzhou_02">
    59. <li style="width:1920px; height:644px;">
    60. <div style="width:485px; height:644px; float:left;">
    61. </div>
    62. <div style="width:1000px; height:644px; float:left;">
    63. <img src="http://img01.taobaocdn.com/imgextra/i1/279450718/TB2XDZKcVXXXXagXXXXXXXXXXXX_!!279450718.png" />
    64. </div>
    65. <div style="width:485px; height:644px; float:left;">
    66. </div>
    67. </li>
    68. <li style="width:1920px; height:644px;">
    69. <div style="width:485px; height:644px; float:left;">
    70. </div>
    71. <div style="width:1000px; height:644px; float:left;">
    72. <img src="http://img03.taobaocdn.com/imgextra/i3/279450718/TB2zf7ocVXXXXaGXpXXXXXXXXXX_!!279450718.png" />
    73. </div>
    74. <div style="width:485px; height:644px; float:left;">
    75. </div>
    76. </li>
    77. <li style="width:1920px; height:644px;">
    78. <div style="width:485px; height:644px; float:left;">
    79. </div>
    80. <div style="width:1000px; height:644px; float:left;">
    81. <img src="http://img01.taobaocdn.com/imgextra/i1/279450718/TB2F_wKcVXXXXakXXXXXXXXXXXX_!!279450718.png" />
    82. </div>
    83. <div style="width:485px; height:644px; float:left;">
    84. </div>
    85. </li>
    86. </ul>
    87. </div>
    88. </div>
    89. <!--//Carousel_02 end-->
    90. <!--prev next button-->
    91. <div  class="prev footer-more-trigger" style="width:50px; height:130px; background:url(http://img04.taobaocdn.com/imgextra/i4/279450718/TB2fEswcVXXXXc2XXXXXXXXXXXX_!!279450718.png) 0 0; border:0; padding:0; top:257px; left:500px;">
    92. </div>
    93. <div  class="next footer-more-trigger" style="width:50px; height:130px; background:url(http://img04.taobaocdn.com/imgextra/i4/279450718/TB2fEswcVXXXXc2XXXXXXXXXXXX_!!279450718.png) -70px 0; border:0; padding:0; top:257px; left:auto; right:500px;">
    94. </div>
    95. <!--popup-->
    96. <div class="J_TWidget" data-widget-type="Popup" data-widget-config="{'trigger':'.prev','align':{'node':'.prev','points':['cc','cc'],'offset':[0,0]}}" style="display:none;">
    97.     <div  class="prev_yuzhou" style="width:50px; height:130px; background:url(http://img04.taobaocdn.com/imgextra/i4/279450718/TB2fEswcVXXXXc2XXXXXXXXXXXX_!!279450718.png) 0 -143px;">
    98. </div>
    99. </div>
    100. <div class="J_TWidget" data-widget-type="Popup" data-widget-config="{'trigger':'.next','align':{'node':'.next','points':['cc','cc'],'offset':[0,0]}}" style="display:none;">
    101.     <div  class="next_yuzhou" style="width:50px; height:130px; background:url(http://img04.taobaocdn.com/imgextra/i4/279450718/TB2fEswcVXXXXc2XXXXXXXXXXXX_!!279450718.png) -70px -143px;">
    102. </div>
    103. </div>
    104. <!--//popup end-->
    105. <!--//prev next button end-->
    106. </div>
    107. </div>
    108. </div>
    109. <!--//Carousel end-->
    110. </div>
    111. </div>
    112. </div>
    复制代码
    来自转载       这是效果图

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


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

  • TA的每日心情
    臭美
    2015-9-30 09:04
  • 签到天数: 224 天

    连续签到: 3 天

    [LV.7]炉火纯青

    5

    主题

    495

    帖子

    7万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    76999

    天猫美工最佳新人热心会员

    发表于 2015-8-20 09:52:19 | 显示全部楼层

    回帖奖励 +5

    好像不错,顶下楼主

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


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

  • TA的每日心情
    不爽
    2013-8-19 20:42
  • 签到天数: 8 天

    连续签到: 1 天

    [LV.3]武林新秀

    43

    主题

    2260

    帖子

    11万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    116895

    活跃会员热心会员

    发表于 2015-8-20 10:59:52 | 显示全部楼层
    屌丝哥原创
  • TA的每日心情
    加油
    前天 16:25
  • 签到天数: 348 天

    连续签到: 1 天

    [LV.8]自成一派

    29

    主题

    853

    帖子

    8万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    81727

    最佳新人热心会员

    发表于 2015-8-20 11:24:33 | 显示全部楼层
    每次我复制大师们的代码,弄到我这都是乱的……
    http://www.zcool.com.cn/u/13642473
  • TA的每日心情
    抱抱
    2016-10-14 17:55
  • 签到天数: 90 天

    连续签到: 1 天

    [LV.6]渐入佳境

    17

    主题

    585

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    23827

    发表于 2015-8-20 17:10:19 | 显示全部楼层
    早玩过了廷迟滚动,收一下我在本论坛发了天猫版 的

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


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

  • TA的每日心情

    2016-11-16 14:23
  • 签到天数: 438 天

    连续签到: 1 天

    [LV.9]已臻大成

    28

    主题

    2010

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    15421

    最佳新人热心会员活跃会员优秀版主

    发表于 2015-8-20 17:13:34 | 显示全部楼层
    啊呦,好像很不错哦。你好我是周杰伦

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


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

  • TA的每日心情
    臭美
    2016-8-29 09:18
  • 签到天数: 298 天

    连续签到: 1 天

    [LV.8]自成一派

    29

    主题

    939

    帖子

    6万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    61033

    天猫美工最佳新人热心会员

    QQ
    发表于 2015-8-21 09:37:16 | 显示全部楼层
    好久没来露脸了

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


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

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

    本版积分规则

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

    GMT+8, 2016-12-5 04:31 , Processed in 0.107002 second(s), 18 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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