淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

[装修相关] 还是之前的那个问题,我加了3张图 不然看不清

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

    连续签到: 1 天

    [LV.2]登堂入室

    8

    主题

    51

    帖子

    2801

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    2801

    发表于 2015-7-6 12:38:00 | 显示全部楼层 |阅读模式
    之前多谢各位!两张图不容易看出问题,这次我多加了一张
    http://shop59789019.taobao.com/
    我在每张图上标了数字。还是nva那里激活的问题,白色的按钮是未激活的,黑色水滴的是激活的,怎么才能在图片轮播的时候激活对应的按钮(黑色水滴呢)  两个按钮我上传的相册了   谁有空帮忙看下啊
    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"><h4>1</h4> <a href="#"> <img src="http://img.alicdn.com/imgextra/i2/330550602/TB2dGmzdFXXXXXwXXXXXXXXXXXX_!!330550602.png" /></a></div>
    5.                 <div style="width:520px; height:275px"><h4>2</h4> <a href="#"><img src="http://img.alicdn.com/imgextra/i3/330550602/TB2nnywdFXXXXXMXpXXXXXXXXXX_!!330550602.png"  /> </a></div>
    6.         
    7.          <div style="width:520px; height:275px"><h4>3</h4> <a href="#"><img src="http://img.alicdn.com/imgextra/i1/330550602/TB2.juidFXXXXc4XpXXXXXXXXXX_!!330550602.png"  /> </a></div>
    8.         </div>
    9. </div>






    10. <div class="footer-more-trigger" style="width:150px;height:55px;border:none;background:none; display:block;">
    11.     <div class="footer-more-trigger" style="z-index:99;width:150px;height:20px;background:none;background:none; border:none; left:398px; top:200px;">
    12.                 <ul style="width:150px;height:45px;border:none;">
    13.                         <li style="background:none; left:400px;cursor:pointer;width:17px;height:17px;float:left"><img src="http://img.alicdn.com/imgextra/i2/330550602/TB2gM1ddFXXXXXnXpXXXXXXXXXX_!!330550602.png"></li>
    14.                         <li style="background:none;cursor:pointer; margin-left:20px;width:17px;height:17px; float:left"><img src="http://img.alicdn.com/imgextra/i2/330550602/TB2gM1ddFXXXXXnXpXXXXXXXXXX_!!330550602.png"></li>
    15.                           <li style="background:none;cursor:pointer; margin-left:20px;width:17px;height:17px; float:left"><img src="http://img.alicdn.com/imgextra/i2/330550602/TB2gM1ddFXXXXXnXpXXXXXXXXXX_!!330550602.png"></li>
    16.                 </ul>   
    17.     </div>



    18.         <div class="footer-more-trigger" style="z-index:99;width:150px;height:20px;background:none;background:none; border:none; left:400px; top:200px;">
    19.                 <ul class="xin_nav" style="width:150px;height:20px;border:none;">
    20.                         <li class="hidden" style="background:none; left:400px;cursor:pointer;width:12px;height:17px;float:left"><img src="http://img.alicdn.com/imgextra/i3/330550602/TB24i5edFXXXXXuXpXXXXXXXXXX_!!330550602.png"></li>
    21.                         <li class="hidden" style="background:none;cursor:pointer; margin-left:23px;width:12px;height:17px; float:left"><img src="http://img.alicdn.com/imgextra/i3/330550602/TB24i5edFXXXXXuXpXXXXXXXXXX_!!330550602.png"></li>
    22.                          <li class="hidden" style="background:none;cursor:pointer; margin-left:23px;width:12px;height:17px; float:left"><img src="http://img.alicdn.com/imgextra/i3/330550602/TB24i5edFXXXXXuXpXXXXXXXXXX_!!330550602.png"></li>
    23.                 </ul>
    24.     </div>

    25. </div>
    复制代码



    水滴

    水滴

    白色

    白色

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


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址: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 13:57:58 | 显示全部楼层
    LZ不要只在一棵树上吊着   其实可以换其他方式去实现的
  • TA的每日心情
    加油
    昨天 16:18
  • 签到天数: 1102 天

    连续签到: 3 天

    [LV.10]功行圆满

    11

    主题

    714

    帖子

    27万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    279873

    发表于 2015-7-6 14:05:28 | 显示全部楼层
    触发的轮播图对应的黑色水滴显示,
    没触发的图显示白点,
    是这样的吗?

    如果用单层轮播,
    设置触发时隐藏缩略图(白点),显示出下面的图片(黑色水滴),
    这个办法有个限制,就是缩略图(白点)要盖住下面的图片(黑色水滴)。

    而你现在的白点不能盖住黑色水滴。

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


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

  • TA的每日心情
    臭美
    2016-5-14 09:27
  • 签到天数: 48 天

    连续签到: 1 天

    [LV.5]略有小成

    6

    主题

    692

    帖子

    9246

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    9246

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

    QQ
    发表于 2015-7-6 14:49:54 | 显示全部楼层
    路过                           
    在一片苍茫的马勒戈壁上,生活着一群快乐滴草泥马。
  • TA的每日心情
    抱抱
    2015-6-25 09:56
  • 签到天数: 3 天

    连续签到: 1 天

    [LV.2]登堂入室

    8

    主题

    51

    帖子

    2801

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    2801

     楼主| 发表于 2015-7-6 15:22:40 | 显示全部楼层
    X_in 发表于 2015-7-6 14:05
    触发的轮播图对应的黑色水滴显示,
    没触发的图显示白点,
    是这样的吗?

    嗯  是这样的  如果未触发图片比触发的图片小  是不是只有淘宝提供的widget组件就实现不了了

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


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

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

    连续签到: 1 天

    [LV.2]登堂入室

    8

    主题

    51

    帖子

    2801

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    2801

     楼主| 发表于 2015-7-6 15:24:05 | 显示全部楼层
    韩衣衣舰旗店 发表于 2015-7-6 13:57
    LZ不要只在一棵树上吊着   其实可以换其他方式去实现的

    我也只是想把淘宝提供的widget组件搞清楚  都是些经常用到的效果

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


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

  • TA的每日心情
    加油
    昨天 16:18
  • 签到天数: 1102 天

    连续签到: 3 天

    [LV.10]功行圆满

    11

    主题

    714

    帖子

    27万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    279873

    发表于 2015-7-6 15:44:00 | 显示全部楼层
    witch 发表于 2015-7-6 15:22
    嗯  是这样的  如果未触发图片比触发的图片小  是不是只有淘宝提供的widget组件就实现不了了

    ...

    rrrrr.jpg
    像这样加个背景,用背景色填充白点的透明部分,使白点能盖住后面的黑色水滴就好了。
    或者做双层轮播也可以。





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


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

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

    连续签到: 1 天

    [LV.8]自成一派

    53

    主题

    2466

    帖子

    8万

    积分

    超级版主

    阅读权限: 150

    超级大菜鸟

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

    积分
    88855

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

    发表于 2015-7-6 16:10:21 | 显示全部楼层
    X_in讲得很对.单层轮播利用hidden基本上就是一个盖住一个.当然可以利用其他的属性来做...
    你先解读一下我前面发给你的两个轮播的意思.

    还有一种就是双层轮播,不过比较麻烦
    1. <!--色块控制台(个人叫它控制台) 主要控制了主要轮播内容-->

    2. <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="padding:0px;width:520px; height:275px; overflow:hidden;" >
    3. <!--色块控制台结束-->

    4. <!--水滴轮播控制台-->
    5. <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'contentCls':'xin_2','navCls':'xin_nav','duration':0.5,'interval':3,'triggerType':'mouse','circular':true,'effect':'none','easing':'easeOutStrong','autoplay': true,'activeTriggerCls':'hidden'}" style="padding:0px;width:520px; height:275px; overflow:hidden;" >
    6.         <!--水滴轮播控制台结束-->
    7.         
    8.         <!--色块轮播内容开始-->
    9.         <div style="padding:0px; width:520px; height:275px; overflow:hidden;" >
    10.                 <div class="xin">
    11.                         <div style="padding:0px;width:520px; height:275px"> <a href="#"> <img src="http://img.alicdn.com/imgextra/i2/330550602/TB2dGmzdFXXXXXwXXXXXXXXXXXX_!!330550602.png" /> </a></div>
    12.                         <div style="padding:0px;width:520px; height:275px"> <a href="#"><img src="http://img.alicdn.com/imgextra/i2/330550602/TB2reyydFXXXXXYXXXXXXXXXXXX_!!330550602.png"  /> </a></div>
    13.                 </div>
    14.         </div>
    15.         <!--色块轮播内容结束-->
    16.         
    17.         <!--水滴轮播内容开始,个人比较懒直接复制了-->
    18.         <div class="footer-more-trigger" style="padding:0px;width:60px;height:55px;border:none;background:none; display:block;">
    19.                 <div class="footer-more-trigger" style="padding:0px;z-index:99;width:50px;height:17px;background:none;background:none; border:none; left:400px; top:200px; overflow:hidden;">
    20.                         <div style="padding:0px;width:60px;height:45px;">
    21.                                 <ul class="xin_2" style="padding:0px;width:60px;height:45px;border:none;">
    22.                                         <li style="padding:0px;left:400px;cursor:pointer;float:left;width:60px;"><img src="http://img.alicdn.com/imgextra/i3/330550602/TB24i5edFXXXXXuXpXXXXXXXXXX_!!330550602.png" width="12" height="17"></li>
    23.                                         <li style="padding:0px;cursor:pointer;width:60px;float:left;"><img style="padding:0px;margin-left:15px;" src="http://img.alicdn.com/imgextra/i3/330550602/TB24i5edFXXXXXuXpXXXXXXXXXX_!!330550602.png" width="12" height="17"></li>
    24.                                 </ul>
    25.                         </div>
    26.                 </div>
    27.                 <!--水滴轮播内容结束-->
    28.                
    29.                 <!--nav开始,此处两个轮播调用的是一个nav控制柄-->
    30.                 <div class="footer-more-trigger" style="padding:0px;z-index:99;width:60px;height:55px;background:none;background:none; border:none; left:398px; top:200px;">
    31.                         <ul class="xin_nav" style="padding:0px;width:60px;height:45px;border:none;">
    32.                                 <li class="hidden" style="padding:0px; left:400px;cursor:pointer;width:17px;height:17px;float:left"><img src="http://img.alicdn.com/imgextra/i2/330550602/TB2gM1ddFXXXXXnXpXXXXXXXXXX_!!330550602.png" width="17" height="17"></li>
    33.                                 <!--此处建议直接写入hidden;另外个人习惯写绝对定位,因为总感觉margin会错位之类的.-->
    34.                                 <li style="padding:0px;cursor:pointer; margin-left:15px;width:17px;height:17px;"><img src="http://img.alicdn.com/imgextra/i2/330550602/TB2gM1ddFXXXXXnXpXXXXXXXXXX_!!330550602.png" width="17" height="17"></li>
    35.                         </ul>
    36.                 </div>
    37.                 <!--nav结束-->
    38.         </div>
    39. </div>

    40. <!--轮播一个嵌入一个,俗称多层轮播.另外个人建议调用hidden等属性最好是用绝对定位不然容易错位.-->
    复制代码


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

    连续签到: 1 天

    [LV.2]登堂入室

    8

    主题

    51

    帖子

    2801

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    2801

     楼主| 发表于 2015-7-7 10:21:23 | 显示全部楼层
    Rain 发表于 2015-7-6 16:10
    X_in讲得很对.单层轮播利用hidden基本上就是一个盖住一个.当然可以利用其他的属性来做...
    你先解读一下我前 ...

    好的  谢谢啊!

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


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

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

    连续签到: 1 天

    [LV.2]登堂入室

    8

    主题

    51

    帖子

    2801

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    2801

     楼主| 发表于 2015-7-7 10:22:20 | 显示全部楼层
    X_in 发表于 2015-7-6 15:44
    像这样加个背景,用背景色填充白点的透明部分,使白点能盖住后面的黑色水滴就好了。
    或者做双层轮播也可 ...

    嗯  谢谢啊!我再琢磨琢磨

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


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

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

    本版积分规则

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

    GMT+8, 2016-12-10 11:09 , Processed in 0.133975 second(s), 22 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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