淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

[装修相关] 轮播中 nav激活顺序是反的

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

    连续签到: 1 天

    [LV.2]登堂入室

    8

    主题

    51

    帖子

    2801

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    2801

    发表于 2015-7-6 09:57:48 | 显示全部楼层 |阅读模式
    http://shop59789019.taobao.蓝色的图是第一张  黄色的是第二张  轮播时第一张图(蓝色)激活的应该是第一个按钮 鼠标移到到按钮上激活的也应该是对应的按钮  但现在是相反的。鼠标移动到第一个按钮激活的却是第二张轮播图 第二个按钮   
    麻烦看下nav那里哪有问题啊(为了简洁  BtnCls那里省略了)



    1. <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'contentCls':'xin','navCls':'xin_nav','duration':0.5,'interval':3,'triggerType':'mouse','circular':true,'effect':'scrollx','easing':'easeOutStrong','autoplay': true,'activeTriggerCls':'hidden'}" style="width:520px; height:275px; overflow:hidden;" >
    2.         
    3. <div style=" width:520px; height:275px; overflow:hidden;" >
    4. <div class="xin">
    5. <div style="width:520px; height:275px"> <a href="#"> <img src="http://img.alicdn.com/imgextra/i2/330550602/TB2dGmzdFXXXXXwXXXXXXXXXXXX_!!330550602.png" /> </a></div>
    6.   
    7. <div style="width:520px; height:275px"> <a href="#"><img src="http://img.alicdn.com/imgextra/i2/330550602/TB2reyydFXXXXXYXXXXXXXXXXXX_!!330550602.png"  /> </a></div>
    8. </div>
    9. </div>

    10. <!--nav开始-->
    11. <div class="footer-more-trigger" style="width:60px;height:55px;border:none;background:none; display:block;">
    12.   <div class="footer-more-trigger" style="z-index:99;width:60px;height:55px;border:none;left:400px;top:200px;background:none;">
    13.     <ul class="xin_nav" style="width:60px;height:55px;border:none;">
    14.       <li class="hidden" style="display:inline;"><img src="http://img.alicdn.com/imgextra/i3/330550602/TB24i5edFXXXXXuXpXXXXXXXXXX_!!330550602.png" style="width:12px; height:17px;">
    15.             </li>
    16.             <li class="hidden" style="display:inline; margin-left:20px;"><img src="http://img.alicdn.com/imgextra/i3/330550602/TB24i5edFXXXXXuXpXXXXXXXXXX_!!330550602.png" style="width:12px; height:17px;">
    17.             </li>
    18.     </ul>
    19.   </div>
    20.   <div class="footer-more-trigger" style="z-index:98;width:60px;height:55px;background:none;background:none; border:none; left:398px; top:200px;">
    21.     <ul class="xin_nav" style="width:60px;height:45px;border:none;">
    22.       <li style="display:inline;background:none; left:400px;cursor:pointer;"><img src="http://img.alicdn.com/imgextra/i2/330550602/TB2gM1ddFXXXXXnXpXXXXXXXXXX_!!330550602.png" style="width:17px; height:17px">
    23.             </li>
    24.             <li style="display:inline;background:none;cursor:pointer; margin-left:15px;"><img src="http://img.alicdn.com/imgextra/i2/330550602/TB2gM1ddFXXXXXnXpXXXXXXXXXX_!!330550602.png" style="width:17px; height:17px" >
    25.             </li>
    26.     </ul>
    27.   </div>
    28. <!--nav结束-->   
    29.    
    30. </div>
    复制代码






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


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

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

    连续签到: 1 天

    [LV.2]登堂入室

    8

    主题

    51

    帖子

    2801

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    2801

     楼主| 发表于 2015-7-6 09:59:25 | 显示全部楼层
    地址那里少了后缀   http://shop59789019.taobao.com/

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


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

  • TA的每日心情
    思考
    2016-9-11 15:54
  • 签到天数: 206 天

    连续签到: 1 天

    [LV.7]炉火纯青

    24

    主题

    1028

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    32979

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

    QQ
    发表于 2015-7-6 10:17:05 | 显示全部楼层
    抢板凳!问题楼下回答!
    即使睁开眼睛也看不见,我的心在黑暗中——林疋火昱
  • TA的每日心情
    加油
    昨天 19:48
  • 签到天数: 1103 天

    连续签到: 4 天

    [LV.10]功行圆满

    11

    主题

    714

    帖子

    28万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    280048

    发表于 2015-7-6 10:27:54 | 显示全部楼层
    为什么有两层nav?
    如果只是做个触发隐藏的话,底下那一层是不用定义为nav的。
    现在有两层,都不知道哪层要起作用的。


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


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

  • TA的每日心情
    不爽
    4 天前
  • 签到天数: 129 天

    连续签到: 1 天

    [LV.7]炉火纯青

    20

    主题

    454

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    28014

    最佳新人热心会员

    发表于 2015-7-6 10:39:48 | 显示全部楼层
    路过拿分楼下回答

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


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

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

    连续签到: 59 天

    [LV.7]炉火纯青

    1

    主题

    359

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    51271

    最佳新人

    QQ
    发表于 2015-7-6 10:42:33 | 显示全部楼层
    路过拿分楼下回答
  • TA的每日心情
    委屈
    3 天前
  • 签到天数: 290 天

    连续签到: 1 天

    [LV.8]自成一派

    53

    主题

    2469

    帖子

    8万

    积分

    超级版主

    阅读权限: 150

    超级大菜鸟

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

    积分
    88986

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

    发表于 2015-7-6 10:54:27 | 显示全部楼层
    我们平时如果说不想写双层轮播的话一般是一个盖住一个做.
    代码如下
    1. <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'contentCls':'xin','navCls':'xin_nav','duration':0.5,'interval':3,'triggerType':'mouse','circular':true,'effect':'scrollx','easing':'easeOutStrong','autoplay': true,'activeTriggerCls':'hidden'}" style="width:520px; height:275px; overflow:hidden;" >
    2. <div style=" width:520px; height:275px; overflow:hidden;" >
    3.         <div class="xin">
    4.                 <div style="width:520px; height:275px"> <a href="#"> <img src="http://img.alicdn.com/imgextra/i2/330550602/TB2dGmzdFXXXXXwXXXXXXXXXXXX_!!330550602.png" /> </a></div>
    5.                 <div style="width:520px; height:275px"> <a href="#"><img src="http://img.alicdn.com/imgextra/i2/330550602/TB2reyydFXXXXXYXXXXXXXXXXXX_!!330550602.png"  /> </a></div>
    6.         </div>
    7. </div>
    8. <!--此处设置层级关系,当nav出发时这里的就会显示-->
    9. <div class="footer-more-trigger" style="width:60px;height:55px;border:none;background:none; display:block;">
    10.     <div class="footer-more-trigger" style="z-index:99;width:60px;height:55px;background:none;background:none; border:none; left:398px; top:200px;">
    11.                 <ul style="width:60px;height:45px;border:none;">
    12.                         <li style="background:blue; left:400px;cursor:pointer;width:17px;height:17px;float:left"></li>
    13.                         <li style="background:blue;cursor:pointer; margin-left:15px;width:17px;height:17px;"></li>
    14.                 </ul>
    15.     </div>
    16. <!--触发显示内容结束-->

    17. <!--nav开始-->
    18.         <div class="footer-more-trigger" style="z-index:99;width:60px;height:55px;background:none;background:none; border:none; left:398px; top:200px;">
    19.                 <ul class="xin_nav" style="width:60px;height:45px;border:none;">
    20.                         <li class="hidden" style="background:red; left:400px;cursor:pointer;width:17px;height:17px;float:left"></li><!--此处建议直接写入hidden;另外个人习惯写绝对定位,因为总感觉margin会错位之类的.-->
    21.                         <li style="background:red;cursor:pointer; margin-left:15px;width:17px;height:17px;"></li>
    22.                 </ul>
    23.     </div>
    24. <!--nav结束-->
    25. </div>
    复制代码

    既然是盖住那么上面显示内容肯定要大于后面的.
  • TA的每日心情
    抱抱
    2015-6-25 09:56
  • 签到天数: 3 天

    连续签到: 1 天

    [LV.2]登堂入室

    8

    主题

    51

    帖子

    2801

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    2801

     楼主| 发表于 2015-7-6 11:05:33 | 显示全部楼层
    X_in 发表于 2015-7-6 10:27
    为什么有两层nav?
    如果只是做个触发隐藏的话,底下那一层是不用定义为nav的。
    现在有两层,都不知道哪层要 ...

    嗯嗯  谢谢  我再改下  widget组件网上没教程  我不知道nav做触发,隐藏效果的结构是怎么写的

    点评

    http://www.taobaoux.com/thread-4713-1-1.html  发表于 2015-7-6 11:09

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


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

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

    连续签到: 1 天

    [LV.2]登堂入室

    8

    主题

    51

    帖子

    2801

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    2801

     楼主| 发表于 2015-7-6 11:06:13 | 显示全部楼层
    Rain 发表于 2015-7-6 10:54
    我们平时如果说不想写双层轮播的话一般是一个盖住一个做.
    代码如下

    辛苦了 谢谢! 我试下

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


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

  • TA的每日心情
    委屈
    3 天前
  • 签到天数: 290 天

    连续签到: 1 天

    [LV.8]自成一派

    53

    主题

    2469

    帖子

    8万

    积分

    超级版主

    阅读权限: 150

    超级大菜鸟

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

    积分
    88986

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

    发表于 2015-7-6 11:07:18 | 显示全部楼层
    这个是第二种方法.也是不写双层轮播的
    但是有缺点,必须要点击才可以切换,而且只限于两个轮播区域

    1. <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'contentCls':'xin','navCls':'xin_nav','duration':0.5,'interval':3,'triggerType':'click','circular':true,'effect':'scrollx','easing':'easeOutStrong','autoplay': true,'activeTriggerCls':'hidden'}" style="width:520px; height:275px; overflow:hidden;" >
    2. <div style=" width:520px; height:275px; overflow:hidden;" >
    3.         <div class="xin">
    4.                 <div style="width:520px; height:275px"> <a href="#"> <img src="http://img.alicdn.com/imgextra/i2/330550602/TB2dGmzdFXXXXXwXXXXXXXXXXXX_!!330550602.png" /> </a></div>
    5.                 <div style="width:520px; height:275px"> <a href="#"><img src="http://img.alicdn.com/imgextra/i2/330550602/TB2reyydFXXXXXYXXXXXXXXXXXX_!!330550602.png"  /> </a></div>
    6.         </div>
    7. </div>

    8. <!--nav开始-->
    9. <div class="footer-more-trigger" style="width:60px;height:55px;border:none;background:none; display:block;">
    10.         <div class="footer-more-trigger" style="z-index:99;width:60px;height:55px;border:none;left:400px;top:200px;background:none;">
    11.                 <ul class="xin_nav" style="width:60px;height:55px;border:none;">
    12.                         <li  class="hidden footer-more-trigger" style="top:auto;left:auto;margin:0px;border:0px;padding:0px;width:60px;height:55px;"><img src="http://img.alicdn.com/imgextra/i3/330550602/TB24i5edFXXXXXuXpXXXXXXXXXX_!!330550602.png" style="width:12px; height:17px;"> <img src="http://img.alicdn.com/imgextra/i2/330550602/TB2gM1ddFXXXXXnXpXXXXXXXXXX_!!330550602.png"  > </li>
    13.                        
    14.                         <li class=" footer-more-trigger" style="top:auto;left:auto;margin:0px;border:0px;padding:0px;width:60px;height:55px;"><img src="http://img.alicdn.com/imgextra/i2/330550602/TB2gM1ddFXXXXXnXpXXXXXXXXXX_!!330550602.png"> <img src="http://img.alicdn.com/imgextra/i3/330550602/TB24i5edFXXXXXuXpXXXXXXXXXX_!!330550602.png" style="width:12px; height:17px;">  </li>
    15.                 </ul>
    16.         </div>
    17.        
    18.         <!--nav结束-->
    19.        
    20. </div>
    复制代码

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

    本版积分规则

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

    GMT+8, 2016-12-11 00:44 , Processed in 0.150522 second(s), 25 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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