350装修平台已服务318多万家 淘宝店装修，拥有25万多个 350代理， 今日已售488 套模板 客户端下载 350教程论坛 350后台登陆 咨询邮箱 咨询邮箱：350@seo-lv.com 350模板官方微博 350模板微信
您的位置：350装修平台 > 模板百科 > 淘宝店装修知识 >
淘宝装修全屏轮播代码、淘宝轮播代码、淘宝轮
发表日期：2014-10-16 22:21   文章编辑：350模板官网小编    浏览次数：
　全屏轮播----震撼视觉体验，炫出你的店铺！

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

这些统统不是问题！今天给350小编大家分享的这款全屏轮播，完美解决以上所有问题！


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

与全屏海报一样，此代码同样调用模板class，position: absolute绝对定位，实现全屏。外层left:50%，里层left:-960px（全屏的一半），实现全屏居中。

轮播左右的两个大箭头，这次直接使用<>符号，非图片形式，事实上写此全屏轮播，我第一个改的就是这两个大箭头，上次采用图片的形式，那两张图片简直是丑爆了！越看越不舒服，而且不方便使用，还得下载两张图片上传图片空间。改为<>符号的形式，还可以直接修改箭头的颜色，比如自己店铺的主色调是绿色，那箭头就改为绿色。

下方的五个图标，这次改为了五张小图，因为我们自定义没办法实现 点击箭头左右切换时，下方的图标也跟随左右切换，这是需要用到判断的，我没办法实现，所以改为五张小图，是为了让客户知道到底有几张图在轮播，方便客户查看，提高用户体验。同时，五张小图直接浮动于大图上方，底部采用半透明背景。

这里说下底部的半透明背景，这次编写，最难的、也最耗时的地方就是这个半透明，支持CSS3的主流浏览器，只要一个opacity即可实现半透明，但IE却是不支持这个属性的，所以在IE下你将看到一条实心的黑色矩形，而不是半透明效果，在IE下想要实现半透明，那就要用到滤镜，但请注意，淘宝不支持filter:alpha半透明滤镜。为了解决这个问题，我花费了一上午的时间在查阅相关文档，最后，我采用了一张PNG半透明图片替代，放弃了opacity属性和IE滤镜，这样除了IE6不支持半透明以处，其它浏览器都是正常半透明效果的。

五张小图的尺寸全部为：120px*39px，你不需要单独做这五张小图！把全屏大图上传图片空间后，直接使用图片空间提供的小图尺寸即可，或者你也可以直接在原图地址后面添加：_120x120.jpg

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

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

使用说明：
1、下载这张底部半透明图片

上传自己的图片空间，替换下面代码中的”http://demo.taobaoux.com/Carousel/Carousel_bg.png“

2、如何将代码中的大图改为自己的图片，找到下面这段代码：

 

 

<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="http://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="http://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="http://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="http://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="http://demo.taobaoux.com/Carousel/1920/1920_3.jpg" width="1920px" height="550px" border="0px"></a></li>
                        </ul>

代码中总共有五张大图，按顺序依次替换，src=""里面的就是图片地址，href="" 里面的就是对应的宝贝链接。

3、如何将代码中的小图改为自己的图片，找到下面这段代码：

 

 

<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="http://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="http://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="http://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="http://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="http://demo.taobaoux.com/Carousel/1920/1920_3.jpg" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
                            </ul>
代码中总共有五张小图，按顺序依次替换，src=""里面的就是图片地址，href="" 里面的就是对应的宝贝链接。

注：为了方便大家使用，代码中的图片全部存放于本站，大家可以直接复制代码到自己的店铺中测试（成人类目除外），测试通过后，再修改其中的图片地址和链接地址即可。


太麻烦了？我还是不会改怎么办？

那建议你使用淘金兄开发的“淘美助手之个性轮播”，这样修改代码会更方便，而且此软件采用的全屏轮播代码即为本贴代码。
淘美助手之个性轮播：http://bbs.taobaoux.com/thread-234-1-1.html


1920px 全屏轮播代码：（点击下面的”复制代码“即可全部复制）

 

 

    <div class="J_TWidget" data-widget-config="{'effect': 'fade', 'circular': true ,'contentCls':'taobaoux'}" data-widget-type="Tabs" style="height:545px;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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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>

1680px 全屏轮播代码：

 

 

    <div class="J_TWidget" data-widget-config="{'effect': 'fade', 'circular': true ,'contentCls':'taobaoux'}" data-widget-type="Tabs" style="height:545px;overflow:hidden;">
      <div class="taobaoux" style="height:550px;">
          <div class="footer-more-trigger" style="width:1680px;height:550px;top:auto;padding:0px;border:none;left:50%;">
          <div class="footer-more-trigger" style="width:1680px;height:550px;padding:0px;border:none;left:-840px;">
       
                <div data-widget-config="{'contentCls': 'taobaoux-com','navCls': 'bbs-taobaoux-com','effect': 'scrollx','easing': 'easeOutStrong','prevBtnCls':'prev1680','nextBtnCls':'next1680','autoplay': true,'viewSize':[1680],'circular': true}" data-widget-type="Carousel" class="J_TWidget">
                        
                        <div class="J_TWidget" data-widget-config="{'trigger':'.ux1680','align':{'node':'.ux1680','offset':[-500,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">
                            <div class="prev1680" style="font-size:100px;cursor:pointer;opacity:0.5;color:#f00;"><</div>
                        </div>
              <div class="J_TWidget" data-widget-config="{'trigger':'.ux1680','align':{'node':'.ux1680','offset':[500,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">
                            <div class="next1680" style="font-size:100px;cursor:pointer;opacity:0.5;color:#f00;">></div>
                        </div>
                
                        <div style="height:550px;width:1680px;overflow:hidden;padding:0px;margin:0px;" class="ux1680">
                            <ul class="taobaoux-com" style="height:550px;width:1680px;padding:0px;margin:0px;">
                              <li style="width:1680px;height:550px;padding:0px;margin:0px;">
                                <a target="_blank"  href="http://tbux.taobao.com/" style="padding:0px;margin:0px;">
                                    <img src="http://demo.taobaoux.com/Carousel/1680/1680*550_1.jpg" width="1680px" height="550px" border="0px"></a></li>
                              <li style="width:1680px;height:550px;padding:0px;margin:0px;">
                                <a target="_blank"  href="http://tbux.taobao.com/" style="padding:0px;margin:0px;">
                                    <img src="http://demo.taobaoux.com/Carousel/1680/1680*550_2.jpg" width="1680px" height="550px" border="0px"></a></li>
                              <li style="width:1680px;height:550px;padding:0px;margin:0px;">
                                <a target="_blank"  href="http://tbux.taobao.com/" style="padding:0px;margin:0px;">
                                    <img src="http://demo.taobaoux.com/Carousel/1680/1680*550_3.jpg" width="1680px" height="550px" border="0px"></a></li>
                              <li style="width:1680px;height:550px;padding:0px;margin:0px;">
                                <a target="_blank"  href="http://tbux.taobao.com/" style="padding:0px;margin:0px;">
                                    <img src="http://demo.taobaoux.com/Carousel/1680/1680*550_4.jpg" width="1680px" height="550px" border="0px"></a></li>
                              <li style="width:1680px;height:550px;padding:0px;margin:0px;">
                                <a target="_blank"  href="http://tbux.taobao.com/" style="padding:0px;margin:0px;">
                                    <img src="http://demo.taobaoux.com/Carousel/1680/1680*550_5.jpg" width="1680px" 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:1680px;height:50px;padding:0px;border:none;left:-840px;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="http://demo.taobaoux.com/Carousel/1680/1680*550_1.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="http://demo.taobaoux.com/Carousel/1680/1680*550_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="http://demo.taobaoux.com/Carousel/1680/1680*550_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="http://demo.taobaoux.com/Carousel/1680/1680*550_4.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="http://demo.taobaoux.com/Carousel/1680/1680*550_5.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>

1440px 全屏轮播代码：

 

 

    <div class="J_TWidget" data-widget-config="{'effect': 'fade', 'circular': true ,'contentCls':'taobaoux'}" data-widget-type="Tabs" style="height:545px;overflow:hidden;">
      <div class="taobaoux" style="height:550px;">
            <div class="footer-more-trigger" style="width:1440px;height:550px;top:auto;padding:0px;border:none;left:50%;">
                <div class="footer-more-trigger" style="width:1440px;height:550px;padding:0px;border:none;left:-720px;">
                
                  <div data-widget-config="{'contentCls': 'taobaoux-com','navCls': 'bbs-taobaoux-com','effect': 'scrollx','easing': 'easeOutStrong','prevBtnCls':'prev1440','nextBtnCls':'next1440','autoplay': true,'viewSize':[1440],'circular': true}" data-widget-type="Carousel" class="J_TWidget">
                        
                        <div class="J_TWidget" data-widget-config="{'trigger':'.ux1440','align':{'node':'.ux1440','offset':[-500,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">
                            <div class="prev1440" style="font-size:100px;cursor:pointer;opacity:0.5;color:#f00;"><</div>
                        </div>
              <div class="J_TWidget" data-widget-config="{'trigger':'.ux1440','align':{'node':'.ux1440','offset':[500,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">
                            <div class="next1440" style="font-size:100px;cursor:pointer;opacity:0.5;color:#f00;">></div>
                        </div>
                   
                        <div style="height:550px;width:1440px;overflow:hidden;padding:0px;margin:0px;" class="ux1440">
                            <ul class="taobaoux-com" style="height:550px;width:1440px;padding:0px;margin:0px;">
                              <li style="width:1440px;height:550px;padding:0px;margin:0px;">
                                <a target="_blank"  href="http://tbux.taobao.com/" style="padding:0px;margin:0px;">
                                    <img src="http://demo.taobaoux.com/Carousel/1440/1440*550_1.jpg" width="1440px" height="550px" border="0px"></a></li>
                              <li style="width:1440px;height:550px;padding:0px;margin:0px;">
                                <a target="_blank"  href="http://tbux.taobao.com/" style="padding:0px;margin:0px;">
                                    <img src="http://demo.taobaoux.com/Carousel/1440/1440*550_2.jpg" width="1440px" height="550px" border="0px"></a></li>
                              <li style="width:1440px;height:550px;padding:0px;margin:0px;">
                                <a target="_blank"  href="http://tbux.taobao.com/" style="padding:0px;margin:0px;">
                                    <img src="http://demo.taobaoux.com/Carousel/1440/1440*550_3.jpg" width="1440px" 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:1440px;height:50px;padding:0px;border:none;left:-720px;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="http://demo.taobaoux.com/Carousel/1440/1440*550_1.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="http://demo.taobaoux.com/Carousel/1440/1440*550_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="http://demo.taobaoux.com/Carousel/1440/1440*550_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>

注：如果你想把此全屏轮播做的更加个性，那就请认真看完以下内容吧。

1、修改左箭头：

 

 

<div class="prev1920" style="font-size:100px;cursor:pointer;opacity:0.5;color:#f00;"><</div>

修改为:

 

 

    <div class="prev1920" style="width:97px;height:97px;">
         <img src="左箭头图片地址" />
    </div>

2、修改右箭头：

 

 

<div class="next1920" style="font-size:100px;cursor:pointer;opacity:0.5;color:#f00;">></div>

修改为：

 

 

    <div class="next1920" style="width:97px;height:97px;">
         <img src="右箭头图片地址" />
    </div>

这里箭头尺寸是97px*97px，如果你的图片不是这个尺寸，请自行修改。

3、箭头都放在左边：

 

 

    <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 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="width:97px;height:97px;margin-left: 97px;">
            <img src="左箭头图片地址" /></div>
        <div class="next1920" style="width:97px;height:97px;">
            <img src="右箭头图片地址" /></div>
    </div>

4、下方的缩略图改为数字：

 

 

 <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="http://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="http://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="http://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="http://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="http://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 class="footer-more-trigger" style="width:1920px;height:30px;padding:0px;border:none;left:-960px;background: url(http://demo.taobaoux.com/Carousel/Carousel_bg.png) repeat;top:525px;">
                            <ul class="bbs-taobaoux-com" style="width:950px;height:30px;margin:0 auto;text-align: center;">
                                <li style="display: inline;margin: 0 5px;padding: 5px;opacity: 0.5;cursor:pointer;color:#000;background:#fff;line-height:30px;">1</li>
                                <li style="display: inline;margin: 0 5px;padding: 5px;opacity: 0.5;cursor:pointer;color:#000;background:#fff;line-height:30px;">2</li>
                                <li style="display: inline;margin: 0 5px;padding: 5px;opacity: 0.5;cursor:pointer;color:#000;background:#fff;line-height:30px;">3</li>
                                <li style="display: inline;margin: 0 5px;padding: 5px;opacity: 0.5;cursor:pointer;color:#000;background:#fff;line-height:30px;">4</li>
                                <li style="display: inline;margin: 0 5px;padding: 5px;opacity: 0.5;cursor:pointer;color:#000;background:#fff;line-height:30px;">5</li>
                            </ul>   
                        </div>

5、不喜欢底部的半透明图片？
找到下面这段代码：

 

 

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

删除

 

 

background: url(http://demo.taobaoux.com/Carousel/Carousel_bg.png) repeat;

修改滚动动画效果：

找到'effect': 'scrollx'  把scrollx改为scrolly就是垂直滚动，改为fade就是淡隐淡现。

7、修改滚动动画速度：

在'effect': 'scrollx',后面添加一个属性 'duration':0.5,
默认值就是0.5，如果需要加快滚动速度，把0.5改为0.1；需要滚动速度慢一点，就把0.5加大，建议改为0.9以内。

店铺模板

350店铺模板

查看模板 注册领取

手机模板

350手机模板

查看模板 注册领取

详情模板

350详情模板

查看模板 注册领取

免费领取

350免费模板

送一套模板 免费注册体验

海报模板

350海报模板

在线设计

购买/价格

350模板问题

版本价格 如何购买 模板教程

工具

350更多工具

350主图视频 更多工具
标签：全屏轮播代码,淘宝轮播代码    
如没特殊注明，文章均为350模板官网原创,转载请注明来自http://www.seo-lv.com//zxzs/95.html
相关文章推荐
淘宝主图尺寸怎么修改？处理技巧有哪些？
淘宝商家开店后需要上传产品，需要设置些信息需要设置。商品的主图是商家设置的， ...
淘宝网首页怎么装修？有何设计技巧？
人都是视觉动物，每个人都会花时间去欣赏美好的事物，这也适用于淘宝店。对于淘宝 ...
淘宝店标怎么做？有什么技巧？
我们做电子商务，尤其是淘宝，还是比较赚钱的。淘宝店为了吸引人。geng很多顾客进店 ...
无线端淘宝店铺怎么装修抢占PC端的流量
就目前来说，淘宝无线端是一个大的趋势。随着淘宝手机无线端流量的暴涨，淘宝店家 ...
淘宝店铺APP与PC端店铺装修注意点
淘宝店铺装修不简单，不仅仅是装修手机端或者APP端就可以了。尤其是现在。APP端流量 ...
新手福利-淘宝装修教程
新手福利-淘宝装修教程主要介绍装修的版块有哪些，要注意的地方 一．淘宝店铺装修 ...
装修淘宝店导航详解与步骤技巧说明
装修淘宝店导航详解与步骤技巧说明 如大家知道的一样，淘宝网店装修需要装修很多地 ...
淘宝店装修的代码怎么替换
淘宝店装修的代码怎么替换 在淘宝网店装修的过程中，我们需要用到各种各样的装修模 ...
淘宝手机店铺装修主图技巧【服装】
淘宝手机店铺装修主图技巧【服装】 如今，使用手机购物的行为已如火如荼，因此很多 ...
淘宝店宝贝分类怎么装修
淘宝店宝贝分类怎么装修 装修淘宝网店时，首先我们需要弄清楚自己的网店有什么优势 ...