淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2202|回复: 8
收起左侧

仿阿芙精油品牌介绍轮播。

[复制链接]
  • TA的每日心情

    2015-8-16 20:56
  • 签到天数: 72 天

    连续签到: 1 天

    [LV.6]渐入佳境

    33

    主题

    424

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    29746

    最佳新人热心会员

    发表于 2015-1-31 16:44:51 | 显示全部楼层 |阅读模式
    效果看地址页面最下面的轮播:
    http://afusjt.tmall.com/shop/view_shop.htm?spm=a1z0k.7386009.1997989141.d4915209.22VXeN&shop_id=60632932

    看论坛上有人求,闲着也闲着就去防了仿,算你好运气了。

    另外问问高手轮播的那个触点,经过变换怎么做的?我只会用弹出层,效果不大好,且触点方式有经过变成点击就有问题了。求解!!?

    然后我的个人主页:callmesoul.com
    看代码:

    1. <div class="J_TWidget section loading slide1"
    2. data-widget-type="Slide" data-widget-config="{'navCls':'af-nav','contentCls':'af-content','activeTriggerCls':'selected',
    3. 'delay':0.2,'effect':'fade','easing':'easeBoth','duration':0.8,'autoplay':false}" style="position: relative;">
    4.         <div class="af-content" style="width:950px; height:390px; overflow:hidden; position: absolute; left: 2px; top: 1px;">

    5.         <p><a href="#" target="_blank"><img src="http://img01.taobaocdn.com/imgextra/i1/379250310/T25FzRXw0aXXXXXXXX-379250310.png"/></a></p>

    6.         <p><a href="#" target="_blank"><img src="http://img01.taobaocdn.com/imgextra/i1/379250310/T25I2SXqNXXXXXXXXX-379250310.png"/></a></p>

    7.         <p><a href="#" target="_blank"><img src="http://img01.taobaocdn.com/imgextra/i1/379250310/T2FBDRXwxXXXXXXXXX-379250310.png"/></a></p>
    8.         
    9.         <p><a href="#" target="_blank"><img src="http://img01.taobaocdn.com/imgextra/i1/379250310/T25I2SXqNXXXXXXXXX-379250310.png"/></a></p>
    10.         
    11.         <p><a href="#" target="_blank"><img src="http://img02.taobaocdn.com/imgextra/i2/379250310/T2EFHSXApXXXXXXXXX-379250310.png"/></a></p>
    12.         
    13.         <p><a href="#" target="_blank"><img src="http://img02.taobaocdn.com/imgextra/i2/379250310/T2b_jRXztXXXXXXXXX-379250310.png"/></a></p>
    14.         
    15.         <p><a href="#" target="_blank"><img src="http://img03.taobaocdn.com/imgextra/i3/379250310/T2Ce_7Xk0bXXXXXXXX-379250310.png"/></a></p>

    16.     </div>

    17.     <ul class="af-nav" style=" background:url(http://img02.taobaocdn.com/imgextra/i2/379250310/T2ePfRXERXXXXXXXXX-379250310.png) center no-repeat; position:inherit; z-index:99; width:950px; height:390px;">

    18.   <li class="selected" style="  width:49px; height:49px; display:block; text-align:center; padding-top:300px; margin-left:40px; float:left; background:url(http://img04.taobaocdn.com/imgextra/i4/724528863/TB2yK3JbFXXXXcpXpXXXXXXXXXX_!!724528863.png) no-repeat bottom right; line-height:49px;"><a class="nav_one" href="#" style=" color:#000; width:49px; height:49px;" target="_blank">aaa</a></li>

    19.         <li style="  width:49px; height:49px; display:block; text-align:center; padding-top:235px; margin-left:75px; float:left; background:url(http://img04.taobaocdn.com/imgextra/i4/724528863/TB2yK3JbFXXXXcpXpXXXXXXXXXX_!!724528863.png) no-repeat bottom right; line-height:49px;"><a href="#" class="nav_two" style=" color:#000;" target="_blank">bbb</a></li>

    20.         <li style="  width:49px; height:49px; display:block; text-align:center; padding-top:200px; margin-left:155px; float:left; background:url(http://img04.taobaocdn.com/imgextra/i4/724528863/TB2yK3JbFXXXXcpXpXXXXXXXXXX_!!724528863.png) no-repeat bottom right; line-height:49px;"><a href="#" class="nav_three" style=" color:#000;" target="_blank">ccc</a></li>
    21.         
    22.       <li style="  width:49px; height:49px; display:block; text-align:center; padding-top:130px; margin-left:81px; float:left; background:url(http://img04.taobaocdn.com/imgextra/i4/724528863/TB2yK3JbFXXXXcpXpXXXXXXXXXX_!!724528863.png) no-repeat bottom right; line-height:49px;"><a href="#" class="nav_four" style=" color:#000;" target="_blank">ccc</a></li>
    23.         
    24.       <li style="  width:49px; height:49px; display:block; text-align:center; padding-top:175px; margin-left:60px; float:left; background:url(http://img04.taobaocdn.com/imgextra/i4/724528863/TB2yK3JbFXXXXcpXpXXXXXXXXXX_!!724528863.png) no-repeat bottom right; line-height:49px;"><a href="#" class="nav_five" style=" color:#000;" target="_blank">ccc</a></li>
    25.         
    26.       <li style="  width:49px; height:49px; display:block; text-align:center; padding-top:145px; margin-left:110px; float:left; background:url(http://img04.taobaocdn.com/imgextra/i4/724528863/TB2yK3JbFXXXXcpXpXXXXXXXXXX_!!724528863.png) no-repeat bottom right; line-height:49px;"><a href="#" class="nav_six" style=" color:#000;" target="_blank">ccc</a></li>
    27.         
    28.       <li style="  width:49px; height:49px; display:block; text-align:center; padding-top:35px; margin-right:45px; float:right; background:url(http://img04.taobaocdn.com/imgextra/i4/724528863/TB2yK3JbFXXXXcpXpXXXXXXXXXX_!!724528863.png) no-repeat bottom right; line-height:49px;"><a href="#" class="nav_senve" style=" color:#000;" target="_blank">ccc</a></li>
    29.         

    30.   </ul>

    31. </div>

    32. <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{
    33.           'trigger':'.nav_one',
    34.           'align':{
    35.                   'node':'.nav_one',
    36.                   'offset':[0,0],
    37.                   'points':['cc','cc']
    38.                   }
    39.             }">
    40.     <div  style="height: 49px; width: 49px; background:url(http://img01.taobaocdn.com/imgextra/i1/724528863/TB2JqkVbFXXXXbgXXXXXXXXXXXX_!!724528863.png) no-repeat center; text-align:center; line-height:49px; color:#000;">
    41.       aaa
    42.     </div>
    43. </div>

    44. <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{
    45.           'trigger':'.nav_two',
    46.           'align':{
    47.                   'node':'.nav_two',
    48.                   'offset':[0,0],
    49.                   'points':['cc','cc']
    50.                   }
    51.             }">
    52.     <div  style="height: 49px; width: 49px; background:url(http://img01.taobaocdn.com/imgextra/i1/724528863/TB2JqkVbFXXXXbgXXXXXXXXXXXX_!!724528863.png) no-repeat center; text-align:center; line-height:49px; color:#000;">
    53.       bbb
    54.     </div>
    55. </div>


    56. <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{
    57.           'trigger':'.nav_three',
    58.           'align':{
    59.                   'node':'.nav_three',
    60.                   'offset':[0,0],
    61.                   'points':['cc','cc']
    62.                   }
    63.             }">
    64.     <div  style="height: 49px; width: 49px; background:url(http://img01.taobaocdn.com/imgextra/i1/724528863/TB2JqkVbFXXXXbgXXXXXXXXXXXX_!!724528863.png) no-repeat center; text-align:center; line-height:49px; color:#000;">
    65.       ccc
    66.     </div>
    67. </div>

    68. <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{
    69.           'trigger':'.nav_four',
    70.           'align':{
    71.                   'node':'.nav_four',
    72.                   'offset':[0,0],
    73.                   'points':['cc','cc']
    74.                   }
    75.             }">
    76.     <div  style="height: 49px; width: 49px; background:url(http://img01.taobaocdn.com/imgextra/i1/724528863/TB2JqkVbFXXXXbgXXXXXXXXXXXX_!!724528863.png) no-repeat center; text-align:center; line-height:49px; color:#000;">
    77.       aaa
    78.     </div>
    79. </div>

    80. <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{
    81.           'trigger':'.nav_five',
    82.           'align':{
    83.                   'node':'.nav_five',
    84.                   'offset':[0,0],
    85.                   'points':['cc','cc']
    86.                   }
    87.             }">
    88.     <div  style="height: 49px; width: 49px; background:url(http://img01.taobaocdn.com/imgextra/i1/724528863/TB2JqkVbFXXXXbgXXXXXXXXXXXX_!!724528863.png) no-repeat center; text-align:center; line-height:49px; color:#000;">
    89.       aaa
    90.     </div>
    91. </div>

    92. <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{
    93.           'trigger':'.nav_six',
    94.           'align':{
    95.                   'node':'.nav_six',
    96.                   'offset':[0,0],
    97.                   'points':['cc','cc']
    98.                   }
    99.             }">
    100.     <div  style="height: 49px; width: 49px; background:url(http://img01.taobaocdn.com/imgextra/i1/724528863/TB2JqkVbFXXXXbgXXXXXXXXXXXX_!!724528863.png) no-repeat center; text-align:center; line-height:49px; color:#000;">
    101.       aaa
    102.     </div>
    103. </div>

    104. <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{
    105.           'trigger':'.nav_senve',
    106.           'align':{
    107.                   'node':'.nav_senve',
    108.                   'offset':[0,0],
    109.                   'points':['cc','cc']
    110.                   }
    111.             }">
    112.     <div  style="height: 49px; width: 49px; background:url(http://img01.taobaocdn.com/imgextra/i1/724528863/TB2JqkVbFXXXXbgXXXXXXXXXXXX_!!724528863.png) no-repeat center; text-align:center; line-height:49px; color:#000;">
    113.       aaa
    114.     </div>
    115. </div>
    复制代码




    http://callmesoul.taobao.com/
  • TA的每日心情
    抱抱
    5 小时前
  • 签到天数: 674 天

    连续签到: 1 天

    [LV.9]已臻大成

    26

    主题

    2626

    帖子

    18万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    184885

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

    QQ
    发表于 2015-1-31 17:00:54 | 显示全部楼层
    感谢分享

    QQ交流群  107102001
  • TA的每日心情
    委屈
    2016-1-20 10:50
  • 签到天数: 104 天

    连续签到: 1 天

    [LV.6]渐入佳境

    4

    主题

    332

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    22820

    最佳新人

    QQ
    发表于 2015-1-31 18:28:16 | 显示全部楼层
    感谢分享。那么快就写出来了
  • TA的每日心情
    抱抱
    2016-9-1 16:54
  • 签到天数: 199 天

    连续签到: 1 天

    [LV.7]炉火纯青

    33

    主题

    559

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    47251

    最佳新人宣传达人热心会员

    QQ
    发表于 2015-1-31 23:13:41 | 显示全部楼层
    WP好玩么
    选择一条路,何必打听走多久
  • TA的每日心情
    抱抱
    2016-11-20 18:17
  • 签到天数: 454 天

    连续签到: 1 天

    [LV.9]已臻大成

    10

    主题

    1246

    帖子

    11万

    积分

    高级会员

    阅读权限: 50

    http://www.zcool.com.cn/u/12978141

    Rank: 8Rank: 8

    积分
    111128

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

    QQ
    发表于 2015-1-31 23:54:56 | 显示全部楼层
    感谢分享。那么快就写出来了
    http://www.zcool.com.cn/u/12978141
  • TA的每日心情

    2015-8-16 20:56
  • 签到天数: 72 天

    连续签到: 1 天

    [LV.6]渐入佳境

    33

    主题

    424

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    29746

    最佳新人热心会员

     楼主| 发表于 2015-2-1 00:15:58 | 显示全部楼层

    还好                     

    http://callmesoul.taobao.com/
  • TA的每日心情
    求抱抱
    2015-8-24 16:08
  • 签到天数: 2 天

    连续签到: 1 天

    [LV.1]初学乍练

    0

    主题

    9

    帖子

    1062

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    1062

    发表于 2015-3-6 14:15:41 | 显示全部楼层
    呵呵呵呵

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


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

  • TA的每日心情

    2015-3-23 14:12
  • 签到天数: 4 天

    连续签到: 1 天

    [LV.2]登堂入室

    0

    主题

    19

    帖子

    583

    积分

    新手上路

    阅读权限: 10

    Rank: 1

    积分
    583

    发表于 2015-3-6 15:19:23 | 显示全部楼层
    鹅鹅鹅饿饿

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


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

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

    本版积分规则

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

    GMT+8, 2016-12-4 14:20 , Processed in 0.161702 second(s), 20 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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