• 淘宝店如何加入全屏轮播图片


    淘宝店如何加入全屏轮播图片?

    • |
    • 浏览:5779
    • |
    • 更新:2014-06-11 11:31
    • |
    • 标签: 淘宝 
    百度经验:jingyan.baidu.com

    开淘宝店的朋友,看到很多店铺有各式各样的轮播大图,很高端大气,您是否也想拥有一款属于自己的轮播图呢?今天我就交给大家如何制作全屏轮播图。

    百度经验:jingyan.baidu.com

    工具/原料

    • 电脑/网络

    百度经验:jingyan.baidu.com

    方法/步骤

    1. 1

      登录淘宝店。

      登录到您的淘宝店,点击“卖家中心”,进入到店铺管理页面。

    2. 2

      进入店铺装修。

      点击左侧“店铺装修”进入店铺装修页面。

    3. 3

      进入编辑框。

      添加好自定义页面后,点击页面编辑,进入正式页面编辑框。点击右上角“编辑”按钮,就可以进入到编辑区域。

    4. 4

      导入代码。

      进入编辑框后,点击下图画圈的地方,导入以下代码!

      以下为代码,请复制手工填入!

      <div class="layout grid-m0" data-componentid="231" data-context="bd" data-id="1041995155" data-prototypeid="231" data-widgetid="1041995155">

      <div class="col-main">

      <div class="main-wrap" data-modules="main" data-width="b950" style="overflow:visible;">

      <div class="skin-box tb-module">

      <s class="skin-box-tp"></s>

      <div class="skin-box-bd clear-fix">

      <div class="J_TWidget" data-widget-config="{&quot;effect&quot;: &quot;fade&quot;, &quot;circular&quot;: true ,&quot;contentCls&quot;:&quot;tanchudiv&quot;}" data-widget-type="Tabs" style="height:490px;overflow:hidden;">

      <div class="tanchudiv" style="height:500px;">

      <div class="footer-more-trigger" style="border-bottom:medium none;border-left:medium none;padding-bottom:0px;padding-left:0px;1920px;padding-right:0px;height:500px;border-top:medium none;top:auto;border-right:medium none;padding-top:0px;left:50%;">

      <div class="footer-more-trigger" style="border-bottom:medium none;border-left:medium none;padding-bottom:0px;padding-left:0px;1920px;padding-right:0px;height:500px;border-top:medium none;border-right:medium none;padding-top:0px;left:-50%;">

      <div class="J_TWidget" data-widget-config="{&quot;contentCls&quot;: &quot;taobao-kaidian-com&quot;,&quot;navCls&quot;: &quot;taobaokaidian-com&quot;,&quot;effect&quot;: &quot;scrollx&quot;,&quot;easing&quot;: &quot;easeOutStrong&quot;,&quot;prevBtnCls&quot;:&quot;prev&quot;,&quot;nextBtnCls&quot;:&quot;next&quot;,&quot;autoplay&quot;: true,&quot;viewSize&quot;:[1920],&quot;circular&quot;: true}" data-widget-type="Carousel">

      <div class="J_TWidget" data-widget-config="{&quot;trigger&quot;:&quot;.ux1920&quot;,&quot;align&quot;:{&quot;node&quot;:&quot;.ux1920&quot;,&quot;offset&quot;:[-480,0],&quot;points&quot;:[&quot;cc&quot;,&quot;cc&quot;]}}" data-widget-type="Popup" style="display:none;">

      <div class="prev" style="font-size:100px;cursor:pointer;opacity:0.5;">

      <span><img data-ks-lazyload="http://img03.taobaocdn.com/imgextra/i3/75979125/T2.nOlXbpcXXXXXXXX-75979125.png" title="上一屏" /></span>

      </div>

      </div>

      <div class="J_TWidget" data-widget-config="{&quot;trigger&quot;:&quot;.ux1920&quot;,&quot;align&quot;:{&quot;node&quot;:&quot;.ux1920&quot;,&quot;offset&quot;:[480,0],&quot;points&quot;:[&quot;cc&quot;,&quot;cc&quot;]}}" data-widget-type="Popup" style="display:none;">

      <div class="next" style="font-size:100px;cursor:pointer;opacity:0.5;">

      <span><img data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/75979125/T2d8dTXetdXXXXXXXX-75979125.png" title="下一屏" /></span>

      </div>

      </div>

      <div class="ux1920" style="padding-bottom:0px;margin:0px;padding-left:0px;1920px;padding-right:0px;height:500px;overflow:hidden;padding-top:0px;">

      <ul class="taobao-kaidian-com" style="padding-bottom:0px;margin:0px;padding-left:0px;1920px;padding-right:0px;height:500px;padding-top:0px;">

      <li style="padding-bottom:0px;margin:0px;padding-left:0px;1920px;padding-right:0px;height:500px;padding-top:0px;">

      <span><a data-attr-replace="百度经验 百度经验 百度经验 百度经验" href="http://www.taobao.com/?scene=taobao_shop" style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" target="_blank"><img data-ks-lazyload="http://img03.taobaocdn.com/imgextra/i3/683164596/TB2fwioXVXXXXawXpXXXXXXXXXX-683164596.jpg" border="0" height="500" width="1920" /></a></span>

      </li>

      <li style="padding-bottom:0px;margin:0px;padding-left:0px;1920px;padding-right:0px;height:500px;padding-top:0px;">

      <span><a data-attr-replace="百度经验 百度经验 百度经验 百度经验" href="http://www.taobao.com/?scene=taobao_shop" style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" target="_blank"><img data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/683164596/TB288WoXVXXXXXRXpXXXXXXXXXX-683164596.jpg" border="0" height="500" width="1920" /></a></span>

      </li>

      <li style="padding-bottom:0px;margin:0px;padding-left:0px;1920px;padding-right:0px;height:500px;padding-top:0px;">

      <span><a data-attr-replace="百度经验 百度经验 百度经验 百度经验" href="http://www.taobao.com/?scene=taobao_shop" style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" target="_blank"><img data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/683164596/TB2OhSnXVXXXXaiXpXXXXXXXXXX-683164596.jpg" border="0" height="500" width="1920" /></a></span>

      </li>

      <li style="padding-bottom:0px;margin:0px;padding-left:0px;1920px;padding-right:0px;height:500px;padding-top:0px;">

      <span><a data-attr-replace="百度经验 百度经验 百度经验 百度经验" href="http://www.taobao.com/?scene=taobao_shop" style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" target="_blank"><img data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/683164596/TB2CfypXVXXXXcvXXXXXXXXXXXX-683164596.jpg" border="0" height="500" width="1920" /></a></span>

      </li>

      </ul>

      </div>

      <div class="footer-more-trigger" style="border-bottom:medium none;border-left:medium none;padding-bottom:0px;padding-left:0px;padding-right:0px;border-top:medium none;border-right:medium none;padding-top:0px;left:50%;">

      <div class="footer-more-trigger" style="border-bottom:medium none;border-left:medium none;padding-bottom:0px;padding-left:0px;1920px;padding-right:0px;height:45px;border-top:medium none;top:444px;border-right:medium none;padding-top:0px;left:-960px;">

      <ul class="taobaokaidian-com" style="border-bottom:medium none;text-align:center;border-left:medium none;margin:0px auto;1920px;height:45px;border-top:medium none;border-right:medium none;">

      <li style="line-height:45px;margin:0px 5px;display:inline;cursor:pointer;">

      <span><img data-ks-lazyload="http://img03.taobaocdn.com/imgextra/i3/683164596/TB2fwioXVXXXXawXpXXXXXXXXXX-683164596.jpg" style="border-bottom:#33CCFF 2px solid;border-left:#33CCFF 2px solid;margin:5px 0px;vertical-align:middle;border-top:#33CCFF 2px solid;border-right:#33CCFF 2px solid;" border="0" height="48" width="186" /></span>

      </li>

      <li style="line-height:45px;margin:0px 5px;display:inline;cursor:pointer;">

      <span><img data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/683164596/TB288WoXVXXXXXRXpXXXXXXXXXX-683164596.jpg" style="border-bottom:#33CCFF 2px solid;border-left:#33CCFF 2px solid;margin:5px 0px;vertical-align:middle;border-top:#33CCFF 2px solid;border-right:#33CCFF 2px solid;" border="0" height="48" width="186" /></span>

      </li>

      <li style="line-height:45px;margin:0px 5px;display:inline;cursor:pointer;">

      <span><img data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/683164596/TB2OhSnXVXXXXaiXpXXXXXXXXXX-683164596.jpg" style="border-bottom:#33CCFF 2px solid;border-left:#33CCFF 2px solid;margin:5px 0px;vertical-align:middle;border-top:#33CCFF 2px solid;border-right:#33CCFF 2px solid;" border="0" height="48" width="186" /></span>

      </li>

      <li style="line-height:45px;margin:0px 5px;display:inline;cursor:pointer;">

      <span><img data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/683164596/TB2CfypXVXXXXcvXXXXXXXXXXXX-683164596.jpg" style="border-bottom:#33CCFF 2px solid;border-left:#33CCFF 2px solid;margin:5px 0px;vertical-align:middle;border-top:#33CCFF 2px solid;border-right:#33CCFF 2px solid;" border="0" height="48" width="186" /></span>

      </li>

      </ul>

      </div>

      </div>

      </div>

      </div>

      </div>

      <ul class="ks-switchable-nav" style="display:none;">

      </ul>

      </div>

      </div>

      </div>

      </div>

      </div>

      </div>

      </div>

    5. 5

      大功告成。

      点击确定,大功告成,您的全屏轮播图马上出现了!点击右上角的“发布”马上观看您的轮播图!

      淘宝店如何加入全屏轮播图片?
  • 相关阅读:
    python装饰器的4种类型:函数装饰函数、函数装饰类、类装饰函数、类装饰类
    python中将函数赋值给变量时需要注意的一些问题
    python获得命令行输入的参数
    Python实现语音识别和语音合成
    pymysql
    Matplotlib
    级联,映射
    处理丢失数据
    Numpy,Pandas,Matplotlib
    crawlSpider,分布式爬虫,增量式爬虫
  • 原文地址:https://www.cnblogs.com/xiamicomeon/p/4244700.html
Copyright © 2020-2023  润新知