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

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

|
浏览：5779
|
更新：2014-06-11 11:31
|
标签：淘宝

分步阅读

百度经验:jingyan.baidu.com

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

百度经验: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
大功告成。

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

时间： 2024-12-08 16:30:04

淘宝店如何加入全屏轮播图片的相关文章

淘宝店铺装修如何实现全屏轮播

淘宝店装移植有一个神秘的模块,那就是—全屏轮播,这个神奇的模块,能提高店铺的档次,给与顾客视觉冲击,提升顾客印象但是由于淘宝常规用户不支持CSS(用来定义网页样貌的能力),所以我们无法用简单的div+CSS来做出属于自己的全屏轮播强大的装修师们几经研究,终于摆脱了CSS的束绷,结合淘宝的轮播组件,单靠DIV代码就实现了全屏轮播(有缺点) 那么.不要CSS,我们怎么实现全屏轮播呢? 首先我要告诉大家全屏轮播的核心CSS属性—position:absolute 第一节:核心属性 position :

淘宝店铺首页全屏轮播图制作

淘宝店铺首页全屏轮播图制作 | 浏览:1081 | 更新:2014-09-27 12:03 | 标签: 淘宝很多朋友都想要做全屏轮播图,接下来我来说说我的经验工具/原料美图秀秀方法/步骤 1.首先要制作或者搜寻图片宽度1920高度610的高画质图片 2.上传到淘宝图片空间,并复制其连接 3.将复制的连接替换到如下图以“jpg”结尾的那个地方.(有3个地方,可用3张图替换) 4.复制代码,进入淘宝店铺装修页面,新建“自定义内容区” 5.将自定义内容区置于顶部,编辑,输入代码界面,黏贴代码,

淘宝装修基础版全屏店招

1.淘宝基础版全屏海报旺铺基础版是左右两栏的布局,那我们就把左栏的模块全部删掉,在右栏建立自己的自定义模块,在自定义模块中加入以下代码,产生的效果就是通栏效果.在“加入自己的自定义内容”这句话这里插入自定义代码比如全屏不轮播代码等.<div class="J_TWidget" data-widget-config="{'effect': 'fade', 'circular': true ,'contentCls':'taobaoux'}" data-widge

关于最近在做的一个js全屏轮播插件

最近去面试了,对方要求我在一个星期内用原生的js代码写一个全屏轮播的插件,第一想法就是跟照片轮播很相似,只是照片轮播是有定义一个宽高度大小已经确定了的容器用来存储所有照片,然后将照片全部左浮动,利用margin-left的值不断变化,来改变显示哪张照片,当达到最后一张的时候,将第一张照片appendChild到最后一张照片的后面,如果有左右移动的话,当到达第一张照片时,还要继续左移动的话,就将最后一张照片利用insertBefore,将最后一张照片放在第一张照片的前面,这两个方法都只是改变子元素

全屏banner及全屏轮播

一.全屏banner 1.设置网页图片全屏banner <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } .pic { width: 100%; height: 600px; backgroun

加载并全屏轮播加载的其他网站的页面

加载并全屏轮播加载的其他网站的页面一. 设计思路 1.使用iframe标签加载其他网站页面 2.通过js替换iframe的加载链接 3.通过js的定时器实现轮播 4.通过js实现全屏二.代码小解 1.加载页面 <iframe src="https://www.baidu.com" width='100%' height='100%' frameborder='0' name="_blank" id="_blank"></i

javascript无缝全屏轮播

虽然平时能利用插件来实现,但是总是觉得,如果连个无缝轮播都写不出来,还玩个毛线: 其实现在还真的是玩毛线,因为代码都是别人的,不过嘛,很快就变成是我的啦! 代码还没封装成插件,其实我也还没弄清楚. 下面有很多注释的,如果路过的你认为有错误,请指出来啊,使劲拍. html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-C

淘宝店铺基础版全屏装修步骤及代码，已经经过测试

升级版的全屏轮播图

具备的功能: 1.左右自动轮播 2.鼠标悬停在图片上时,停止轮播,移除时,开始轮播 3,点击导航圆点,移到响应位置图片,同时导航圆点有0.3秒的显示特效 4.鼠标移到屏幕左右时,出现线性渐变特效,点击,会左右移到图片最终结果图: 完整代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title>