图片轮播怎么做全屏代码（全屏海报轮播代码）

本篇文章给大家谈谈图片轮播怎么做全屏代码，以及全屏海报轮播代码对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、淘宝首页全屏代码下如何插入轮播图片代码
• 2、淘宝的全屏轮播图在哪里做代码？
• 3、淘宝网装修图片轮播怎样铺满全屏
• 4、如何让制作全屏海报轮播
• 5、淘宝首页宽屏图片轮播代码

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

直接用全屏轮播代码。

天猫店：

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

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

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/lili 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;"●/lili 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;"●/lili 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','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/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=""/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/lili 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;"●/lili 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;"●/lili 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="来自淘宝代码生成网" 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','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

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

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/lili 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;"●/lili 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;"●/lili 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

淘宝的全屏轮播图在哪里做代码？

打开店铺装修——添加自定义模板：

点击红框里的符号进入源码编辑，把代码粘贴进去，全屏轮播的代码在装修页面是看不到效果的，你可以点预览或发布查看效果

打字不易，如满意，望采纳。

淘宝网装修图片轮播怎样铺满全屏

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;"

spanimg data-ks-lazyload="" 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;"

spanimg data-ks-lazyload="" 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;"

spana data-attr-replace="百度经验 百度经验 百度经验 百度经验" href="" style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" target="_blank"img data-ks-lazyload="" 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;"

spana data-attr-replace="百度经验 百度经验 百度经验 百度经验" href="" style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" target="_blank"img data-ks-lazyload="" 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;"

spana data-attr-replace="百度经验 百度经验 百度经验 百度经验" href="" style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" target="_blank"img data-ks-lazyload="" 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;"

spana data-attr-replace="百度经验 百度经验 百度经验 百度经验" href="" style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" target="_blank"img data-ks-lazyload="" 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;"

spanimg data-ks-lazyload="" 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;"

spanimg data-ks-lazyload="" 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;"

spanimg data-ks-lazyload="" 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;"

spanimg data-ks-lazyload="" 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.点击确定，点击右上角的“发布”马上观看轮播图。

如何让制作全屏海报轮播

1.准备工作做好了后，点开美图秀秀，打开宝贝图片，使用抠图功能，自动抠图，把图扣出来然后直接保存为png格式！

2.用美图秀秀打开背景图，加上你要的宣传语，大小尺寸自己把握就可以了！里面字体也可以自己调！很方便！然后保存即可！

3.打开ps4,打开做好的背景图，然后再打开已经抠好图的宝贝图片，左上角第一个图标拉取功能 按快捷键ctrl+a，直接拖图片到背景图上就可以了！然后再使用atrl+t调整宝贝图片大小！建议直接在上面的百分比之处调整图大小，否则很容易使图变形！

调整好后，点一下最后小勾，就正式调整好了，不行来回几次就可以了！（记住，w和h的百分比一定要是相同的！）

4.全部做好后，点保存为jpg格式，再使用美图秀秀加上你要的配饰或者文字微调一下！然后再保存！

5.打开ps4新建一个尺寸为1440*760的空白图片，按照第三步前面的方法，把背景图拉取到空白图上，接着再新建一个尺寸为245*760的空白图片，点击左上角第二个图标选取图标，按atrl+a直接全部选取，然后直接拉到前一张图上

这里我们就要使用比例标尺了，打开标尺后使用移动工具，把虚线与图片边对齐，再拉取比例尺标线标出一条线，同样右边也同样的(拉标尺就是点住刻度表往外拉就可以了）

6. 再按照5的方法制作一个1440*10的空白图片，在背景图部分一样弄出10像素的位置

7. 再使用剪切工具，把图片裁剪下来，对其辅助线裁剪，选取好后，按回车，把图片保存为jpg格式就可以，上传到淘宝图片空间备用

8.点击编辑后退一步，点击选取工具，把刚裁剪掉的部分，圈起来，按右键，填充，选颜色，因为作为背景只能为200K以内，所以选取颜色最好为白色，然后点击保存为jpg格式即可

9.点开装修，选样式编辑，找到首页，页面编辑，上传背景图，一定要选择居中不平铺，然后保存

10.点开装修界面，首页，新建模块，轮播模块，把上传好的图片链接复制进去，前面一个是图片地址，后面一个是到达也地址，记住把模块文字现实选择不显示，尺寸调整为600，点击确定

11. 最后点击保存就可以看到最后的效果了，按同样的方法，制作几个宝贝图片，轮播就可以了！

淘宝首页宽屏图片轮播代码

我有代码，如果不是学网页的，我怕你看不懂！

!doctype html

html

head

meta charset="utf-8"

titlejQuery图片轮播代码/title

style

.flexslider {

 margin: 0px auto 20px;

 position: relative;

 width: 100%;

 height: 482px;

 overflow: hidden;

 zoom: 1;

}

.flexslider .slides li {

 width: 100%;

 height: 100%;

}

.flex-direction-nav a {

 width: 70px;

 height: 70px;

 line-height: 99em;

 overflow: hidden;

 margin: -35px 0 0;

 display: block;

 background: url(images/ad_ctr.png) no-repeat;

 position: absolute;

 top: 50%;

 z-index: 10;

 cursor: pointer;

 opacity: 0;

 filter: alpha(opacity=0);

 -webkit-transition: all .3s ease;

 border-radius: 35px;

}

.flex-direction-nav .flex-next {

 background-position: 0 -70px;

 right: 0;

}

.flex-direction-nav .flex-prev {

 left: 0;

}

.flexslider:hover .flex-next {

 opacity: 0.8;

 filter: alpha(opacity=25);

}

.flexslider:hover .flex-prev {

 opacity: 0.8;

 filter: alpha(opacity=25);

}

.flexslider:hover .flex-next:hover,

.flexslider:hover .flex-prev:hover {

 opacity: 1;

 filter: alpha(opacity=50);

}

.flex-control-nav {

 width: 100%;

 position: absolute;

 bottom: 10px;

 text-align: center;

}

.flex-control-nav li {

 margin: 0 2px;

 display: inline-block;

 zoom: 1;

 *display: inline;

}

.flex-control-paging li a {

 background: url(images/dot.png) no-repeat 0 -16px;

 display: block;

 height: 16px;

 overflow: hidden;

 text-indent: -99em;

 width: 16px;

 cursor: pointer;

}

.flex-control-paging li a.flex-active,

.flex-control-paging li.active a {

 background-position: 0 0;

}

.flexslider .slides a img {

 width: 100%;

 height: 482px;

 display: block;

}

/style

/head

body

br/br/br/

!-- 轮播广告 --

div id="banner_tabs" class="flexslider"

 ul class="slides"

  li

   a title="" target="_blank" href="#"

    img width="1920" height="482" alt="" style="background: url(images/banner1.jpg) no-repeat center;" src="images/alpha.png"

   /a

  /li

  li

   a title="" href="#"

    img width="1920" height="482" alt="" style="background: url(images/banner2.jpg) no-repeat center;" src="images/alpha.png"

   /a

  /li

  li

   a title="" href="#"

    img width="1920" height="482" alt="" style="background: url(images/banner3.jpg) no-repeat center;" src="images/alpha.png"

   /a

  /li

 /ul

 ul class="flex-direction-nav"

  lia class="flex-prev" href="javascript:;"Previous/a/li

  lia class="flex-next" href="javascript:;"Next/a/li

 /ul

 ol id="bannerCtrl" class="flex-control-nav flex-control-paging"

  lia1/a/li

  lia2/a/li

  lia2/a/li

 /ol

/div

script src="js/jquery-1.10.2.min.js"/script

script src="js/slider.js"/script

script type="text/javascript"

$(function() {

 var bannerSlider = new Slider($('#banner_tabs'), {

  time: 5000,

  delay: 400,

  event: 'hover',

  auto: true,

  mode: 'fade',

  controller: $('#bannerCtrl'),

  activeControllerCls: 'active'

 });

 $('#banner_tabs .flex-prev').click(function() {

  bannerSlider.prev()

 });

 $('#banner_tabs .flex-next').click(function() {

  bannerSlider.next()

 });

})

/script

/body

/html

关于图片轮播怎么做全屏代码和全屏海报轮播代码的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。