淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2086|回复: 27
收起左侧

【渔舟】利用第三方模块制作带开关门效果的轮播

[复制链接]
  • TA的每日心情
    抱抱
    7 天前
  • 签到天数: 4 天

    连续签到: 1 天

    [LV.2]登堂入室

    63

    主题

    159

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    52192

    QQ
    发表于 2016-4-14 17:19:08 | 显示全部楼层 |阅读模式
    最近一直很忙,所以抽不出时间来发帖。
    今天找了点时间,给大家分享一个效果。
    话不多说,先看图。

    动态图有点大,请耐心等待图片加载完成。 等不及的朋友也可以直接到店铺查看效果。
    效果预览地址:https://yijohn.taobao.com/p/csym.htm

    简单说一下思路,其实这个就是轮播和开关门效果结合起来了。
    把整个轮播看成一个整体(把轮播当做一张图片看待),然后鼠标经过这个整体的时候出发开关门效果。
    所用的css是调用的战国策模块内的CSS,大家也可以订购一下战国策模块,可以借用它的css做出很多种效果,丝毫不逊色于官方的CSS权限,而且价格也不贵。这里就不给战国策做广告了(应该给我点广告费了,哈哈)。

    大家可以在论坛查找开关门和轮播的相关帖子,都有很详细的介绍。  
    大家也可以查看一下代码,替换图片变成自己的效果。

    1. <div class="J_TWidget" data-widget-type="Slide" data-widget-config="{'contentCls':'yz','navCls':'yz','activeTriggerCls':'tshop-um-zgctae-_-zgctae-_-b8e137ef51dc461db645aeeb9e9342a5','activeIndex':1,'interval':0.01}">
    2.   <ul class="yz">
    3.     <li>
    4.       <div style="width:1920px; height:830px;">
    5.         <div class="footer-more-trigger" style="width:1920px; height:830px; border:0; padding:0; top:auto; left:auto;">
    6.           <div class="wd_self_rel footer-more-trigger" style="width:1920px; height:830px; border:0; padding:0; top:auto; left:-485px; background:#ff0036;">
    7.             <!--widget-->
    8.             <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrollx','contentCls':'content_yuzhou','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','activeTriggerCls':'wd_hovimg'}">
    9.               <!--content-->
    10.               <div style="width:1920px; height:650px; overflow:hidden;">
    11.                 <ul class="content_yuzhou">
    12.                   <li style="width:1920px; height:650px;">
    13.                     <table border="0" cellpadding="0" cellspacing="0" height="650" width="1920">
    14.                       <tbody>
    15.                         <tr>
    16.                           <td><img src="//gdp.alicdn.com/imgextra/i3/12149668/TB2htQ0jVXXXXa7XpXXXXXXXXXX-12149668.jpg" alt="" height="650" width="410"></td>
    17.                           <td><a href="//othermix.tmall.com/p/rd945275.htm?spm=a1z10.1-b.w5003-13333880295.1.Adbtz4&scene=taobao_shop" target="_blank"><img src="//gdp.alicdn.com/imgextra/i3/394695430/TB2G8FPkXXXXXaxXpXXXXXXXXXX-394695430.jpg" alt="" height="650" width="1100"></a></td>
    18.                           <td><img src="//gdp.alicdn.com/imgextra/i3/12149668/TB27MxfkXXXXXcZXXXXXXXXXXXX-12149668.jpg" alt="" height="650" width="410"></td>
    19.                         </tr>
    20.                       </tbody>
    21.                     </table>
    22.                   </li>
    23.                   <li style="width:1920px; height:650px;">
    24.                     <table border="0" cellpadding="0" cellspacing="0">
    25.                       <tbody>
    26.                         <tr>
    27.                           <td><img src="//gdp.alicdn.com/imgextra/i3/394695430/TB2nzxdkXXXXXXfXpXXXXXXXXXX-394695430.jpg" alt="" height="650" width="410"></td>
    28.                           <td><a href="//othermix.tmall.com/p/rd344211.htm?spm=a1z10.1-b.w5003-13333880295.2.Adbtz4&scene=taobao_shop" target="_blank"><img src="//gdp.alicdn.com/imgextra/i1/394695430/TB2mJETjVXXXXcZXpXXXXXXXXXX-394695430.jpg" alt="" height="650" width="1100"></a></td>
    29.                           <td><img src="//gdp.alicdn.com/imgextra/i4/394695430/TB2V2UHjVXXXXXHXFXXXXXXXXXX-394695430.jpg" alt="" height="650" width="410"></td>
    30.                         </tr>
    31.                       </tbody>
    32.                     </table>
    33.                   </li>
    34.                   <li style="width:1920px; height:650px;"> <img src="//gdp.alicdn.com/imgextra/i1/394695430/TB2Hl0lkXXXXXcGXpXXXXXXXXXX-394695430.jpg"> </li>
    35.                   <li style="width:1920px; height:650px;"> <img src="//gdp.alicdn.com/imgextra/i3/394695430/TB25xowkXXXXXXMXXXXXXXXXXXX-394695430.jpg"> </li>
    36.                   <li style="width:1920px; height:650px;">
    37.                     <table border="0" cellpadding="0" cellspacing="0" height="650" width="1920">
    38.                       <tbody>
    39.                         <tr>
    40.                           <td><img src="//gdp.alicdn.com/imgextra/i4/394695430/TB2W36ZjVXXXXahXpXXXXXXXXXX-394695430.jpg" alt="" height="650" width="465"></td>
    41.                           <td><a href="//othermix.tmall.com/p/rd644153.htm?spm=a1z10.1-b.w5003-13333880295.5.Adbtz4&scene=taobao_shop" target="_blank"><img src="//gdp.alicdn.com/imgextra/i4/394695430/TB2Q1_0jVXXXXXWXpXXXXXXXXXX-394695430.jpg" alt="" height="650" width="990"></a></td>
    42.                           <td><img src="//gdp.alicdn.com/imgextra/i3/394695430/TB2lSnWjVXXXXaCXpXXXXXXXXXX-394695430.jpg" alt="" height="650" width="465"></td>
    43.                         </tr>
    44.                       </tbody>
    45.                     </table>
    46.                   </li>
    47.                 </ul>
    48.               </div>
    49.               <!--content_end-->
    50.               <!--nav-->
    51.               <div class="footer-more-trigger" style="width:auto; height:92px; border:0; padding:0; left:606px; top:604px; ">
    52.                 <p class="prev_yuzhou" style="float:left;"><img src="//gdp.alicdn.com/imgextra/i3/394695430/TB2.yi1jVXXXXbLXXXXXXXXXXXX-394695430.jpg" height="92" width="61"></p>
    53.                 <ul class="nav_yuzhou" style="float:left;">
    54.                   <li class="wd_disappear wd_hovimg"> <img src="//gdp.alicdn.com/imgextra/i4/394695430/TB2M_GckXXXXXaDXXXXXXXXXXXX-394695430.jpg" height="92" width="122"> </li>
    55.                   <li class="wd_disappear"> <img src="//gdp.alicdn.com/imgextra/i4/394695430/TB2mrBPkXXXXXX7XpXXXXXXXXXX-394695430.jpg" height="92" width="122"> </li>
    56.                   <li class="wd_disappear"> <img src="//gdp.alicdn.com/imgextra/i3/394695430/TB2_VJMkXXXXXaxXpXXXXXXXXXX-394695430.jpg" height="92" width="122"> </li>
    57.                   <li class="wd_disappear"> <img src="//gdp.alicdn.com/imgextra/i3/394695430/TB24CNMkXXXXXamXpXXXXXXXXXX-394695430.jpg" height="92" width="122"> </li>
    58.                   <li class="wd_disappear"> <img src="//gdp.alicdn.com/imgextra/i4/394695430/TB24odYkXXXXXctXXXXXXXXXXXX-394695430.jpg" height="92" width="122"> </li>
    59.                 </ul>
    60.                 <p class="next_yuzhou" style="float:left;"><img src="//gdp.alicdn.com/imgextra/i2/394695430/TB2pBm5jVXXXXbeXXXXXXXXXXXX-394695430.jpg" height="92" width="63"></p>
    61.                 <div style=" float:left; margin-left:1px;"><img src="//gdp.alicdn.com/imgextra/i4/394695430/TB25hjYkXXXXXcmXpXXXXXXXXXX-394695430.jpg" height="92" width="460"></div>
    62.               </div>
    63.               <!--nav_end-->
    64.             </div>
    65.             <!--widget end-->
    66.             <!--open the door-->
    67.             <div class="left wd_self_abs eff-b-o2l100 wdeffect" style="top:0; left:0;"><img src="//gdp.alicdn.com/imgextra/i2/394695430/TB2uW3ikXXXXXcaXXXXXXXXXXXX-394695430.jpg" width="960" height="830"></div>
    68.             <div class="right wd_self_abs eff-b-o2r100 wdeffect" style="top:0; left:960px;"><img src="//gdp.alicdn.com/imgextra/i4/394695430/TB2bulukXXXXXXaXFXXXXXXXXXX-394695430.jpg" width="960"></div>
    69.             <!--open the door end-->
    70.           </div>
    71.         </div>
    72.       </div>
    73.     </li>
    74.   </ul>
    75. </div>
    复制代码



    评分

    参与人数 4美工币 +350 收起 理由
    请叫我高手 + 20 很给力!
    Rain + 200 赞一个!
    DSFA + 30 很给力!
    峰生水起之林 + 100 感谢分享!

    查看全部评分

    本帖被以下淘专辑推荐:

  • TA的每日心情
    抱抱
    2016-11-23 10:46
  • 签到天数: 135 天

    连续签到: 1 天

    [LV.7]炉火纯青

    9

    主题

    887

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    31914

    淘宝皇冠店美工最佳新人热心会员

    QQ
    发表于 2016-4-14 18:03:45 | 显示全部楼层
    这个很66666

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


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

  • TA的每日心情

    7 天前
  • 签到天数: 1165 天

    连续签到: 1 天

    [LV.10]功行圆满

    59

    主题

    6125

    帖子

    53万

    积分

    版主

    阅读权限: 100

    黄皮很酸吗? 糖糖很甜吗? 亲 我一下犯法吗?

    Rank: 12Rank: 12Rank: 12

    积分
    539106

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

    QQ
    发表于 2016-4-14 18:15:42 | 显示全部楼层
    顶起了,想当年直接就调用他们模块了
    >>>>>>挖掘淘宝Bug与代应用:364384606<<<<<<
  • TA的每日心情
    大哭
    昨天 16:41
  • 签到天数: 652 天

    连续签到: 1 天

    [LV.9]已臻大成

    37

    主题

    2231

    帖子

    13万

    积分

    高级会员

    阅读权限: 50

    【单身狗认证】

    Rank: 8Rank: 8

    积分
    138386

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

    QQ
    发表于 2016-4-14 19:00:49 | 显示全部楼层
    跪求免费调用战国策的新方法
  • TA的每日心情
    大哭
    2016-11-15 22:21
  • 签到天数: 185 天

    连续签到: 2 天

    [LV.7]炉火纯青

    15

    主题

    316

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    24671

    最佳新人热心会员

    QQ
    发表于 2016-4-14 19:23:27 | 显示全部楼层
    风吹裤裆屌飞扬 发表于 2016-4-14 19:00
    跪求免费调用战国策的新方法

    怎么你老是在我楼上~~
    如果有记得分享给我~

  • TA的每日心情
    心跳
    2016-8-21 09:50
  • 签到天数: 5 天

    连续签到: 1 天

    [LV.2]登堂入室

    0

    主题

    78

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    21661

    QQ
    发表于 2016-4-14 20:47:07 | 显示全部楼层
    又是战国策
    我的小店https://shop130580970.taobao.com 【淘宝装修群: 5807586】
  • TA的每日心情
    抱抱
    昨天 09:16
  • 签到天数: 630 天

    连续签到: 1 天

    [LV.9]已臻大成

    42

    主题

    574

    帖子

    15万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    152874

    最佳新人活跃会员热心会员

    发表于 2016-4-14 21:07:14 | 显示全部楼层
    舟哥说说调用过程。

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


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

  • TA的每日心情
    不爽
    2016-11-15 12:25
  • 签到天数: 425 天

    连续签到: 1 天

    [LV.9]已臻大成

    8

    主题

    342

    帖子

    6万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    65402

    发表于 2016-4-14 22:19:24 | 显示全部楼层
    论坛这么冷清吗  大神都来了

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


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

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

    本版积分规则

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

    GMT+8, 2016-12-8 06:25 , Processed in 0.141662 second(s), 27 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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