打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
全屏海报轮播代码与使用方法分享

       大家好,这是我第一次在这里发帖,不当之处还望谅解!很多新手朋友你们是否还在羡慕别人的店铺全屏豪华呢?你是否想过去找装修大师呢?其实告诉你很简单,别浪费那钱了,也不要觉得它太难了,我以前就是苦苦的研究所以浪费了太多经营淘宝的时间,血的教训啊

 希望各位不要走我的路,下面我就为大家分享2段代码,并教大家如何使用它弄成全屏,效果图如下:

渐隐渐现效果1920*500px全屏轮播代码:

 

<div class="J_TWidget" data-widget-config="{'effect': 'fade', 'circular': true ,'navCls':'toseise','activeTriggerCls':'odslos','contentCls':'piaofu'}" data-widget-type="Tabs">
<div class="piaofu" style="height: 480px">
<div class="J_TWidget" data-widget-config="{&#10;&#13;            'contentCls': 'slide-kun1362898230735content',&#10;&#13;            'triggerCls': 'slide-kun1362898230735triggers',&#10;&#13;            'navCls': 'slide-kun1362898230735triggers',&#10;&#13;            'triggerType': 'mouse',&#10;&#13;            'effect': 'fade',&#10;&#13;&#9;&#9;&#9;'prevBtnCls':'prev',&#10;&#13;&#9;&#9;&#9;'nextBtnCls':'next',&#10;&#13;            'steps': 1,&#10;&#13;            'autoplay': true,&#10;&#13;&#9;&#9;&#9;'viewSize':[1920],&#10;&#13;            'circular': true&#10;&#13;        }" data-widget-type="Carousel" style="z-index: 10; padding-bottom: 0px; margin: 0px; padding-left: 0px; width: 1920px; padding-right: 0px; top: 0px; padding-top: 0px; left: -485px">
<div class="J_TWidget" data-widget-config="{'trigger':'.first-trigger2','align':{'node':'.first-trigger2','offset':[0,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display: none">
<div class="prev" style="width: 90px; float: left; height: 90px">
<img src="//img03.taobaocdn.com/imgextra/i3/1578214660/T2YSjlXX8aXXXXXXXX-1578214660.png" /></div>
<div class="next" style="width: 90px; height: 90px; margin-left: 950px">
<img src="//img04.taobaocdn.com/imgextra/i4/1578214660/T2en2mXkXXXXXXXXXX-1578214660.png" /></div>
</div>
<div class="first-trigger2" style="padding-bottom: 0px; margin: 0px; padding-left: 0px; width: 1920px; padding-right: 0px; height: 500px; overflow: hidden; padding-top: 0px">
<ul class="slide-kun1362898230735content" style="padding-bottom: 0px; margin: 0px; padding-left: 0px; width: 1920px; padding-right: 0px; height: 500px; padding-top: 0px">
<li style="padding-bottom: 0px; list-style-type: none; margin: 0px; padding-left: 0px; width: 1920px; padding-right: 0px; height: 500px; padding-top: 0px">
<a href="http://lveshizhe.tmall.com" style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px" target="_blank"><!--"换图地址1"--><img border="0" height="500" src="//img01.taobaocdn.com/imgextra/i1/1578214660/T2SlPlXgdaXXXXXXXX-1578214660.jpg" width="1920" /></a></li>
<li style="padding-bottom: 0px; list-style-type: none; margin: 0px; padding-left: 0px; width: 1920px; padding-right: 0px; height: 500px; padding-top: 0px"><!--"链接地址1"--><a href="http://http://shop65736317.taobao.com" style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px" target="_blank"><!--"换图地址2"--><img border="0" height="500" src="//img03.taobaocdn.com/imgextra/i3/1578214660/T2mdHnXX0XXXXXXXXX-1578214660.jpg" width="1920" /></a></li>
<li style="padding-bottom: 0px; list-style-type: none; margin: 0px; padding-left: 0px; width: 1920px; padding-right: 0px; height: 500px; padding-top: 0px"><!--"链接地址2"--><a href="http://http://shop65736317.taobao.com" style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px" target="_blank"><!--"链接地址3"--><a href="http://http://shop65736317.taobao.com" style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px" target="_blank"><!--"换图地址3"--><img src="//img01.taobaocdn.com/imgextra/i1/1578214660/T2NP9kXdlcXXXXXXXX-1578214660.jpg" width="1920" height="500" border="0" /></a></li>
<li style="padding-bottom: 0px; list-style-type: none; margin: 0px; padding-left: 0px; width: 1920px; padding-right: 0px; height: 500px; padding-top: 0px">
<!--"链接地址4"--><a href="http://http://shop65736317.taobao.com" style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px" target="_blank"><!--"换图地址4"--><img border="0" height="500" src="//img01.taobaocdn.com/imgextra/i1/1578214660/T2If6mXk8XXXXXXXXX-1578214660.jpg" width="1920" /></a></li>
</ul>
 </div>
<ul class="slide-kun1362898230735triggers" style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: none; padding-top: 0px">
<li>
 </li>
<li>
 </li>
<li>
 </li>
<li>
 </li>
</ul>
</div>
</div>
</div>
水平滚动效果1920*500px全屏轮播海报代码:
<div class="J_TWidget" data-widget-config="{'effect': 'fade', 'circular': true ,'navCls':'toseise','activeTriggerCls':'odslos','contentCls':'piaofu'}" data-widget-type="Tabs">
<div class="piaofu" style="height:480px;">
<div 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
        }" data-widget-type="Carousel" class="J_TWidget" style="z-index:10;top:0px;left:-485px;padding:0px;margin:0px;width:1920px;">
<div class="J_TWidget" data-widget-config="{'trigger':'.first-trigger2','align':{'node':'.first-trigger2','offset':[0,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">
       <div class="prev" style="width:90px;float:left;height:90px;"><img src="//img01.taobaocdn.com/imgextra/i1/1578214660/T2kx56XcNbXXXXXXXX-1578214660.png" /></div>
<div class="next" style="width:90px;height:90px;margin-left:950px;"><img src="//img04.taobaocdn.com/imgextra/i4/1578214660/T2bMh6XehdXXXXXXXX-1578214660.png" /></div>
</div>
<div style="height:500px;width:1920px;overflow:hidden;padding:0px;margin:0px;" class="first-trigger2">
<ul class="slide-kun1362899830209content" style="height:500px;width:1920px;padding:0px;margin:0px;">
         <li style="width:1920px;height:500px;padding:0px;margin:0px;list-style-type:none;"><!--"链接地址1"--><a target="_blank"  href="http://http://shop65736317.taobao.com" style="padding:0px;margin:0px;"><!--"图片地址1"--><img src="//img01.taobaocdn.com/imgextra/i1/1578214660/T2SlPlXgdaXXXXXXXX-1578214660.jpg" width="1920" height="500" border="0px"></a></li>
         <li style="width:1920px;height:500px;padding:0px;margin:0px;list-style-type:none;"><!--"链接地址2"--><a target="_blank"  href="http://http://shop65736317.taobao.com" style="padding:0px;margin:0px;"><!--"图片地址2"--><img src="//img03.taobaocdn.com/imgextra/i3/1578214660/T2mdHnXX0XXXXXXXXX-1578214660.jpg" width="1920px" height="500px" border="0px"></a></li><li style="width:1920px;height:500px;padding:0px;margin:0px;list-style-type:none;"><!--"链接地址3"--><a target="_blank" http://http://shop65736317.taobao.com" style="padding:0px;margin:0px;"><!--"图片地址3"--><img src="//img01.taobaocdn.com/imgextra/i1/1578214660/T2NP9kXdlcXXXXXXXX-1578214660.jpg" width="1920px" height="500px" border="0px"></a></li><li style="width:1920px;height:500px;padding:0px;margin:0px;list-style-type:none;"><!--"链接地址4"--><a target="_blank"  href="http://http://shop65736317.taobao.com" style="padding:0px;margin:0px;"><!--"图片地址4"--><img src="//img01.taobaocdn.com/imgextra/i1/1578214660/T2If6mXk8XXXXXXXXX-1578214660.jpg" width="1920" height="500" border="0px"></a></li>
</ul>
      </div>
<ul class="slide-kun1362899830209triggers"  style="padding:0px;margin:0px;display:none;">
       <li> </li><li> </li><li> </li><li> </li>
        </ul>
</div>
</div>
</div>
使用方法:首先把用ps设计或有现成的全屏海报1920像素*500像素大的海报上传到图片空间,然后把链接复制下来黏贴替换上面代码里的“图片地址”后http:*******.jpg部分,即是 用上传在图片空间的海报链接地址替换
之后找一款宝贝的链接地址即是你想点击后链接到哪个宝贝的链接地址替换掉“链接地址”后面的地址,如图用想要链接的地址替换掉
一次把你的海报上传到图片空间后依次图片一对应链接一把链接替换好后复制链接,打开淘宝装修页面在导航下添加一个自定义,选择不显示
哈哈,简单吧!不会的看几遍后试一试吧!会的不要吐槽啊!打字不容易啊!哈哈,其实还有个简单的方法教给大家,那便是使用全屏轮播那些代码生成的软件,它可以一键生成代码的比较方便,但是是哪个软件就不在这里说了,大家想找的话建议去一些大点的淘宝装修群里的群文件都会有的!不说太多了以免被怀疑打广告,本人不喜欢打广告只喜欢分享,因为分享所以快乐!哈哈,祝大家不被装修难倒,其实只要乐观,一切都好!

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
新旺铺全屏轮播代码(完美兼容版)
一组秋雨图GIF命令
游世拍美媚,最爱花仙子(259)
彻底弄懂CSS盒子模式(DIV布局快速入门)
Div+CSS样式布局学习笔记(1)
如何设计一个简单的网站首页
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服