打开APP
userphoto
未登录

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

开通VIP
新旺铺全屏轮播代码(完美兼容版)

全屏轮播不居中?尺寸太大、太小?没有创意、不够个性?......

这些统统不是问题!淘宝美工论坛给大家分享的这款全屏轮播,完美解决以上所有问题!

店铺效果真实展示:http://uxux.taobao.com/

 

此全屏轮播代码,完美兼容新旺铺(系统自带的三个模板,全部完美全屏居中),并且支持老旺铺拓展版,拓展版也一样全屏居中!

如果您使用的全屏轮播代码,是在别人网站上在线生成的,那我可以告诉您,他的代码只适合于新旺铺 系统模板里的第一套模板,第二、第三套模板是无法全屏居中的!

 

淘宝美工网分享的这款全屏轮播,共写了三个尺寸,分别为1920px,1680px,1440px,高度统一为550px,三款尺寸可以同时使用,互不影响,但不建议这样做!这三个尺寸,没有说哪个好哪个不好,只是说尺寸越大,兼容性就越好一些,但请注意,尺寸大了,图片的容量也将会同时变大!图片的容量大了,将会直接影响店铺的载入速度!

如果你没有五张全屏大图那么多,或者你认为不需要五张,那直接删除代码中 图片所在的li标签即可。不管你使用几张轮播图,下面的小图都是居中的!比如1440px这款尺寸,我采用的是三张轮播图。

1920px全屏轮播代码: 

 

<div class="J_TWidget" data-widget-config="{'effect': 'fade', 'circular': true ,'contentCls':'taobaoux'}" data-widget-type="Tabs" style="height:550px;overflow:hidden;">
  <div class="taobaoux" style="height:550px;">
        <div class="footer-more-trigger" style="width:1920px;height:550px;top:auto;padding:0px;border:none;left:50%;">
            <div class="footer-more-trigger" style="width:1920px;height:550px;padding:0px;border:none;left:-960px;">
              <div data-widget-config="{'contentCls': 'taobaoux-com','navCls': 'bbs-taobaoux-com','effect': 'scrollx','easing': 'easeOutStrong','prevBtnCls':'prev1920','nextBtnCls':'next1920','autoplay': true,'viewSize':[1920],'circular': true}" data-widget-type="Carousel" class="J_TWidget">
                    <div class="J_TWidget" data-widget-config="{'trigger':'.ux1920','align':{'node':'.ux1920','offset':[-500,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">
                        <div class="prev1920" style="font-size:100px;cursor:pointer;opacity:0.5;color:#f00;"><</div>
                    </div>
          <div class="J_TWidget" data-widget-config="{'trigger':'.ux1920','align':{'node':'.ux1920','offset':[500,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">
                        <div class="next1920" style="font-size:100px;cursor:pointer;opacity:0.5;color:#f00;">></div>
                    </div>
                    <div style="height:550px;width:1920px;overflow:hidden;padding:0px;margin:0px;" class="ux1920">
                        <ul class="taobaoux-com" style="height:550px;width:1920px;padding:0px;margin:0px;">
                          <li style="width:1920px;height:550px;padding:0px;margin:0px;">
                            <a target="_blank"  href="http://tbux.taobao.com/" style="padding:0px;margin:0px;">
                                <img src="//demo.taobaoux.com/Carousel/1920/1920.jpg" width="1920px" height="550px" border="0px"></a></li>
                          <li style="width:1920px;height:550px;padding:0px;margin:0px;">
                            <a target="_blank"  href="http://tbux.taobao.com/" style="padding:0px;margin:0px;">
                                <img src="//demo.taobaoux.com/Carousel/1920/1920_2.jpg" width="1920px" height="550px" border="0px"></a></li>
                          <li style="width:1920px;height:550px;padding:0px;margin:0px;">
                            <a target="_blank"  href="http://tbux.taobao.com/" style="padding:0px;margin:0px;">
                                <img src="//demo.taobaoux.com/Carousel/1920/1920_3.jpg" width="1920px" height="550px" border="0px"></a></li>
                          <li style="width:1920px;height:550px;padding:0px;margin:0px;">
                            <a target="_blank"  href="http://tbux.taobao.com/" style="padding:0px;margin:0px;">
                                <img src="//demo.taobaoux.com/Carousel/1920/1920_2.jpg" width="1920px" height="550px" border="0px"></a></li>
                          <li style="width:1920px;height:550px;padding:0px;margin:0px;">
                            <a target="_blank"  href="http://tbux.taobao.com/" style="padding:0px;margin:0px;">
                                <img src="//demo.taobaoux.com/Carousel/1920/1920_3.jpg" width="1920px" height="550px" border="0px"></a></li>
                        </ul>
                    </div>
                    <div class="footer-more-trigger" style="padding:0px;border:none;left:50%;">
                        <div class="footer-more-trigger" style="width:1920px;height:50px;padding:0px;border:none;left:-960px;background: url(http://demo.taobaoux.com/Carousel/Carousel_bg.png) repeat;top:505px;">
                            <ul class="bbs-taobaoux-com" style="width:950px;height:50px;margin:0 auto;text-align: center;">
                                <li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
                                    <img src="//demo.taobaoux.com/Carousel/1920/1920.jpg" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
                                <li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
                                    <img src="//demo.taobaoux.com/Carousel/1920/1920_2.jpg" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
                                <li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
                                    <img src="//demo.taobaoux.com/Carousel/1920/1920_3.jpg" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
                                <li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
                                    <img src="//demo.taobaoux.com/Carousel/1920/1920_2.jpg" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
                                <li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
                                    <img src="//demo.taobaoux.com/Carousel/1920/1920_3.jpg" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
                            </ul>   
                        </div>    
                    </div>  
                </div>
            </div>
        </div>
    </div>
  <ul class="ks-switchable-nav" style="display:none;"></ul>
</div>

 

这里只分享了1920尺寸的,需要1680及1440尺寸的,请到淘宝美工论坛下载。

下载地址:http://www.taobaoux.com/thread-140-1-1.html

 

请认准淘宝美工论坛官方网址:http://www.taobaoux.com/

这里没有生意、没有金钱的交易,这里有的只是一群热爱生活、热爱分享的淘宝美工。

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
swf-0004
全屏海报轮播代码与使用方法分享
Div+CSS样式布局学习笔记(1)
Html基础入门(二)
淘宝基础版全屏轮播不居中,求助各位大神-美工经验分享
HTML5初学----基础代码案例汇总
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服