淘宝首页全屏代码下如何插入轮播图片代码

淘宝首页全屏代码下如何插入轮播图片代码,第1张

直接用全屏轮播代码


天猫店:

<div class="MaGong"  style="height:0px;">

<div class="sn-simple-logo" style="left:auto;right:auto;width:990px;height:0px;top:auto;padding:0;border:none;z-index:1;background:none; ">

<div class="sn-simple-logo" style="left:-465px;top:0px;height:轮播高度px;width:1920px;border:none;padding:0;background:none; ">

<div data-widget-config="{'contentCls': 'macontent','navCls': 'ma_na','duration':1,'interval':4,'autoplay':true,'triggerType':'mouse','circular':true,'effect': 'scrollx','easing': 'easeOutStrong','prevBtnCls':'Mprev','nextBtnCls':'Mnext','autoplay': true,'viewSize':[1920],'activeTriggerCls': 'hidden'}" data-widget-type="Carousel" class="J_TWidget">

<div class="J_TWidget Mprev" data-widget-config="{'trigger':'IX','align':{'node':'IX','offset':[-510,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">

<div class="Mprev" style="font-size:100px;cursor:pointer;"><img src=">

</div>

<div class="J_TWidget Mnext" data-widget-config="{'trigger':'IX','align':{'node':'IX','offset':[510,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">

<div class="Mnext" style="font-size:100px;cursor:pointer;"><img src=">

</div>

<div class="IX" style="height:轮播高度px;width:1920px;overflow:hidden;padding:0px;margin:0px;border:0;background:none;">

<ul class="macontent" style="height:轮播高度px;width:1920px;padding:0px;margin:0px;">

<li class="item"><a target="_blank" href="1商品链接"><img src="1"></a></li><li class="item"><a target="_blank" href="2商品链接"><img src="2"></a></li>

</ul>

</div>

<div class="sn-simple-logo" style="width:1920px;height:45px;left:auto;top:auto;bottom:0;padding:0px;border:none;background:none; display:block;">

<div class="sn-simple-logo" style="z-index: 99;width:1920px;height:45px;padding:0px;border:none;left:auto;top:auto;background:none;">

<ul class="ma_na" style="width:1920px;height:45px;margin:0 auto;text-align: center;border:none;color:#fff;">

<li class="hidden" style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:14;font-size:27px;">●</li><li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:14;font-size:27px;">●</li>

</ul>

</div>

<div class="sn-simple-logo" style="z-index: 98;width:1920px;height:45px;padding:0px;border:none;left:auto;top:auto;background:none;background:none;">

<ul class="ma_nb" style="width:1920px;height:45px;margin:0 auto;text-align: center;border:none;color:#333333;">

<li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:14;font-size:27px;">●</li><li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:14;font-size:27px;">●</li></ul></div></div></div> </div></div></div>


淘宝店专业版:

<div class="MaGong"  style="height:0px;">

<div class="footer-more footer-more-trigger" style="left:auto;right:auto;width:950px;height:0px;top:auto;padding:0;border:none;z-index:1;background:none; ">

<div class="footer-more footer-more-trigger" style="left:-485px;top:0px;height:轮播高度px;width:1920px;border:none;padding:0;background:none; ">

<div data-widget-config="{'contentCls': 'macontent','navCls': 'ma_na','duration':1,'interval':4,'autoplay':true,'triggerType':'mouse','circular':true,'effect': 'scrollx','easing': 'easeOutStrong','prevBtnCls':'Mprev','nextBtnCls':'Mnext','autoplay': true,'viewSize':[1920],'activeTriggerCls': 'hidden'}" data-widget-type="Carousel" class="J_TWidget">

<div class="J_TWidget Mprev" data-widget-config="{'trigger':'WN','align':{'node':'WN','offset':[-510,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">

<div class="Mprev" style="font-size:100px;cursor:pointer;"><img src=">

<div class="J_TWidget Mnext" data-widget-config="{'trigger':'WN','align':{'node':'WN','offset':[510,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">

<div class="Mnext" style="font-size:100px;cursor:pointer;"><img src=">

<div class="WN" style="height:轮播高度px;width:1920px;overflow:hidden;padding:0px;margin:0px;border:0;background:none;">

<ul class="macontent" style="height:轮播高度px;width:1920px;padding:0px;margin:0px;">

<li class="item"><a target="_blank" href="1商品链接"><img src="1"></a></li><li class="item"><a target="_blank" href="2商品链接"><img src="2"></a></li></ul></div>

<div class="footer-more footer-more-trigger" style="width:1920px;height:45px;left:auto;top:auto;bottom:0;padding:0px;border:none;background:none; display:block;">

<div class="footer-more footer-more-trigger" style="z-index: 99;width:1920px;height:45px;padding:0px;border:none;left:auto;top:auto;background:none;">

<ul class="ma_na" style="width:1920px;height:45px;margin:0 auto;text-align: center;border:none;color:#fff;">

<li class="hidden" style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:14;font-size:27px;">●</li><li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:14;font-size:27px;">●</li>

</ul>

</div>

<div class="footer-more footer-more-trigger" style="z-index: 98;width:1920px;height:45px;padding:0px;border:none;left:auto;top:auto;background:none;background:none;">

<ul class="ma_nb" style="width:1920px;height:45px;margin:0 auto;text-align: center;border:none;color:#333333;">

<li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:14;font-size:27px;">●</li><li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:14;font-size:27px;">●</li></ul></div></div></div></div></div></div>


淘宝基础版:

<div class="MaGong" data-title="来自淘宝代码生成网>

<div class="footer-more footer-more-trigger" style="left:auto;right:auto;width:950px;height:0px;top:auto;padding:0;border:none;z-index:1;background:none; ">

<div class="footer-more footer-more-trigger" style="left:-485px;top:0px;height:轮播高度px;width:1920px;border:none;padding:0;background:none; ">

<div data-widget-config="{'contentCls': 'macontent','navCls': 'ma_na','duration':1,'interval':4,'autoplay':true,'triggerType':'mouse','circular':true,'effect': 'scrollx','easing': 'easeOutStrong','prevBtnCls':'Mprev','nextBtnCls':'Mnext','autoplay': true,'viewSize':[1920],'activeTriggerCls': 'hidden'}" data-widget-type="Carousel" class="J_TWidget">

<div class="J_TWidget Mprev" data-widget-config="{'trigger':'UF','align':{'node':'UF','offset':[-510,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">

<div class="Mprev" style="font-size:100px;cursor:pointer;"><img src=">

</div>

<div class="J_TWidget Mnext" data-widget-config="{'trigger':'UF','align':{'node':'UF','offset':[510,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">

<div class="Mnext" style="font-size:100px;cursor:pointer;"><img src=">

</div>

<div class="UF" style="height:轮播高度px;width:1920px;overflow:hidden;padding:0px;margin:0px;border:0;background:none;">

<ul class="macontent" style="height:轮播高度px;width:1920px;padding:0px;margin:0px;">

<li class="item"><a target="_blank" href="1商品链接"><img src="1"></a></li><li class="item"><a target="_blank" href="2商品链接"><img src="2"></a></li>

</ul>

</div>

<div class="footer-more footer-more-trigger" style="width:1920px;height:45px;left:auto;top:auto;bottom:0;padding:0px;border:none;background:none; display:block;">

<div class="footer-more footer-more-trigger" style="z-index: 99;width:1920px;height:45px;padding:0px;border:none;left:auto;top:auto;background:none;">

<ul class="ma_na" style="width:1920px;height:45px;margin:0 auto;text-align: center;border:none;color:#fff;">

<li class="hidden" style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:14;font-size:27px;">●</li><li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:14;font-size:27px;">●</li>

</ul>

</div>

<div class="footer-more footer-more-trigger" style="z-index: 98;width:1920px;height:45px;padding:0px;border:none;left:auto;top:auto;background:none;background:none;">

<ul class="ma_nb" style="width:1920px;height:45px;margin:0 auto;text-align: center;border:none;color:#333333;">

<li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:14;font-size:27px;">●</li><li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:14;font-size:27px;">●</li></ul></div></div></div> </div> </div></div>

给你生成一段,拿代码的话还不如自己弄套软件,方便快捷,不用自己动手软件自己生成。打算长期做淘宝或者美工的话建议自己弄套

<div  style="height:480px">
     <div   data-title="本代码由疯狂的美工装修助手自动生成"   class="TWidgst474taigyer footer-more-trigger  sn-simple-logo most-footer  mgzxzs_qpdm" style="width:1920px;height:500px;padding:0;left:50%;top:auto;border:0px solid red;background:none;">
          <div class="TWidgst474taigyer footer-more-trigger  sn-simple-logo most-footer" style="width:1920px;height:500px;padding:0;left:-50%;top:-0px;border:0px solid red;background:none;overflow: visible;;">
               <div style="width:1920px;margin:0 auto;background: url() no-repeat top center fixed;"><div data-title="本代码由疯狂的美工装修助手生成"  class="J_TWidget" data-widget-config="{'effect':'scrollx','easing':'easeOutStrong','interval':4,'navCls':'crazy_navjkj0bfiln260','contentCls':'crazy_contentjkj0bfiln260','prevBtnCls':'mall-prevjkj0bfiln260','autoplay':true,'nextBtnCls':'mall-nextjkj0bfiln260','circular':true,'disableBtnCls':'disable','duration':20,'activeTriggerCls':'hidden','delay':01}" data-widget-type="Carousel" style=" background: none; cursor: auto; display: block;z-index:30;margin:0;padding:0;border:0;left:auto;top:auto;right:auto;width:1920px;height:500px;">
<div class="crazy_kuangjkj0bfiln260 " style=" background: none; cursor: auto; display: block;z-index:30;width:1920px;height:500px;margin:0;padding:0;border:0;left:0px;top:0px;right:auto;overflow:hidden;">

<div   data-title="本代码由疯狂的美工装修助手生成"  class=" freeze-layer footer-more-trigger  footer-more most-footer  sn-simple-logo crazynav" style=" background: none; cursor: auto; display: block;width:990px;height:1px;text-align:center;left:465px;top:185px;margin:0;padding:0;border:0;z-index:99;">
<div class="J_TWidget mall-prevjkj0bfiln260" data-widget-config="{&quot;trigger&quot;:&quot;mgzxzs_jkj0bfiln260&quot;,&quot;align&quot;:{&quot;node&quot;:&quot;mgzxzs_jkj0bfiln260&quot;,&quot;offset&quot;:[-495,0],&quot;points&quot;:[&quot;cc&quot;,&quot;cc&quot;]}}" data-widget-type="Popup" style="display:none;">
<div class="mall-prevjkj0bfiln260" style="font-size:100px;cursor:pointer;">
 <img src=">1准备工作做好了后,点开美图秀秀,打开宝贝,使用抠图功能,自动抠图,把图扣出来然后直接保存为png格式!
2用美图秀秀打开背景图,加上你要的宣传语,大小尺寸自己把握就可以了!里面字体也可以自己调!很方便!然后保存即可!
3打开ps4,打开做好的背景图,然后再打开已经抠好图的宝贝,左上角第一个图标拉取功能 按快捷键ctrl+a,直接拖到背景图上就可以了!然后再使用atrl+t调整宝贝大小!建议直接在上面的百分比之处调整图大小,否则很容易使图变形!
调整好后,点一下最后小勾,就正式调整好了,不行来回几次就可以了!(记住,w和h的百分比一定要是相同的!)
4全部做好后,点保存为jpg格式,再使用美图秀秀加上你要的配饰或者文字微调一下!然后再保存!
5打开ps4新建一个尺寸为1440760的空白,按照第三步前面的方法,把背景图拉取到空白图上,接着再新建一个尺寸为245760的空白,点击左上角第二个图标选取图标,按atrl+a直接全部选取,然后直接拉到前一张图上
这里我们就要使用比例标尺了,打开标尺后使用移动工具,把虚线与边对齐,再拉取比例尺标线标出一条线,同样右边也同样的(拉标尺就是点住刻度表往外拉就可以了)
6 再按照5的方法制作一个144010的空白,在背景图部分一样弄出10像素的位置
7 再使用剪切工具,把裁剪下来,对其辅助线裁剪,选取好后,按回车,把保存为jpg格式就可以,上传到淘宝空间备用
8点击编辑后退一步,点击选取工具,把刚裁剪掉的部分,圈起来,按右键,填充,选颜色,因为作为背景只能为200K以内,所以选取颜色最好为白色,然后点击保存为jpg格式即可
9点开装修,选样式编辑,找到首页,页面编辑,上传背景图,一定要选择居中不平铺,然后保存
10点开装修界面,首页,新建模块,轮播模块,把上传好的链接复制进去,前面一个是地址,后面一个是到达也地址,记住把模块文字现实选择不显示,尺寸调整为600,点击确定
11 最后点击保存就可以看到最后的效果了,按同样的方法,制作几个宝贝,轮播就可以了!

打开店铺装修——添加自定义模板:
点击红框里的符号进入源码编辑,把代码粘贴进去,全屏轮播的代码在装修页面是看不到效果的,你可以点预览或发布查看效果
打字不易,如满意,望采纳。


DABAN RP主题是一个优秀的主题,极致后台体验,无插件,集成会员系统
乐在赚 » 淘宝首页全屏代码下如何插入轮播图片代码

0条评论

发表评论

提供最优质的资源集合

立即查看 了解详情