淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1078|回复: 31
收起左侧

[装修相关] 问一下淘宝能不能做固定背景轮播

[复制链接]
  • TA的每日心情
    加油
    7 小时前
  • 签到天数: 92 天

    连续签到: 1 天

    [LV.6]渐入佳境

    17

    主题

    139

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    14872

    发表于 2016-5-25 14:50:20 | 显示全部楼层 |阅读模式
    最近在自学代码,想问一下淘宝能不能做1920px固定背景里面的950px海报轮播,就像七格格天猫旗舰店里面的那种,我用仅有的代码知识盒子套盒子,放到自定义模块里有效果,但预览发布就没有效果了。不知道我有没有理解错。

    1. <div style="height:526px;">
    2.   <div class="footer-more-trigger" style="left:50%;top:auto;border:none;padding:0;">
    3.     <div class="footer-more-trigger" style="left:-960px;top:auto;border:none;padding:0;">
    4.       <div style="height:526px;background:url(//gdp.alicdn.com/imgextra/i1/1899690007/TB203EdppXXXXaDXpXXXXXXXXXX_!!1899690007.jpg) no-repeat;">
    5.         <div style="width:950px;height:420px;position:relative;left:485px;top:53px;">
    6.           <div class="MaGong" data-title="来自淘宝代码生成网www.001daima.com" data-time="1464157246" style="height:420px;">
    7.             <div class="footer-more footer-more-trigger" style="left:auto;right:auto;width:950px;height:420px;top:auto;padding:0;border:none;z-index:1;background:none;">
    8.               <div class="footer-more footer-more-trigger" style="left:0px;top:0px;height:420px;width:950px;border:none;padding:0;background:none;">
    9.                 <div data-widget-config="{"easing":"easeOutStrong","interval":4,"navCls":"ma_na","contentCls":"macontent","prevBtnCls":"Mprev","autoplay":true,"nextBtnCls":"Mnext","circular":true,"duration":1,"activeTriggerCls":"hidden","effect":"scrollx","viewSize":[950],"triggerType":"mouse"}" data-widget-type="Carousel" class="J_TWidget">
    10.                   <div class="J_TWidget Mprev" data-widget-config="{"trigger":".PE","align":{"node":".PE","offset":[-510,0],"points":["cc","cc"]}}" data-widget-type="Popup" style="display:none;">
    11.                     <div class="Mprev" style="font-size:100px;cursor:pointer;">
    12.                        <img src="//gdp.alicdn.com/imgextra/i4/126112166/TB2EaKBaXXXXXXxXXXXXXXXXXXX-126112166.png" />
    13.                     </div>
    14.                   </div>
    15.                   <div class="J_TWidget Mnext" data-widget-config="{"trigger":".PE","align":{"node":".PE","offset":[510,0],"points":["cc","cc"]}}" data-widget-type="Popup" style="display:none;">
    16.                     <div class="Mnext" style="font-size:100px;cursor:pointer;">
    17.                        <img src="//gdp.alicdn.com/imgextra/i2/126112166/TB2s_WAaXXXXXXQXXXXXXXXXXXX-126112166.png" />
    18.                     </div>
    19.                   </div>
    20.                   <div class="PE" style="height:420px;width:950px;overflow:hidden;padding:0px;margin:0px;border:0;background:none;">
    21.                     <ul class="macontent" style="height:420px;width:950px;padding:0px;margin:0px;">
    22.                       <li class="item">
    23.                          <img src="//gdp.alicdn.com/imgextra/i3/1899690007/TB2_of1ppXXXXcRXpXXXXXXXXXX_!!1899690007.jpg" />
    24.                       </li>
    25.                       <li class="item">
    26.                          <img src="//gdp.alicdn.com/imgextra/i4/1899690007/TB2otEappXXXXa_XpXXXXXXXXXX_!!1899690007.jpg" />
    27.                       </li>
    28.                     </ul>
    29.                   </div>
    30.                   <div class="footer-more footer-more-trigger" style="width:950px;height:45px;left:auto;top:auto;bottom:0;padding:0px;border:none;background:none;display:block;">
    31.                     <div class="footer-more footer-more-trigger" style="z-index:99;width:950px;height:45px;padding:0px;border:none;left:auto;top:auto;background:none;">
    32.                       <ul class="ma_na" style="width:950px;height:45px;margin:0 auto;text-align:center;border:none;color:#FFF;">
    33.                         <li class="hidden" style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;">
    34.                            ●
    35.                         </li>
    36.                         <li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;">
    37.                            ●
    38.                         </li>
    39.                       </ul>
    40.                     </div>
    41.                     <div class="footer-more footer-more-trigger" style="z-index:98;width:950px;height:45px;padding:0px;border:none;left:auto;top:auto;background:none;background:none;">
    42.                       <ul class="ma_nb" style="width:950px;height:45px;margin:0 auto;text-align:center;border:none;color:#333333;">
    43.                         <li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;">
    44.                            ●
    45.                         </li>
    46.                         <li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;">
    47.                            ●
    48.                         </li>
    49.                       </ul>
    50.                     </div>
    51.                   </div>
    52.                 </div>
    53.               </div>
    54.             </div>
    55.           </div>
    56.         </div>
    57.       </div>
    58.     </div>
    59.   </div>
    60. </div>
    复制代码



    QQ截图20160525144200.jpg
    练手:https://shop152513486.taobao.com/?spm=a230r.7195193.1997079397.1.KkGsGq
  • TA的每日心情
    加油
    7 小时前
  • 签到天数: 92 天

    连续签到: 1 天

    [LV.6]渐入佳境

    17

    主题

    139

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    14872

     楼主| 发表于 2016-5-25 14:51:16 | 显示全部楼层



    求大神解答

    练手:https://shop152513486.taobao.com/?spm=a230r.7195193.1997079397.1.KkGsGq
  • TA的每日心情
    大哭
    2016-3-29 11:51
  • 签到天数: 25 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    61

    主题

    697

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    11301

    天猫美工

    QQ
    发表于 2016-5-25 15:26:23 | 显示全部楼层

    回帖奖励 +30

    弄好发一份给我谢谢~~

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


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

  • TA的每日心情
    思考
    2016-6-12 14:35
  • 签到天数: 125 天

    连续签到: 1 天

    [LV.7]炉火纯青

    7

    主题

    277

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    38036

    最佳新人宣传达人

    发表于 2016-5-25 15:30:39 | 显示全部楼层

    回帖奖励 +30

    淘宝用天猫的代码?不可以的吧
    还是那么帅......
  • TA的每日心情
    加油
    7 小时前
  • 签到天数: 92 天

    连续签到: 1 天

    [LV.6]渐入佳境

    17

    主题

    139

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    14872

     楼主| 发表于 2016-5-25 15:32:40 | 显示全部楼层
    zwl 发表于 2016-5-25 15:30
    淘宝用天猫的代码?不可以的吧

    没有用天猫代码哦,都是我自己敲出来和套上去的代码~

    练手:https://shop152513486.taobao.com/?spm=a230r.7195193.1997079397.1.KkGsGq
  • TA的每日心情
    加油
    6 小时前
  • 签到天数: 1099 天

    连续签到: 1 天

    [LV.10]功行圆满

    11

    主题

    714

    帖子

    27万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    279451

    发表于 2016-5-25 15:56:38 | 显示全部楼层

    回帖奖励 +30

    1. <div style="height:526px;">
    2.   <div class="footer-more-trigger" style="left:50%;top:auto;border:none;padding:0;">
    3.     <div class="footer-more-trigger" style="left:-960px; width:1920px;top:auto;border:none;padding:0;">
    4.       <div style="height:526px;background:url(http://gdp.alicdn.com/imgextra/i1/1899690007/TB203EdppXXXXaDXpXXXXXXXXXX_!!1899690007.jpg) no-repeat;">
    5.         <div style="width:950px;height:420px;position:relative;left:485px;top:53px;">
    6.           <div class="MaGong" data-title="来自淘宝代码生成网www.001daima.com" data-time="1464157246" style="height:420px;">
    7.             <div class="footer-more footer-more-trigger" style="left:auto;right:auto;width:950px;height:420px;top:auto;padding:0;border:none;z-index:1;background:none;">
    8.               <div class="footer-more footer-more-trigger" style="left:0px;top:0px;height:420px;width:950px;border:none;padding:0;background:none;">
    9.                 <div data-widget-config="{'easing':'easeOutStrong','interval':4,'navCls':'ma_na','contentCls':'macontent','prevBtnCls':'Mprev','autoplay':true,'nextBtnCls':'Mnext','circular':true,'duration':1,'activeTriggerCls':'hidden','effect':'scrollx','viewSize':[950],'triggerType':'mouse'}" data-widget-type="Carousel" class="J_TWidget">
    10.                   <div class="J_TWidget Mprev" data-widget-config="{'trigger':'.PE','align':{'node':'.PE','offset':[-510,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">
    11.                     <div class="Mprev" style="font-size:100px;cursor:pointer;">
    12.                       <img src="http://gdp.alicdn.com/imgextra/i4/126112166/TB2EaKBaXXXXXXxXXXXXXXXXXXX-126112166.png" />
    13.                     </div>
    14.                   </div>
    15.                   <div class="J_TWidget Mnext" data-widget-config="{'trigger':'.PE','align':{'node':'.PE','offset':[510,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">
    16.                     <div class="Mnext" style="font-size:100px;cursor:pointer;">
    17.                       <img src="http://gdp.alicdn.com/imgextra/i2/126112166/TB2s_WAaXXXXXXQXXXXXXXXXXXX-126112166.png" />
    18.                     </div>
    19.                   </div>
    20.                   <div class="PE" style="height:420px;width:950px;overflow:hidden;padding:0px;margin:15px 0 0 0;border:0;background:none;">
    21.                     <ul class="macontent" style="height:420px;width:950px;padding:0px;margin:0px;">
    22.                       <li class="item">
    23.                         <img src="http://gdp.alicdn.com/imgextra/i3/1899690007/TB2_of1ppXXXXcRXpXXXXXXXXXX_!!1899690007.jpg" />
    24.                       </li>
    25.                       <li class="item">
    26.                         <img src="http://gdp.alicdn.com/imgextra/i4/1899690007/TB2otEappXXXXa_XpXXXXXXXXXX_!!1899690007.jpg" />
    27.                       </li>
    28.                     </ul>
    29.                   </div>
    30.                   <div class="footer-more footer-more-trigger" style="width:950px;height:45px;left:auto;top:auto;bottom:0;padding:0px;border:none;background:none;display:block;">
    31.                     <div class="footer-more footer-more-trigger" style="z-index:99;width:950px;height:45px;padding:0px;border:none;left:auto;top:auto;background:none;">
    32.                       <ul class="ma_na" style="width:950px;height:45px;margin:0 auto;text-align:center;border:none;color:#FFF;">
    33.                         <li class="hidden" style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;"> ● </li>
    34.                         <li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;"> ● </li>
    35.                       </ul>
    36.                     </div>
    37.                     <div class="footer-more footer-more-trigger" style="z-index:98;width:950px;height:45px;padding:0px;border:none;left:auto;top:auto;background:none;background:none;">
    38.                       <ul class="ma_nb" style="width:950px;height:45px;margin:0 auto;text-align:center;border:none;color:#333333;">
    39.                         <li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;"> ● </li>
    40.                         <li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;"> ● </li>
    41.                       </ul>
    42.                     </div>
    43.                   </div>
    44.                 </div>
    45.               </div>
    46.             </div>
    47.           </div>
    48.         </div>
    49.       </div>
    50.     </div>
    51.   </div>
    52. </div>
    复制代码

    试试看,调用的组件格式不对,单引号被改成双引号了。
    第三行也没有定义宽度。
    主要就是这两个问题

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


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

  • TA的每日心情
    加油
    7 小时前
  • 签到天数: 92 天

    连续签到: 1 天

    [LV.6]渐入佳境

    17

    主题

    139

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    14872

     楼主| 发表于 2016-5-25 16:08:54 | 显示全部楼层
    X_in 发表于 2016-5-25 15:56
    试试看,调用的组件格式不对,单引号被改成双引号了。
    第三行也没有定义宽度。
    主要就是这两个问题

    腻害腻害~~~感谢!!!~~试过了,可以,效果一致!!我自己刚刚也再试了一下,效果没你这个好,会露出固定的背景。
    练手:https://shop152513486.taobao.com/?spm=a230r.7195193.1997079397.1.KkGsGq
  • TA的每日心情
    大哭
    昨天 19:18
  • 签到天数: 651 天

    连续签到: 4 天

    [LV.9]已臻大成

    37

    主题

    2231

    帖子

    13万

    积分

    高级会员

    阅读权限: 50

    【单身狗认证】

    Rank: 8Rank: 8

    积分
    138218

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

    QQ
    发表于 2016-5-25 16:09:58 | 显示全部楼层

    回帖奖励 +30

    大神已解答!!!
  • TA的每日心情
    抱抱
    昨天 10:18
  • 签到天数: 160 天

    连续签到: 1 天

    [LV.7]炉火纯青

    27

    主题

    919

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    25627

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

    发表于 2016-5-25 16:14:31 | 显示全部楼层

    回帖奖励 +30

    求固定背景轮播代码
    其实我只是一枚小小的小白  大神不必在意啦~~
  • TA的每日心情
    臭美
    2016-7-6 14:20
  • 签到天数: 52 天

    连续签到: 1 天

    [LV.5]略有小成

    13

    主题

    557

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    30376

    热心会员最佳新人

    发表于 2016-5-25 16:19:17 | 显示全部楼层

    回帖奖励 +30

    还是大神厉害

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


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

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

    本版积分规则

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

    GMT+8, 2016-12-5 18:39 , Processed in 0.127547 second(s), 22 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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