淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 759|回复: 12
收起左侧

【渔舟】轮播嵌套制作

[复制链接]
  • TA的每日心情
    抱抱
    2016-12-1 09:10
  • 签到天数: 4 天

    连续签到: 1 天

    [LV.2]登堂入室

    64

    主题

    161

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    52318

    QQ
    发表于 2016-11-2 15:38:00 | 显示全部楼层 |阅读模式
    最近工作一直很忙,很久没有发帖了,给大家分享一个嵌套轮播的思路。
    废话不多说,先看图。
    01.gif

    GIF文件较大,请耐心等待图片加载,等不及的可以到店铺查看实际效果
    效果展示地址:http://yijohn.taobao.com/p/xgzs.htm

    原始效果来自六月设计,代码经过重新编写,可以直接使用!

    思路:
      1.三个轮播嵌套
      2.第一层为背景层,为渐变轮播
      3.第二层为文字层,为上下轮播
      4.第三层为图片层,为左右轮播
      5.三个轮播通过定位叠加到一起,并通过同一个上下翻页按钮触发(具体请查看下面的代码)
      注意:渐变轮播,系统会自动添加层级(z-index:9),所以后面的两个轮播以及上下翻页按钮必须加上大于或等于9的层级,才能正常显示。

    具体代码如下:
    1. <div style="width:750px; height:300px; position:relative;">
    2.   <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'fade','contentCls':'c1','navCls':'n1','hasTriggers':false,'prevBtnCls':'prev','nextBtnCls':'next'}">
    3.     <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','contentCls':'c2','navCls':'n1','hasTriggers':false,'prevBtnCls':'prev','nextBtnCls':'next','easing':'easeOutStrong'}">
    4.       <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrollx','contentCls':'c3','navCls':'n1','hasTriggers':false,'prevBtnCls':'prev','nextBtnCls':'next','easing':'easeOutStrong'}">
    5.         <!--01 背景渐变轮播-->
    6.         <div style="width:750px; height:300px; overflow:hidden;">
    7.           <ul class="c1">
    8.             <li style="width:750px; height:300px; background:url(http://img01.taobaocdn.com/imgextra/i1/39767794/TB2SEOlbXXXXXa7XpXXXXXXXXXX-39767794.png) center;"></li>
    9.             <li style="width:750px; height:300px; background:url(http://img02.taobaocdn.com/imgextra/i2/39767794/TB2YLelbXXXXXbpXpXXXXXXXXXX-39767794.jpg) center;"></li>
    10.             <li style="width:750px; height:300px; background:url(http://img04.taobaocdn.com/imgextra/i4/39767794/TB2M29vbXXXXXaYXXXXXXXXXXXX-39767794.jpg) center;"></li>
    11.             <li style="width:750px; height:300px; background:url(http://img02.taobaocdn.com/imgextra/i2/39767794/TB2XLuxbXXXXXXmXXXXXXXXXXXX-39767794.jpg) center;"></li>
    12.             <li style="width:750px; height:300px; background:url(http://img04.taobaocdn.com/imgextra/i4/39767794/TB2l55xbXXXXXXHXpXXXXXXXXXX-39767794.jpg) center;"></li>
    13.             <li style="width:750px; height:300px; background:url(http://img01.taobaocdn.com/imgextra/i1/39767794/TB2jzKsbXXXXXcvXXXXXXXXXXXX-39767794.jpg) center;"></li>
    14.             <li style="width:750px; height:300px; background:url(http://img03.taobaocdn.com/imgextra/i3/39767794/TB2N.qnbXXXXXX8XpXXXXXXXXXX-39767794.jpg) center;"></li>
    15.           </ul>
    16.         </div>
    17.         <!--01 背景渐变轮播 结束-->
    18.         <!--02 上下轮播-->
    19.         <div class="footer-more-trigger sn-simple-logo" style="width:750px; height:300px; overflow:hidden; border:0; padding:0; top:0; left:0; z-index:10;">
    20.           <ul class="c2">
    21.             <li style="width:750px; height:300px; background:url(http://img03.taobaocdn.com/imgextra/i3/39767794/TB2N59lbXXXXXa2XpXXXXXXXXXX-39767794.png) center;"></li>
    22.             <li style="width:750px; height:300px; background:url(http://img01.taobaocdn.com/imgextra/i1/39767794/TB2uC1sbXXXXXcnXXXXXXXXXXXX-39767794.png) center;"></li>
    23.             <li style="width:750px; height:300px; background:url(http://img02.taobaocdn.com/imgextra/i2/39767794/TB2gNKxbXXXXXXfXXXXXXXXXXXX-39767794.png) center;"></li>
    24.             <li style="width:750px; height:300px; background:url(http://img02.taobaocdn.com/imgextra/i2/39767794/TB2Tu1xbXXXXXXkXXXXXXXXXXXX-39767794.png) center;"></li>
    25.             <li style="width:750px; height:300px; background:url(http://img01.taobaocdn.com/imgextra/i1/39767794/TB2KOOxbXXXXXbMXXXXXXXXXXXX-39767794.png) center;"></li>
    26.             <li style="width:750px; height:300px; background:url(http://img02.taobaocdn.com/imgextra/i2/39767794/TB2gTClbXXXXXazXpXXXXXXXXXX-39767794.png) center;"></li>
    27.             <li style="width:750px; height:300px; background:url(http://img04.taobaocdn.com/imgextra/i4/39767794/TB2VAiubXXXXXbgXXXXXXXXXXXX-39767794.png) center;"></li>
    28.           </ul>
    29.         </div>
    30.         <!--01 上下轮播 结束-->
    31.         <!--03 左右轮播-->
    32.         <div class="footer-more-trigger sn-simple-logo" style="width:750px; height:300px; overflow:hidden; border:0; padding:0; top:0; left:0; z-index:11;">
    33.           <ul class="c3">
    34.             <li style="width:750px; height:300px; background:url(http://img02.taobaocdn.com/imgextra/i2/39767794/TB2KceobXXXXXaeXpXXXXXXXXXX-39767794.png) center;"></li>
    35.             <li style="width:750px; height:300px; background:url(http://img02.taobaocdn.com/imgextra/i2/39767794/TB20QiobXXXXXXuXpXXXXXXXXXX-39767794.png) center;"></li>
    36.             <li style="width:750px; height:300px; background:url(http://img04.taobaocdn.com/imgextra/i4/39767794/TB2rrKtbXXXXXb9XXXXXXXXXXXX-39767794.png) center;"></li>
    37.             <li style="width:750px; height:300px; background:url(http://img01.taobaocdn.com/imgextra/i1/39767794/TB2vDqsbXXXXXctXXXXXXXXXXXX-39767794.png) center;"></li>
    38.             <li style="width:750px; height:300px; background:url(http://img01.taobaocdn.com/imgextra/i1/39767794/TB2CoSwbXXXXXXzXXXXXXXXXXXX-39767794.png) center;"></li>
    39.             <li style="width:750px; height:300px; background:url(http://img04.taobaocdn.com/imgextra/i4/39767794/TB2hXanbXXXXXakXpXXXXXXXXXX-39767794.png) center;"></li>
    40.             <li style="width:750px; height:300px; background:url(http://img04.taobaocdn.com/imgextra/i4/39767794/TB2M2axbXXXXXXpXXXXXXXXXXXX-39767794.png) center;"></li>
    41.           </ul>
    42.         </div>
    43.         <!--01 左右轮播 结束-->
    44.         
    45.         <!--上下翻页-->
    46.         <div class="prev footer-more-trigger sn-simple-logo" style="width:41px; height:69px; background:url(http://img02.taobaocdn.com/imgextra/i2/39767794/TB2TMtPbXXXXXcdXXXXXXXXXXXX-39767794.png); cursor:pointer; border:0; padding:0; top:115px; left:0; z-index:13;"></div>
    47.         <div class="next footer-more-trigger sn-simple-logo" style="width:41px; height:69px; background:url(http://img01.taobaocdn.com/imgextra/i1/39767794/TB2RIxNbXXXXXc_XXXXXXXXXXXX-39767794.png); cursor:pointer; border:0; padding:0; top:115px; left:auto; right:0; z-index:13;"></div>
    48.         <!--上下翻页 结束-->
    49.       </div>
    50.     </div>
    51.   </div>
    52. </div>
    复制代码


    做这个效果需要掌握两个知识点:一个是定位,另一个是轮播嵌套。 加油!!!

    评分

    参与人数 2美工币 +24 收起 理由
    冷雨夜 + 20 赞一个!
    缘恩 + 4 很给力!

    查看全部评分

    本帖被以下淘专辑推荐:

  • TA的每日心情
    心跳
    昨天 09:29
  • 签到天数: 146 天

    连续签到: 1 天

    [LV.7]炉火纯青

    3

    主题

    131

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    18204

    最佳新人热心会员

    发表于 2016-11-2 16:04:52 | 显示全部楼层
    6666,学习了

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


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

  • TA的每日心情
    大哭
    昨天 03:44
  • 签到天数: 241 天

    连续签到: 8 天

    [LV.8]自成一派

    19

    主题

    563

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    56869

    发表于 2016-11-2 16:24:28 | 显示全部楼层
    好赞~~  

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


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

  • TA的每日心情
    加油
    昨天 09:42
  • 签到天数: 455 天

    连续签到: 4 天

    [LV.9]已臻大成

    10

    主题

    290

    帖子

    8万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    85475

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

    发表于 2016-11-2 16:45:23 | 显示全部楼层
    屌屌哒

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


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

  • TA的每日心情
    大哭
    前天 16:41
  • 签到天数: 652 天

    连续签到: 1 天

    [LV.9]已臻大成

    37

    主题

    2231

    帖子

    13万

    积分

    高级会员

    阅读权限: 50

    【单身狗认证】

    Rank: 8Rank: 8

    积分
    138386

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

    QQ
    发表于 2016-11-2 18:52:47 | 显示全部楼层
    这还用说什么?必须精品贴了!
  • TA的每日心情
    加油
    2016-10-27 15:47
  • 签到天数: 20 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    18

    主题

    710

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    56733

    发表于 2016-11-2 19:03:06 | 显示全部楼层
    前排已满,先顶不迟
    胆小勿点!★大神群308158281
  • TA的每日心情
    思考
    2016-11-9 13:50
  • 签到天数: 101 天

    连续签到: 1 天

    [LV.6]渐入佳境

    2

    主题

    25

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    16010

    发表于 2016-11-2 21:27:35 | 显示全部楼层
    好久没看到你发帖了

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


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

  • TA的每日心情

    2016-11-28 10:08
  • 签到天数: 12 天

    连续签到: 1 天

    [LV.3]武林新秀

    2

    主题

    55

    帖子

    2586

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    2586

    发表于 2016-11-3 09:58:12 | 显示全部楼层
    这个得收藏了
    我怎么知道
  • TA的每日心情
    臭美
    昨天 12:32
  • 签到天数: 222 天

    连续签到: 72 天

    [LV.7]炉火纯青

    2

    主题

    205

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    47708

    最佳新人热心会员

    QQ
    发表于 2016-11-3 12:20:37 | 显示全部楼层
    大笑*都爆了!!!!!!
    欢迎
    光临
    小店:缘恩网络服务
    还是别点了~
    其实只是卖350装修模版的~[/col
  • TA的每日心情
    臭美
    前天 08:47
  • 签到天数: 48 天

    连续签到: 4 天

    [LV.5]略有小成

    3

    主题

    61

    帖子

    9262

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    9262

    发表于 2016-11-3 14:04:35 | 显示全部楼层

    6666,学习了

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


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

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

    本版积分规则

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

    GMT+8, 2016-12-9 02:19 , Processed in 0.130973 second(s), 29 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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