96编辑器旗下产品
找图
终身
ID:0
到期时间:永久
退出登录
您的位置:首页 > 百科管理 > 详情

全屏海报轮播代码生成-淘宝全屏的轮播代码是怎么做的?

原创:96作图 2023-08-13 02:10:26
  • 求解淘宝店铺全屏海报图片轮播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 class="skin-box-bd clear-fix">

    <span><DIV class=J_TWidget data-widget-type="Tabs"

    data-widget-config="{'effect': 'fade', 'circular': true ,'navCls':'toseise','activeTriggerCls':'odslos','contentCls':'piaofu'}">

    <DIV style="HEIGHT: 550px" class=piaofu>

    <DIV

    style="Z-INDEX: 0; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 1920px; PADDING-RIGHT: 0px; TOP: 0px; PADDING-TOP: 0px; LEFT: -485px"

    class=J_TWidget data-widget-type="Carousel"

    data-widget-config="{

    'contentCls': 'slide-kun1362899830209content',

    'triggerCls': 'slide-kun1362899830209triggers',

    'navCls': 'slide-kun1362899830209triggers',

    'triggerType': 'mouse',

    'effect': 'scrollx',

    'prevBtnCls':'prev',

    'nextBtnCls':'next',

    'steps': 1,

    'autoplay': true,

    'viewSize':[1920],

    'circular': true

    }">

    <DIV style="DISPLAY: none" class=J_TWidget data-widget-type="Popup"

    data-widget-config="{'trigger':'.first-trigger2','align':{'node':'.first-trigger2','offset':[0,0],'points':['cc','cc']}}">

    <DIV style="WIDTH: 90px; FLOAT: left; HEIGHT: 90px" class=prev><IMG

    src="左点击"></DIV>

    <DIV style="WIDTH: 90px; HEIGHT: 90px; MARGIN-LEFT: 950px" class=next><IMG

    src="右点击"></DIV></DIV>

    <DIV

    style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 1920px; PADDING-RIGHT: 0px; HEIGHT: 570px; OVERFLOW: hidden; PADDING-TOP: 0px"

    class=first-trigger2>

    <UL

    style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 1920px; PADDING-RIGHT: 0px; HEIGHT: 570px; PADDING-TOP: 0px"

    class=slide-kun1362899830209content>

    <LI

    style="PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 1920px; PADDING-RIGHT: 0px; HEIGHT: 570px; PADDING-TOP: 0px"><A

    style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px"

    href="链接网站地址" target=_blank><IMG border=0

    src="大图链接地址" width=1920

    height=570></A></LI>

    <LI

    style="PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 1920px; PADDING-RIGHT: 0px; HEIGHT: 570px; PADDING-TOP: 0px"><A

    style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px"

    href="链接网站地址" target=_blank><IMG border=0

    src="大图链接地址" width=1920

    height=570></A></LI>

    <LI

    style="PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 1920px; PADDING-RIGHT: 0px; HEIGHT: 570px; PADDING-TOP: 0px"><A

    style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px"

    href="链接网站地址" target=_blank><IMG border=0

    src="大图链接地址" width=1920

    height=570></A></LI>

    <LI

    style="PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 1920px; PADDING-RIGHT: 0px; HEIGHT: 570px; PADDING-TOP: 0px"><A

    style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px"

    href="链接网站地址" target=_blank><IMG border=0

    src="大图链接地址" width=1920

    height=570></A></LI>

    <LI

    style="PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 1920px; PADDING-RIGHT: 0px; HEIGHT: 570px; PADDING-TOP: 0px"><A

    style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px"

    href="链接网站地址" target=_blank><IMG border=0

    src="大图链接地址" width=1920

    height=570></A></LI>

    </UL></DIV>

    </DIV></DIV></DIV>

    </span>

    </div>

  • 海报轮播制作-淘宝店铺装修图片轮播超大图怎么制作

  • 如何让制作全屏海报轮播

    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.最后点击保存就可以看到最后的效果了,按同样的方法,制作几个宝贝图片,轮播就可以了!

    淘宝店铺装修图片轮播超大图怎么制作

    淘宝店铺装修图片轮播超大图制作:

    1、首先打开制作网站

    2、在图片地址这里添加店家已经做好的图片地址,图片先上传到淘宝图片空间,全屏的图片是宽1920像素,制作的是1920x500,图片都需要提前做好,再开始第一步。

    3、链接就是图片的链接地址,页面也可以是宝贝的链接地址,现在制作的是宝贝链接地址。

    4、海报宽度和高度根据自己需要设置,做轮播图海报的高度要一致,不然不好看。

    5、然后是海报按钮,在最右边有个下载海报按钮,下载下来选个自己比较喜欢的按钮,传到图片空间,然后把图片链接复制粘贴到下图显示的地方即可,注意左右区分。

    6、然后是轮播时间设置,可根据自己的喜好设置。

    7、这一栏根据自己的店铺和喜好设置,切换方式和速度自己随便设置。

    8、海报按钮这里需要点击启用。

    9、最后生成代码,然后复制代码。

    10、把黑框里的代码复制卖家中心—店铺装修—添加模块—添加自定义模块。

    11、自定义模块显示标题这里,点击不显示,然后点击红圈的地方,编辑代码。

    12、把刚刚做好的代码复制进去就大功告成。

    淘宝全屏轮播海报怎么做??

    你需要加代码呢!

    <divstyle="height:500px;">

    <divclass="footer-more-trigger"style="left:50%;top:auto;border:none;padding:0;">

    <divclass="footer-more-trigger"style="left:-960px;top:auto;border:none;padding:0;">

    <ahref="#"target="_blank"style="width:1920px;height:500px;display:block;">

    <imgsrc="图片链接"border="0"alt="全屏海报"/></a></div>

    </div>

    </div>

    </div>

    最新文章 更多
    最新素材 更多
    公司介绍 网站地图 图片资讯
    Copyright © 2010-2022 山东找图网络科技有限公司  鲁ICP备18007836号-3  邮箱:15653358549@163.com