淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 3168|回复: 18
收起左侧

仿维界男鞋首页高端轮播,天猫店铺C店均可使用。

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

    2015-7-8 17:56
  • 签到天数: 53 天

    连续签到: 1 天

    [LV.5]略有小成

    8

    主题

    55

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    18105

    淘宝皇冠店美工天猫美工最佳新人

    QQ
    发表于 2015-7-4 16:58:30 | 显示全部楼层 |阅读模式
    本帖最后由 Meledy 于 2015-7-4 17:11 编辑

    看到维界男鞋店轮播的启发。自己动手做了个类似的。天猫店铺 C店均可使用。
    1. <blockquote><div class="anxin" data-title="安心设计" style="width:950px;height:600px;">
    复制代码
    上面的是适合C店的 查看效果请移步》http://shop106333812.taobao.com/?spm=0.0.0.0.FEuEIs

    天猫店铺请看下面
    1. <div class="Anxin" data-title="安心设计" style="width:990px;height:600px;">
    2.   <div class="sn-simple-logo" style="width:990px;height:600px;border:0;padding:0;top:auto;left:auto;background:none;">
    3.     <div class="sn-simple-logo" style="width:1920px;height:600px;border:0;padding:0;top:0;left:0;background:none;">
    4.       <div class="sn-simple-logo" style="background:none;border:0;padding:0;width:1920px;height:600px;top:auto;left:-465px;background-repeat:no-repeat;background-position:center center;background-attachment:scroll;">
    5.          
    6.       </div>
    7.       <div class="sn-simple-logo" style="z-index:2;background:none;top:0px;left:-458px;width:1920px;height:600px;border:0;padding:0;">
    8.         <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{"nextBtnCls":"next_p","circular":true,"duration":"0.5","activeTriggerCls":"selected","easing":"backOut","effect":"scrolly","navCls":"ma_p","prevBtnCls":"prev_p","contentCls":"ma_content_p","autoplay":true}" style="width:490px;height:300px;">
    9.           <div class="ma_box" style="width:1920px;height:600px;overflow:hidden;position:relative;">
    10.             <div class="ma_content_p">
    11.               <div style="width:1920px;height:600px;overflow:hidden;display:block;opacity:1;z-index:1;">
    12.                 <a target="_blank"><img src="//gdp.alicdn.com/imgextra/i4/675511695/TB2RBQHdpXXXXcqXXXXXXXXXXXX-675511695.jpg" style="width:1920px;height:600px;" /></a>
    13.               </div>
    14.               <div style="width:1920px;height:600px;overflow:hidden;display:block;opacity:1;z-index:1;">
    15.                 <a target="_blank"><img src="//gdp.alicdn.com/imgextra/i4/675511695/TB2RBQHdpXXXXcqXXXXXXXXXXXX-675511695.jpg" style="width:1920px;height:600px;" /></a>
    16.               </div>
    17.               <div style="width:1920px;height:600px;overflow:hidden;display:block;opacity:1;z-index:1;">
    18.                 <a target="_blank"><img src="//gdp.alicdn.com/imgextra/i4/675511695/TB2RBQHdpXXXXcqXXXXXXXXXXXX-675511695.jpg" style="width:1920px;height:600px;" /></a>
    19.               </div>
    20.             </div>
    21.           </div>
    22.           <ul class="ma_p" style="display:none;">
    23.             <li>
    24.               0
    25.             </li>
    26.             <li>
    27.               1
    28.             </li>
    29.             <li>
    30.               2
    31.             </li>
    32.           </ul>
    33.           <div class="prev_p sn-simple-logo" style="display:block;background:none;border:0;padding:0;z-index:99;left:1264px;top:560px;width:40px;height:40px;background:url(//gdp.alicdn.com/imgextra/i4/867101640/TB2L.RNapXXXXclXXXXXXXXXXXX-867101640.png);cursor:pointer;">
    34.             
    35.           </div>
    36.           <div class="next_p sn-simple-logo" style="display:block;background:none;border:0;padding:0;z-index:99;left:1303px;top:560px;width:40px;height:40px;background:url(//gdp.alicdn.com/imgextra/i1/867101640/TB2lIXKapXXXXaWXpXXXXXXXXXX-867101640.png);cursor:pointer;">
    37.             
    38.           </div>
    39.         </div>
    40.       </div>
    41.       <div class="sn-simple-logo" data-title="鼠标滑动效果" style="z-index:3;top:0px;left:-41px;width:273px;height:527px;border:0;padding:0;background:none;overflow:hidden;">
    42.         <div class="subLogo" style="width:273px;height:527px;float:none;padding:0;right:auto;top:0;left:0;margin:0;border:0;border-radius:0;background:none;">
    43.           <a style="padding:0;height:auto;background:none;" target="_blank"><img src="//gdp.alicdn.com/imgextra/i3/675511695/TB2v2sxdpXXXXbHXpXXXXXXXXXX-675511695.jpg" width="273px" height="527px" alt="" /></a><span class="subLogo-bd" style="width:273px;height:527px;border:0;padding:0;background:none;bottom:auto;right:auto;top:0;left:0;border-radius:0;"><a style="padding:0;height:auto;background:none;" target="_blank"><img src="//gdp.alicdn.com/imgextra/i3/675511695/TB2v2sxdpXXXXbHXpXXXXXXXXXX-675511695.jpg" /></a></span>
    44.         </div>
    45.       </div>
    46.       <div class="sn-simple-logo" data-title="鼠标滑动效果" style="z-index:4;top:123px;left:-40px;width:273px;height:54px;border:0;padding:0;background:none;overflow:hidden;">
    47.         <div class="subLogo" style="width:273px;height:54px;float:none;padding:0;right:auto;top:0;left:0;margin:0;border:0;border-radius:0;background:none;">
    48.           <a style="padding:0;height:auto;background:none;" target="_blank"><img src="//gdp.alicdn.com/imgextra/i3/675511695/TB2_MsCdpXXXXX4XpXXXXXXXXXX-675511695.jpg" width="273px" height="54px" alt="" /></a><span class="subLogo-bd" style="width:273px;height:54px;border:0;padding:0;background:none;bottom:auto;right:auto;top:0;left:0;border-radius:0;"><a style="padding:0;height:auto;background:none;" target="_blank"><img src="//gdp.alicdn.com/imgextra/i3/675511695/TB2sFZFdpXXXXXsXpXXXXXXXXXX-675511695.gif" /></a></span>
    49.         </div>
    50.       </div>
    51.       <div class="sn-simple-logo" data-title="鼠标滑动效果" style="z-index:5;top:178px;left:-40px;width:273px;height:54px;border:0;padding:0;background:none;overflow:hidden;">
    52.         <div class="subLogo" style="width:273px;height:54px;float:none;padding:0;right:auto;top:0;left:0;margin:0;border:0;border-radius:0;background:none;">
    53.           <a style="padding:0;height:auto;background:none;" target="_blank"><img src="//gdp.alicdn.com/imgextra/i4/675511695/TB2iOstdpXXXXcwXpXXXXXXXXXX-675511695.jpg" width="273px" height="54px" alt="" /></a><span class="subLogo-bd" style="width:273px;height:54px;border:0;padding:0;background:none;bottom:auto;right:auto;top:0;left:0;border-radius:0;"><a style="padding:0;height:auto;background:none;" target="_blank"><img src="//gdp.alicdn.com/imgextra/i3/675511695/TB2zZgzdpXXXXbgXpXXXXXXXXXX-675511695.gif" /></a></span>
    54.         </div>
    55.       </div>
    56.       <div class="sn-simple-logo" data-title="鼠标滑动效果" style="z-index:6;top:232px;left:-40px;width:273px;height:55px;border:0;padding:0;background:none;overflow:hidden;">
    57.         <div class="subLogo" style="width:273px;height:55px;float:none;padding:0;right:auto;top:0;left:0;margin:0;border:0;border-radius:0;background:none;">
    58.           <a style="padding:0;height:auto;background:none;" target="_blank"><img src="//gdp.alicdn.com/imgextra/i2/675511695/TB265sDdpXXXXX4XpXXXXXXXXXX-675511695.jpg" width="273px" height="55px" alt="" /></a><span class="subLogo-bd" style="width:273px;height:55px;border:0;padding:0;background:none;bottom:auto;right:auto;top:0;left:0;border-radius:0;"><a style="padding:0;height:auto;background:none;" target="_blank"><img src="//gdp.alicdn.com/imgextra/i3/675511695/TB2VmIYdpXXXXXcXXXXXXXXXXXX-675511695.gif" /></a></span>
    59.         </div>
    60.       </div>
    61.       <div class="sn-simple-logo" data-title="鼠标滑动效果" style="z-index:7;top:284px;left:-40px;width:273px;height:53px;border:0;padding:0;background:none;overflow:hidden;">
    62.         <div class="subLogo" style="width:273px;height:53px;float:none;padding:0;right:auto;top:0;left:0;margin:0;border:0;border-radius:0;background:none;">
    63.           <a style="padding:0;height:auto;background:none;" target="_blank"><img src="//gdp.alicdn.com/imgextra/i2/675511695/TB2wgIudpXXXXctXpXXXXXXXXXX-675511695.jpg" width="273px" height="53px" alt="" /></a><span class="subLogo-bd" style="width:273px;height:53px;border:0;padding:0;background:none;bottom:auto;right:auto;top:0;left:0;border-radius:0;"><a style="padding:0;height:auto;background:none;" target="_blank"><img src="//gdp.alicdn.com/imgextra/i3/675511695/TB2Q87LdpXXXXb9XXXXXXXXXXXX-675511695.gif" /></a></span>
    64.         </div>
    65.       </div>
    66.     </div>
    67.   </div>
    68. </div>
    复制代码
    天猫的需要把下面这个添加到导航内
    .dm_bfx3k a{display:block;width:100%;}.dm_bfx3k a:hover img{top:0px;transition:all 0.35s ease-in-out;opacity:100;filter:progidXImageTransform.Microsoft.Alpha(opacity=100);}
    .dm_bfx3k .imgbox img{position:relative;top:0;transition:all 0.35s ease-in-out;opacity:0;filter:progidXImageTransform.Microsoft.Alpha(opacity=0);}

    天猫效果图不方便发店铺,所以大家看GIF图片。
    做的不好请轻喷。
    觉得做的不错点个赞.谢谢!
    申明这个没有抄袭任何人,如有雷同纯属巧合。
    代码乱了,自己下载看吧!

    动态效果

    动态效果

    C店轮播.rar

    1.21 KB, 下载次数: 34, 下载积分: 美工币 -2

    C店的

    天猫店轮播.rar

    1.34 KB, 下载次数: 31, 下载积分: 美工币 -2

    天猫店铺的

    评分

    参与人数 1美工币 +1 收起 理由
    snrtmnmnyk + 1 乐于助人!

    查看全部评分

    睡觉也是一门艺术,谁也不能阻止我对艺术的追求~!
  • TA的每日心情
    抱抱
    昨天 08:30
  • 签到天数: 674 天

    连续签到: 1 天

    [LV.9]已臻大成

    26

    主题

    2626

    帖子

    18万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    184885

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

    QQ
    发表于 2015-7-4 17:30:57 | 显示全部楼层

    回帖奖励 +10

    感谢分享
    QQ交流群  107102001
  • TA的每日心情
    思考
    2016-9-11 15:54
  • 签到天数: 206 天

    连续签到: 1 天

    [LV.7]炉火纯青

    24

    主题

    1028

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    32979

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

    QQ
    发表于 2015-7-4 19:42:12 | 显示全部楼层
    抢板凳!感谢分享!
    即使睁开眼睛也看不见,我的心在黑暗中——林疋火昱
  • TA的每日心情
    委屈
    2016-7-23 03:35
  • 签到天数: 89 天

    连续签到: 1 天

    [LV.6]渐入佳境

    10

    主题

    477

    帖子

    8万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    85930

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

    发表于 2015-7-4 19:57:44 | 显示全部楼层
    标题是仿某店轮播,为什么贴内又强调绝非抄袭。。。。

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


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

  • TA的每日心情
    加油
    2016-10-27 09:57
  • 签到天数: 146 天

    连续签到: 1 天

    [LV.7]炉火纯青

    37

    主题

    310

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    19677

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

    QQ
    发表于 2015-7-4 22:00:51 | 显示全部楼层
    左边的地方都被挡住了。能展示的只有右边那只鞋

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


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

  • TA的每日心情
    抱抱
    2016-9-17 16:30
  • 签到天数: 386 天

    连续签到: 2 天

    [LV.9]已臻大成

    11

    主题

    915

    帖子

    7万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    78464

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

    QQ
    发表于 2015-7-5 09:35:03 | 显示全部楼层
    楼主说的话  自相矛盾了
    向日葵告诉我,只要面对着阳光努力向上,日子就会变得单纯而美好。
  • TA的每日心情

    2015-7-8 17:56
  • 签到天数: 53 天

    连续签到: 1 天

    [LV.5]略有小成

    8

    主题

    55

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    18105

    淘宝皇冠店美工天猫美工最佳新人

    QQ
     楼主| 发表于 2015-7-8 10:15:51 | 显示全部楼层
    Aising 发表于 2015-7-4 19:57
    标题是仿某店轮播,为什么贴内又强调绝非抄袭。。。。

    如果你觉得仿造和抄袭是一样的意思我也就不解释了。

    睡觉也是一门艺术,谁也不能阻止我对艺术的追求~!
  • TA的每日心情

    2015-7-8 17:56
  • 签到天数: 53 天

    连续签到: 1 天

    [LV.5]略有小成

    8

    主题

    55

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    18105

    淘宝皇冠店美工天猫美工最佳新人

    QQ
     楼主| 发表于 2015-7-8 10:17:12 | 显示全部楼层
    暖心忆 发表于 2015-7-5 09:35
    楼主说的话  自相矛盾了

    口才不好,只会默默的做事。看似矛盾的话也许其意思是不同的。

    睡觉也是一门艺术,谁也不能阻止我对艺术的追求~!
  • TA的每日心情

    2015-7-8 17:56
  • 签到天数: 53 天

    连续签到: 1 天

    [LV.5]略有小成

    8

    主题

    55

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    18105

    淘宝皇冠店美工天猫美工最佳新人

    QQ
     楼主| 发表于 2015-7-8 10:18:54 | 显示全部楼层
    小饰 发表于 2015-7-4 22:00
    左边的地方都被挡住了。能展示的只有右边那只鞋

    那是因为我随便拿一张图做的演示。

    睡觉也是一门艺术,谁也不能阻止我对艺术的追求~!
  • TA的每日心情
    抱抱
    2016-9-17 16:30
  • 签到天数: 386 天

    连续签到: 2 天

    [LV.9]已臻大成

    11

    主题

    915

    帖子

    7万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    78464

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

    QQ
    发表于 2015-7-9 08:44:56 | 显示全部楼层
    Meledy 发表于 2015-7-8 10:17
    口才不好,只会默默的做事。看似矛盾的话也许其意思是不同的。

    楼主好机智

    向日葵告诉我,只要面对着阳光努力向上,日子就会变得单纯而美好。
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

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

    GMT+8, 2016-12-5 04:31 , Processed in 0.124469 second(s), 23 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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