淘宝店如何加入全屏轮播图片
淘宝店如何加入全屏轮播图片？
- |
- 浏览：5779
- |
- 更新：2014-06-11 11:31
- |
- 标签： 淘宝
1
2
3
4
5
分步阅读
开淘宝店的朋友，看到很多店铺有各式各样的轮播大图，很高端大气，您是否也想拥有一款属于自己的轮播图呢？今天我就交给大家如何制作全屏轮播图。
百度经验:jingyan.baidu.com
工具/原料
电脑/网络
百度经验:jingyan.baidu.com
方法/步骤
- 1
登录淘宝店。
登录到您的淘宝店，点击“卖家中心”，进入到店铺管理页面。
步骤阅读
- 2
进入店铺装修。
点击左侧“店铺装修”进入店铺装修页面。
步骤阅读
- 3
进入编辑框。
添加好自定义页面后，点击页面编辑，进入正式页面编辑框。点击右上角“编辑”按钮，就可以进入到编辑区域。
步骤阅读
- 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="{"effect": "fade", "circular": true ,"contentCls":"tanchudiv"}" 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;width: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;width: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="{"contentCls": "taobao-kaidian-com","navCls": "taobaokaidian-com","effect": "scrollx","easing": "easeOutStrong","prevBtnCls":"prev","nextBtnCls":"next","autoplay": true,"viewSize":[1920],"circular": true}" data-widget-type="Carousel">
<div class="J_TWidget" data-widget-config="{"trigger":".ux1920","align":{"node":".ux1920","offset":[-480,0],"points":["cc","cc"]}}" 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="{"trigger":".ux1920","align":{"node":".ux1920","offset":[480,0],"points":["cc","cc"]}}" 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;width: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;width:1920px;padding-right:0px;height:500px;padding-top:0px;">
<li style="padding-bottom:0px;margin:0px;padding-left:0px;width: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;width: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;width: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;width: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;width: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;width: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
大功告成。
点击确定，大功告成，您的全屏轮播图马上出现了！点击右上角的“发布”马上观看您的轮播图！
转载于:https://www.cnblogs.com/xiamicomeon/p/4244700.html
淘宝店如何加入全屏轮播图片相关推荐
- slick.js基于jQuery全屏轮播插件
下载地址基于slick.js轮播插件实现的全屏轮播效果,支持图片和文字动画显示效果. dd:
- jquery，js实现手机端全屏轮播图手动滑动+自动切换(autoplay)
jquery,js实现手机端全屏轮播图 使用了swiper插件,可手动滑动切换也可自动切换 效果图 css代码 只是作为参考,可以根据你自己的需求去改,这里我用的是上下两张背景图,图自行修改 html ...
- jquery导航图片全屏滚动、首页全屏轮播图，各式相册
1.目录结构 源码 project css js image index1 index2 index3 index4 index.html index1到index4分为四个iframe标签引入的可单 ...
- 苹果cmsV10添加全屏幻灯图、全屏轮播图教程
使用全屏模板的小伙伴们很多都不会把首页的幻灯图片设置成全屏显示,今天就给大家讲解下幻灯图片全屏的设置教程. 1,设置全屏有2种途径:A是直接上传全屏的图片,B是通过苹果cms系统后台编辑视频的&quo ...
- 实现全屏轮播，并且轮播div中的文字盒子一直自动垂直居中
效果如下: 直接上代码了: 说明:轮播图基于swiper.js,自行下载.css在最后 <!DOCTYPE html> <htmllang="en"> &l ...
- html全屏轮播图插件,jQuery全屏3D轮播图插件
jQuery.PageScroll3D是一款jQuery全屏3D轮播图插件.该jquery轮播图插件采用响应式设计,可以在垂直方向上制作出类似立方体滚动的3d轮播图效果. 使用方法 在页面中引入jqu ...
- 纯css自动全屏轮播图html代码,纯CSS3代码实现简单的图片轮播
以4张图片为例: 1.基本布局: 将4张图片左浮动横向并排放入一个div容器内,图片设置统一尺寸,div宽度设置4个图片的总尺寸,然后放入相框容器div, 相框设置1个图片的大小并设置溢出隐藏,以保证 ...
- 微信小程序全屏轮播（仿北京环球）
空闲时间看见北京环球的微信小程序,感觉首页效果挺好看的,所以就动手做了一下.仅供参考! 文章目录 1.效果预览 2.代码实现 2.1 HTML 2.2 CSS 2.3 JSON 2.4 JS 1.效果 ...
- SuperSlidev2.1 轮播图片和无缝滚动
使用方法,狠狠的点击下面链接 http://down.admin5.com/demo/code_pop/18/562/index.html 简单使用方法如下 html <div class=&q ...
- 天猫店群比淘宝店群好做吗？同是无货源差距为何那么大，个人分享
天猫店群比淘宝店群好做吗?同是无货源差距为何那么大,个人分享 大家好,我是电商君君. 今天不给大家分享运营干货,因为最近有朋友私信问, 天猫店群和淘宝店群的本质区别和产出情况,以及建议做那个平台的店群 ...
最新文章
- 计算机硬件带软件怎么入账,小企业购置计算机硬件所附带的、未单独计价的软件,通过( )科目核算。A.无形资产B.固定资产C.在 - 赏学吧...
- Notepad++ 异常崩溃 未保存的new *文件列表没了怎么办？
- Tesseract Ocr文字识别
- c语言边界条件的设置,求解能不能用c或c++语言实现下面的约束条件
- 剑指offer面试题04. 二维数组中的查找（Array）
- unordered_map 简介
- 删除链表中的某个结点
- 大学生创新创业计划-2019
- pano2vr 制作交互热点模板时常显示文字
- YOLO在服务器上训练，日志文件中不显示GFLOPs参数的问题
- hdu 2167 Pebbles 状态压缩dp
- 【U8】U8V12.5新增部门档案，保存提示：系统忙，稍后再试！
- [Android 9][markw] 红米4高配版 刷入Lineage OS 16与OpenGApps
- 旧约圣经对基督（弥赛亚）的预言
- 水果店开业前尝试做地推活动
- linux配置命令的各列解释,很实用的linux运维常用命令及知识 | 旺旺知识库
- 海信android4.4.2电视怎么投屏,海信电视怎么投屏
- Prim算法java实现
- 推荐一款管理系统专用 低 代码工具，一天开发一个系统不是梦
- 屏蔽第三方网站中的百度广告和百度推荐