淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 869|回复: 19
收起左侧

[装修相关] 又要麻烦大家了 还是轮播的问题

[复制链接]
  • TA的每日心情
    抱抱
    2015-6-25 09:56
  • 签到天数: 3 天

    连续签到: 1 天

    [LV.2]登堂入室

    8

    主题

    51

    帖子

    2801

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    2801

    发表于 2015-7-8 20:13:39 | 显示全部楼层 |阅读模式
    之前谢谢各位耐心指导  我只是想把淘宝给的widget组件搞懂,毕竟都是经常要用到的效果。都不好意思了,帮我检查代码又得话费大家的时间了,可是自己一下午都没检查出来问题,所以还是要麻烦大家了这次我用四张图轮播,还是2层的,nav那里乱了,灰色的方块是nav  有时间帮我看下哪里有问题  忘大家能和上次一样在出现问题的地方讲详细点 实在是感激不尽啊!!


    http://siteadmin.taobao.com/

    1. <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'contentCls':'xintr','navCls':'xintr_nav','duration':0.5,'interval':3,'triggerType':'mouse','circular':true,'effect':'scrollx','easing':'easeOutStrong','autoplay': true,'activeTriggerCls':'hidden'}" style="padding:0px;width:135px; height:203px; overflow:hidden;margin-top:0px; margin-left:700px;background-color:none" >



    2. <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'contentCls':'xintr_2','navCls':'xintr_nav','duration':0.5,'interval':3,'triggerType':'mouse','circular':true,'effect':'none','easing':'easeOutStrong','autoplay': true,'activeTriggerCls':'hidden'}" style="padding:0px;width:135px; height:203px; overflow:hidden;margin-left:0px; background-color:none" >
    3.         
    4.         
    5.      
    6.         <div class="footer-more-trigger" style="padding:0px; width:135px; height:203px; overflow:hidden;  left:700px;top:0px; border:none; " >
    7.                 <div class="xintr">
    8.                         <div style="padding:0px;width:135px; height:203px"> <a href="#"> <img src="http://img.alicdn.com/imgextra/i3/330550602/TB24BfadFXXXXauXXXXXXXXXXXX_!!330550602.png" /> </a></div>
    9.                         <div style="padding:0px;width:135px; height:203px"> <a href="#"><img src="http://img.alicdn.com/imgextra/i4/330550602/TB2Eba8dFXXXXbeXXXXXXXXXXXX_!!330550602.png"  /> </a></div>
    10.                          <div style="padding:0px;width:135px; height:203px"> <a href="#"> <img src="http://img.alicdn.com/imgextra/i4/330550602/TB2WoqTdFXXXXaKXpXXXXXXXXXX_!!330550602.png" /> </a></div>
    11.                         <div style="padding:0px;width:135px; height:203px"> <a href="#"><img src="http://img.alicdn.com/imgextra/i1/330550602/TB2S86XdFXXXXaRXXXXXXXXXXXX_!!330550602.png"  /> </a></div>
    12.                 </div>
    13.         </div>
    14.       
    15.                 <div class="footer-more-trigger" style="padding:0px;width:100px;height:20px;background:none; z-index:98; border:none; left:735px; top:188px; overflow:hidden;">
    16.                         <div style="padding:0px;width:100px;height:20px;">
    17.                                 <ul class="xintr_2" style="padding:0px;width:100px;height:20px;border:none;">
    18.                                         <li style="padding:0px;cursor:pointer;float:left;"><img src="http://img.alicdn.com/imgextra/i2/330550602/TB2miG8dFXXXXaRXXXXXXXXXXXX_!!330550602.png" width="8px" height="3px"></li>
    19.                                         <li style="padding:0px;cursor:pointer;float:left;margin-left:11px;"><img src="http://img.alicdn.com/imgextra/i2/330550602/TB2miG8dFXXXXaRXXXXXXXXXXXX_!!330550602.png" width="8px" height="3px"></li>
    20.                                             <li style="padding:0px;cursor:pointer;float:left;margin-left:11px;"><img src="http://img.alicdn.com/imgextra/i2/330550602/TB2miG8dFXXXXaRXXXXXXXXXXXX_!!330550602.png" width="8px" height="3px"></li>
    21.                                         <li style="padding:0px;cursor:pointer;float:left;margin-left:11px;"><img src="http://img.alicdn.com/imgextra/i2/330550602/TB2miG8dFXXXXaRXXXXXXXXXXXX_!!330550602.png" width="8px" height="3px"></li>
    22.                                 </ul>
    23.                         </div>
    24.                 </div>
    25.                
    26.                
    27.               <!--nav灰色方块-->
    28.              <div class="footer-more-trigger" style="padding:0px;z-index:99;width:100px;height:20px;background:none;border:none;left:735px;top:188px;">
    29.             <ul class="xintr_nav" style="padding:0px;width:100px;height:20px;border:none; background-color:none">
    30.             <li class="hidden" style="padding:0px;cursor:pointer;float:left;">
    31.             <img src="//gdp.alicdn.com/imgextra/i1/330550602/TB2HA9RdFXXXXauXpXXXXXXXXXX_!!330550602.png" width="8px" height="3px" /></li>
    32.             <li style="padding:0px;cursor:pointer;margin-left:11px;float:left;">
    33.             <img src="//gdp.alicdn.com/imgextra/i1/330550602/TB2HA9RdFXXXXauXpXXXXXXXXXX_!!330550602.png" width="8px" height="3px" /></li>
    34.             <li style="padding:0px;cursor:pointer;margin-left:11px;float:left;">
    35.             <img src="//gdp.alicdn.com/imgextra/i1/330550602/TB2HA9RdFXXXXauXpXXXXXXXXXX_!!330550602.png" width="8px" height="3px" /></li>
    36.             <li style="padding:0px;cursor:pointer;margin-left:11px;float:left;">
    37.                 <img src="//gdp.alicdn.com/imgextra/i1/330550602/TB2HA9RdFXXXXauXpXXXXXXXXXX_!!330550602.png" width="8px" height="3px" />
    38.             </li>
    39.             </ul>
    40.                     </div>
    41.                 <!--nav-->
    42.                
    43.         </div>
    44.         </div>

    复制代码



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


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

  • TA的每日心情
    抱抱
    2015-6-25 09:56
  • 签到天数: 3 天

    连续签到: 1 天

    [LV.2]登堂入室

    8

    主题

    51

    帖子

    2801

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    2801

     楼主| 发表于 2015-7-8 20:14:56 | 显示全部楼层
    地址又发错了     http://shop59789019.taobao.com/   

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


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

  • TA的每日心情
    抱抱
    2015-6-25 09:56
  • 签到天数: 3 天

    连续签到: 1 天

    [LV.2]登堂入室

    8

    主题

    51

    帖子

    2801

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    2801

     楼主| 发表于 2015-7-8 20:17:05 | 显示全部楼层
    这个地址  http://shop59789019.taobao.com/   

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


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

  • TA的每日心情
    思考
    2016-1-1 09:21
  • 签到天数: 231 天

    连续签到: 59 天

    [LV.7]炉火纯青

    1

    主题

    359

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    51271

    最佳新人

    QQ
    发表于 2015-7-8 20:18:56 | 显示全部楼层
    沙发都不给啊
  • TA的每日心情
    无奈
    2 分钟前
  • 签到天数: 291 天

    连续签到: 1 天

    [LV.8]自成一派

    53

    主题

    2469

    帖子

    8万

    积分

    超级版主

    阅读权限: 150

    超级大菜鸟

    Rank: 18Rank: 18Rank: 18Rank: 18Rank: 18

    积分
    89104

    最佳新人热心会员宣传达人推广达人活跃会员优秀版主

    发表于 2015-7-8 22:33:28 | 显示全部楼层
    可以的话,你把我上次那个双层轮播一句一句的解读一下是什么意思...
    感觉你没看仔细.
  • TA的每日心情
    抱抱
    2015-6-25 09:56
  • 签到天数: 3 天

    连续签到: 1 天

    [LV.2]登堂入室

    8

    主题

    51

    帖子

    2801

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    2801

     楼主| 发表于 2015-7-8 22:37:55 | 显示全部楼层
    Rain 发表于 2015-7-8 22:33
    可以的话,你把我上次那个双层轮播一句一句的解读一下是什么意思...
    感觉你没看仔细.
    ...

    我看了啊  我还是没理解多层轮播那里的nav吧  哎  我改了半天没办法又在线生成了代码  对照着看没什么问题。。。可就是效果不对

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


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

  • TA的每日心情
    无奈
    2 分钟前
  • 签到天数: 291 天

    连续签到: 1 天

    [LV.8]自成一派

    53

    主题

    2469

    帖子

    8万

    积分

    超级版主

    阅读权限: 150

    超级大菜鸟

    Rank: 18Rank: 18Rank: 18Rank: 18Rank: 18

    积分
    89104

    最佳新人热心会员宣传达人推广达人活跃会员优秀版主

    发表于 2015-7-8 22:43:07 | 显示全部楼层
    witch 发表于 2015-7-8 22:37
    我看了啊  我还是没理解多层轮播那里的nav吧  哎  我改了半天没办法又在线生成了代码  对照着看没什么问 ...

    你这个轮播完全没必要用双层轮播.利用nav控制柄触发调用显示下面即可.
    另外,我也说了,调用hidden可能会错位最好用绝对定位也就是footer-more-triger来进行定位.

    再来回过头来说双层轮播.我让你解读,是想让你清楚的知道双层轮播是怎么写的.为什么这么些...注意看内容区域和nav控制柄.他们nav控制柄调用的是同一个,而内容区域确实不一样的
  • TA的每日心情
    抱抱
    2015-6-25 09:56
  • 签到天数: 3 天

    连续签到: 1 天

    [LV.2]登堂入室

    8

    主题

    51

    帖子

    2801

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    2801

     楼主| 发表于 2015-7-8 22:48:28 | 显示全部楼层
    Rain 发表于 2015-7-8 22:43
    你这个轮播完全没必要用双层轮播.利用nav控制柄触发调用显示下面即可.
    另外,我也说了,调用hidden可能会错 ...

    hidden属性不是activeTriggerCls的啊  我以为是轮播的时候激活nav用的  hidden也是用来定位的吗

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


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

  • TA的每日心情
    无奈
    2 分钟前
  • 签到天数: 291 天

    连续签到: 1 天

    [LV.8]自成一派

    53

    主题

    2469

    帖子

    8万

    积分

    超级版主

    阅读权限: 150

    超级大菜鸟

    Rank: 18Rank: 18Rank: 18Rank: 18Rank: 18

    积分
    89104

    最佳新人热心会员宣传达人推广达人活跃会员优秀版主

    发表于 2015-7-8 23:00:01 | 显示全部楼层
    你理解的没错,但是不知道为什么,我经常预览的时候发现,hidden达到了display:none的效果,导致nav区域错位.
    这个是一种方法.
    1. <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'contentCls':'xintr','navCls':'xintr_nav','duration':0.5,'interval':3,'triggerType':'mouse','circular':true,'effect':'scrollx','easing':'easeOutStrong','autoplay': true,'activeTriggerCls':'hidden'}" style="padding:0px;width:135px; height:203px; overflow:hidden;margin-top:0px; margin-left:700px;background-color:none" >
    2.      
    3.         <div class="footer-more-trigger" style="padding:0px; width:135px; height:203px; overflow:hidden;  left:700px;top:0px; border:none; " >
    4.                 <div class="xintr">
    5.                         <div style="padding:0px;width:135px; height:203px"> <a href="#"> <img src="http://img.alicdn.com/imgextra/i3/330550602/TB24BfadFXXXXauXXXXXXXXXXXX_!!330550602.png" /> </a></div>
    6.                         <div style="padding:0px;width:135px; height:203px"> <a href="#"><img src="http://img.alicdn.com/imgextra/i4/330550602/TB2Eba8dFXXXXbeXXXXXXXXXXXX_!!330550602.png"  /> </a></div>
    7.                          <div style="padding:0px;width:135px; height:203px"> <a href="#"> <img src="http://img.alicdn.com/imgextra/i4/330550602/TB2WoqTdFXXXXaKXpXXXXXXXXXX_!!330550602.png" /> </a></div>
    8.                         <div style="padding:0px;width:135px; height:203px"> <a href="#"><img src="http://img.alicdn.com/imgextra/i1/330550602/TB2S86XdFXXXXaRXXXXXXXXXXXX_!!330550602.png"  /> </a></div>
    9.                 </div>
    10.         </div>
    11.       
    12.                 <div class="footer-more-trigger" style="padding:0px;width:100px;height:20px;background:none; z-index:98; border:none; left:735px; top:188px; overflow:hidden;">
    13.                         <div style="padding:0px;width:100px;height:20px;">
    14.                                 <ul style="padding:0px;width:100px;height:20px;border:none;">
    15.                                         <li style="padding:0px;cursor:pointer;float:left;"><img src="http://img.alicdn.com/imgextra/i2/330550602/TB2miG8dFXXXXaRXXXXXXXXXXXX_!!330550602.png" width="8px" height="3px"></li>
    16.                                         <li style="padding:0px;cursor:pointer;float:left;margin-left:11px;"><img src="http://img.alicdn.com/imgextra/i2/330550602/TB2miG8dFXXXXaRXXXXXXXXXXXX_!!330550602.png" width="8px" height="3px"></li>
    17.                                             <li style="padding:0px;cursor:pointer;float:left;margin-left:11px;"><img src="http://img.alicdn.com/imgextra/i2/330550602/TB2miG8dFXXXXaRXXXXXXXXXXXX_!!330550602.png" width="8px" height="3px"></li>
    18.                                         <li style="padding:0px;cursor:pointer;float:left;margin-left:11px;"><img src="http://img.alicdn.com/imgextra/i2/330550602/TB2miG8dFXXXXaRXXXXXXXXXXXX_!!330550602.png" width="8px" height="3px"></li>
    19.                                 </ul>
    20.                         </div>
    21.                 </div>
    22.                
    23.                
    24.               <!--nav灰色方块-->
    25.              <div class="footer-more-trigger" style="padding:0px;z-index:99;width:100px;height:20px;background:none;border:none;left:735px;top:188px;">
    26.             <ul class="xintr_nav" style="padding:0px;width:100px;height:20px;border:none; background-color:none">
    27.             <li class="hidden footer-more-trigger" style="top:0px;left:0px;width:8px;height:3px;margin:0px;border:0px;padding:0px;cursor:pointer;float:left;">
    28.             <img src="//gdp.alicdn.com/imgextra/i1/330550602/TB2HA9RdFXXXXauXpXXXXXXXXXX_!!330550602.png" width="8px" height="3px" /></li>
    29.             <li class="footer-more-trigger" style="top:0px;width:8px;height:3px;margin:0px;border:0px;padding:0px;cursor:pointer;left:19px;float:left;">
    30.             <img  src="//gdp.alicdn.com/imgextra/i1/330550602/TB2HA9RdFXXXXauXpXXXXXXXXXX_!!330550602.png" width="8px" height="3px" /></li>
    31.             <li class="footer-more-trigger" style="top:0px;width:8px;height:3px;margin:0px;border:0px;padding:0px;cursor:pointer;left:38px;float:left;">
    32.             <img  src="//gdp.alicdn.com/imgextra/i1/330550602/TB2HA9RdFXXXXauXpXXXXXXXXXX_!!330550602.png" width="8px" height="3px" /></li>
    33.             <li class="footer-more-trigger" style="top:0px;width:8px;height:3px;margin:0px;border:0px;padding:0px;cursor:pointer;left:57px;float:left;">
    34.                 <img src="//gdp.alicdn.com/imgextra/i1/330550602/TB2HA9RdFXXXXauXpXXXXXXXXXX_!!330550602.png" width="8px" height="3px" />
    35.             </li>
    36.             </ul>
    37.                     </div>
    38.                 <!--nav-->
    39.                
    40.         </div>
    41.         </div>
    复制代码

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

    本版积分规则

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

    GMT+8, 2016-12-11 10:23 , Processed in 0.121401 second(s), 21 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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