全屏轮播图代码
http://taobaokaidian.com/
给你个傻瓜网址,把连接放上,生成就可以了版。要别的权花样请Q
『贰』 淘宝全屏轮播图代码到底复制到哪个地方
一、添加“自定义模块”点编辑
『叁』 求解淘宝店铺全屏海报图片轮播css代码
<div class="J_TWidget mypoper" data-widget-config="{'effect': 'fade','circular': true ,'contentCls':'sj-t','navCls':'sj-n','autoplay':'true'}" data-widget-type="Tabs" style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;height:600px;overflow:hidden;padding-top:0px;">
<div class="sj-t">
<div class="J_TWidget" data-widget-config="{'contentCls': 'sj-content','navCls': 'sj-n','triggerType': 'click','effect': 'fade','steps': 1,'autoplay': true,'circular': true ,'prevBtnCls':'prev','nextBtnCls':'next'}" data-widget-type="Carousel">
<div class="pa2">
<div class="J_TWidget" data-widget-config="{'trigger':'.sj-content', 'align':{'node':'.mypoper', 'offset':[0,0], 'points':['cl','cl'] } }" data-widget-type="Popup" style="width:950px;display:none;">
<div class="ks-contentbox" style="padding-bottom:0px;margin:0px;padding-left:0px;width:950px;padding-right:0px;padding-top:0px;left:0px;">
<div class="prev" style="float:left;margin-left:50px;">
<img class="J_TWidget" data-ks-lazyload="" data-widget-config="{'png':true,'png_tag':true}" data-widget-type="Compatible" style="height:1px;width:1px;" /></div>
<div class="next" style="float:right;margin-right:50px;">
<img class="J_TWidget" data-ks-lazyload="" data-widget-config="{'png':true,'png_tag':true}" data-widget-type="Compatible" style="height:1px;width:1px;" /></div>
</div>
</div>
<ul class="sj-content" style="padding-bottom:0px;margin:0px;padding-left:0px;width:1440px;padding-right:0px;height:600px;overflow:hidden;padding-top:0px;">
<li style="padding-bottom:0px;list-style-type:none;margin:0px;padding-left:0px;width:1440px;padding-right:0px;height:600px;padding-top:0px;left:-250px;">
<a target="_blank"><img data-ks-lazyload="
图片地址" /></a></li>
<li style="padding-bottom:0px;list-style-type:none;margin:0px;padding-left:0px;width:440px;padding-right:0px;height:600px;padding-top:0px;left:-250px;">
<a target="_blank"><img data-ks-lazyload="
图片地址" /></a></li>
</ul>
</div>
<div style="width:1920px;display:none;height:0px;overflow:hidden;">
<ul class="sj-t" style="padding-bottom:0px;margin:0px;padding-left:0px;width:1440px;padding-right:0px;height:50px;padding-top:0px;">
<li style="padding-bottom:0px;list-style-type:none;margin:0px;padding-left:0px;width:315px;padding-right:0px;background:black;float:left;height:600px;padding-top:0px;">
</li>
<li style="padding-bottom:0px;list-style-type:none;margin:0px;padding-left:0px;width:315px;padding-right:0px;background:#F8C;float:left;height:8600px;padding-top:0px;">
</li>
</ul>
</div>
<ul class="sj-n" style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;display:none;height:1px;padding-top:0px;">
单词解释: width:1440px 这个是图片宽度,亲们可以自己设置多少。
height:600px 这个是图片高度,也是亲们自己设置。
left:-250px 这个是水平位置,图片插入进去没居中的,亲们就慢慢增加或者减少数字,就可以调到居中的哈。有什么问题再密我。
『肆』 求专业版首页图片全屏轮播切换左右按钮控制全屏图片切换代码
<div style="height:590px;">
<div class="footer-more-trigger" style="width:1920px;height:600px;padding:0;border:none;left:50%;top:auto;">
<div class="footer-more-trigger" style="width:100%;height:100%;padding:0;border:none;left:-50%;top:0;">
<div style="height:100%;position:relative;" class="J_TWidget" data-widget-type="Carousel" data-widget-config="{
'contentCls':'sc-co',
'navCls':'lb-na',
'activeTriggerCls': 'hidden',
'prevBtnCls':'lb-p',
'nextBtnCls':'lb-n',
'disableBtnCls':'disable',
'steps':1,
'effect':'scrollx',
'easing':'easeOutStrong',
'ration':'2.0',
'autoplay':true,
'triggerType':'mouse',
'circular':true,
'interval':'5'
}">
<div class="lb-sc" style="height:600px;overflow:hidden;position:relative;z-index:3;">
<ul class="sc-co">
<li style="width:1920px;height:600px;float:left;overflow:hidden;background:url(图片地址) no-repeat center;">
<a style="display:block;height:100%;" href="#" target="_blank"></a>
</li>
<li style="width:1920px;height:600px;float:left;overflow:hidden;background:url(图片地址) no-repeat center;">
<a style="display:block;height:100%;" href="#" target="_blank"></a>
</li>
</ul>
</div>
<div class="kz footer-more-trigger" style="width:100%;height:26px;padding:0;border:none;position:absolute;left:0;z-index:5;top:574px;">
<div class="bg" style="height:100%;background-color:#fff;opacity:0.5;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);"></div>
<ul class="h-na1 na1 footer-more-trigger" style="width:auto;padding:0;border:none;float:left;position:absolute;left:50%;top:5px;">
<li class="na-li" style="display:block;width:16px;height:16px;margin:0 5px;float:left;overflow:hidden;line-height:16px;color:#fff;text-align:center;background-color:#c60;position:relative;right:50%;cursor:pointer;">
<span class="sz" style="display:block;width:100%;height:100%;padding:0;border:none;left:0;top:0;text-align:center;">1</span>
</li>
<li class="na-li" style="display:block;width:16px;height:16px;margin:0 5px;float:left;overflow:hidden;line-height:16px;color:#fff;text-align:center;background-color:#c60;position:relative;right:50%;cursor:pointer;">
<span class="sz" style="display:block;width:100%;height:100%;padding:0;border:none;left:0;top:0;text-align:center;">2</span>
</li>
<li class="na-li" style="display:block;width:16px;height:16px;margin:0 5px;float:left;overflow:hidden;line-height:16px;color:#fff;text-align:center;background-color:#c60;position:relative;right:50%;cursor:pointer;">
<span class="sz" style="display:block;width:100%;height:100%;padding:0;border:none;left:0;top:0;text-align:center;">3</span>
</li>
<li class="na-li" style="display:block;width:16px;height:16px;margin:0 5px;float:left;overflow:hidden;line-height:16px;color:#fff;text-align:center;background-color:#c60;position:relative;right:50%;cursor:pointer;">
<span class="sz" style="display:block;width:100%;height:100%;padding:0;border:none;left:0;top:0;text-align:center;">4</span>
</li>
</ul>
<ul class="lb-na na1 footer-more-trigger" style="width:auto;padding:0;border:none;float:left;position:absolute;left:50%;top:5px;">
<li class="na-li hidden" style="display:block;width:16px;height:16px;margin:0 5px;float:left;overflow:hidden;line-height:16px;color:#fff;text-align:center;background-color:#000;position:relative;right:50%;cursor:pointer;">
<span class="sz" style="display:block;width:100%;height:100%;padding:0;border:none;left:0;top:0;text-align:center;">1</span>
</li>
<li class="na-li" style="display:block;width:16px;height:16px;margin:0 5px;float:left;overflow:hidden;line-height:16px;color:#fff;text-align:center;background-color:#000;position:relative;right:50%;cursor:pointer;">
<span class="sz" style="display:block;width:100%;height:100%;padding:0;border:none;left:0;top:0;text-align:center;">2</span>
</li>
<li class="na-li" style="display:block;width:16px;height:16px;margin:0 5px;float:left;overflow:hidden;line-height:16px;color:#fff;text-align:center;background-color:#000;position:relative;right:50%;cursor:pointer;">
<span class="sz" style="display:block;width:100%;height:100%;padding:0;border:none;left:0;top:0;text-align:center;">3</span>
</li>
<li class="na-li" style="display:block;width:16px;height:16px;margin:0 5px;float:left;overflow:hidden;line-height:16px;color:#fff;text-align:center;background-color:#000;position:relative;right:50%;cursor:pointer;">
<span class="sz" style="display:block;width:100%;height:100%;padding:0;border:none;left:0;top:0;text-align:center;">4</span>
</li>
</ul>
</div>
<div style="width:50px;height:80px;top:260px;left:435px;padding:0;border:none;z-index:10;cursor:pointer;" class="lb-p footer-more-trigger" title="上一屏">
<div class="bg" style="height:100%;background-color:#000;opacity:0.5;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);text-align:center;color:#fff;font-size:40px;line-height:80px;font-family:微软雅黑;"><</div>
</div>
<div style="width:50px;height:80px;top:260px;left:1435px;padding:0;border:none;z-index:10;cursor:pointer;" class="lb-n footer-more-trigger" title="下一屏">
<div class="bg" style="height:100%;background-color:#000;opacity:0.5;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);text-align:center;color:#fff;font-size:40px;line-height:80px;font-family:微软雅黑;">></div>
</div>
</div>
</div>
</div>
</div>
把图片地址换成你空间的图片链接
『伍』 如何自定义淘宝天猫全屏轮播代码呢
首先找到店铺装修,然后添加自定义模块,在编辑框里面选择源码选项,然后把从现在复制的全屏海报的源码直接粘贴就可以了!
另外现在有很多可以实现此功能的平台,网络一下全屏海报自动生成等这些关键词即可!不明白的可以直接私我即可!
『陆』 全屏轮播代码中图片怎么换
把代码里有这两个英文后面的参数都改掉就可以了【width:1920px;height:500px】‘width这个是宽的意思;回height这个是高的意思。略看答了我自己的代码大约7处地方要修改的,不知道你的代码怎么样,可能有点出入。其实主要修改高就可以了,现在宽都是普遍设置1920XP了,在设计广告图片的时候主要信息不要超出1440XP就可以了,这样95%以上的显示器都能看到主要的内容了。
『柒』 求淘宝店铺全屏轮播代码。
<div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'contentCls': 'fullScreenPosters','navCls': 'bbs-nav','effect': 'fade','autoplay': false,'circular': false}"> <div style="width:1920px;height:550px;overflow:hidden;" class="fullScreenPosters"> <div style="width: 1920px;left: -485px;"> <!--这里放置你的图专片属--> </div> </div> <div style="display:none;" class="bbs-nav"></div></div>
『捌』 淘宝全屏图片轮播的代码里,如何修改高度和宽度
把代码里有这两个英文后面的参数都改掉就可以了【width:1920px;height:500px】‘width这个是宽的意思;height这个是高版的意思。略权看了我自己的代码大约7处地方要修改的,不知道你的代码怎么样,可能有点出入。其实主要修改高就可以了,现在宽都是普遍设置1920XP了,在设计广告图片的时候主要信息不要超出1440XP就可以了,这样95%以上的显示器都能看到主要的内容了。
『玖』 淘宝首页全屏代码下如何插入轮播图片代码
直接用全屏轮播代码。
天猫店:
<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','ration':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="http://img04.taobaocdn.com/imgextra/i4/126112166/TB2EaKBaXXXXXXxXXXXXXXXXXXX-126112166.png"></div>
</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="http://img02.taobaocdn.com/imgextra/i2/126112166/TB2s_WAaXXXXXXQXXXXXXXXXXXX-126112166.png"></div>
</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:1.4;font-size:27px;">●</li><li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;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:1.4;font-size:27px;">●</li><li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;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','ration':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="http://img04.taobaocdn.com/imgextra/i4/126112166/TB2EaKBaXXXXXXxXXXXXXXXXXXX-126112166.png"></div></div>
<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="http://img02.taobaocdn.com/imgextra/i2/126112166/TB2s_WAaXXXXXXQXXXXXXXXXXXX-126112166.png"></div></div>
<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:1.4;font-size:27px;">●</li><li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;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:1.4;font-size:27px;">●</li><li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;">●</li></ul></div></div></div></div></div></div>
淘宝基础版:
<div class="MaGong" data-title="来自淘宝代码生成网www.001daima.com" data-time="1502845797" 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','ration':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="http://img04.taobaocdn.com/imgextra/i4/126112166/TB2EaKBaXXXXXXxXXXXXXXXXXXX-126112166.png"></div>
</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="http://img02.taobaocdn.com/imgextra/i2/126112166/TB2s_WAaXXXXXXQXXXXXXXXXXXX-126112166.png"></div>
</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:1.4;font-size:27px;">●</li><li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;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:1.4;font-size:27px;">●</li><li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;">●</li></ul></div></div></div> </div> </div></div>
『拾』 求淘宝店铺的全屏轮播代码
你的旺铺是什么版本的?如果是专业版的话应该是不能做全屏轮播的,只能做到950