淘寶裝修全屏輪播代碼、淘寶輪播代碼、淘寶輪_350淘寶裝修模板平臺|350模板官網

350裝修平臺已服務318多萬家 淘寶店裝修，擁有25萬多個 350代理，今日已售488 套模板客戶端下載 350教程論壇 350后臺登陸

?咨詢郵箱：350@seo-lv.com

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.eesewex8.cn//zxzs/95.html

相關文章推薦

淘寶主圖尺寸怎么修改？處理技巧有哪些？: 淘寶商家開店后需要上傳產品，需要設置些信息需要設置。商品的主圖是商家設置的， ...

淘寶網首頁怎么裝修？有何設計技巧？: 人都是視覺動物，每個人都會花時間去欣賞美好的事物，這也適用于淘寶店。對于淘寶 ...

淘寶店標怎么做？有什么技巧？: 我們做電子商務，尤其是淘寶，還是比較賺錢的。淘寶店為了吸引人。geng很多顧客進店 ...

無線端淘寶店鋪怎么裝修搶占PC端的流量: 就目前來說，淘寶無線端是一個大的趨勢。隨著淘寶手機無線端流量的暴漲，淘寶店家 ...

淘寶店鋪APP與PC端店鋪裝修注意點: 淘寶店鋪裝修不簡單，不僅僅是裝修手機端或者APP端就可以了。尤其是現在。APP端流量 ...

新手福利-淘寶裝修教程: 新手福利-淘寶裝修教程主要介紹裝修的版塊有哪些，要注意的地方一．淘寶店鋪裝修 ...

裝修淘寶店導航詳解與步驟技巧說明: 裝修淘寶店導航詳解與步驟技巧說明如大家知道的一樣，淘寶網店裝修需要裝修很多地 ...

淘寶店裝修的代碼怎么替換: 淘寶店裝修的代碼怎么替換在淘寶網店裝修的過程中，我們需要用到各種各樣的裝修模 ...

淘寶手機店鋪裝修主圖技巧【服裝】: 淘寶手機店鋪裝修主圖技巧【服裝】如今，使用手機購物的行為已如火如荼，因此很多 ...

淘寶店寶貝分類怎么裝修: 淘寶店寶貝分類怎么裝修裝修淘寶網店時，首先我們需要弄清楚自己的網店有什么優勢 ...

岛国精品一区免费视频_久久综合给合久久_91精品国产国语大全_欧美日韩在线精品视频二