53
搜狐
自定義版塊之滾動圖片製作 - 常見問題
一、前期準備工作：
1.圖片形狀：準備好做輪轉效果的圖片，根據自己的需求，圖片可以是正方形也可以是長方形，當然是要保證清晰美觀的前提下，一般情況下大家用的都是正方形圖片，這裏我們也用正方形來做演示。
2.圖片尺寸與數量：店鋪首頁最大內容顯示區域寬度是990PX，我們的單個圖片大小製作成200X200ＰＸ，當然這個大小可以自己定義，由於圖片大小不一樣，所以最小圖片數量也就不同，因為要保證滾動效果展示能滿足橫向滿屏（雖然這種辦法沒辦法滿足無縫輪轉，但是橫向滿屏還是有必要滿足的），圖片不宜過少，這裏我們使用200X200的正方形圖片，我們就保證圖片數量最小為6張。
3.代碼：
這裏是按照6張滾動圖片，從左至右的方式滾動的。代碼中的#號換成圖片地址即可。代碼中的高度和寬度的限製是200X200，這個寬高值是可有可無的，建議大家加上去，有的朋友做圖片的技術可能不是很好，會造成6張圖片的寬高稍微有些差別，這裏加上200PX的限製，可以稍微統一一下寬高，以免出現滾動圖片變形（這種情況我以前見過不少，變形了會很難看的，大家可以直接複製使用下麵代碼）。
<marquee direction="right" >
<img src="#" height="200" width="200" />
<img src="#" height="200" width="200" />
<img src="#" height="200" width="200" />
<img src="#" height="200" width="200" />
<img src="#" height="200" width="200" />
<img src="#" height="200" width="200" />
</marquee>
注：大家在電腦桌麵上建一個文本文檔，把這段代碼複製到文本文檔裏，以便我們修改。
二．接下來就是開始進入後台實際操作
1.首先把製作的6張圖片上傳到圖片銀行裏麵
圖片上傳到圖片銀行後千萬不要隨便刪除，因為我們要引用，一旦刪除，前台就沒辦法顯示圖片。
上傳圖片的方法和過程就不詳細說了，就跟平時上傳產品圖片一樣。引用圖片的方法如下：
（這裏我隨便拿個圖片演示一下，大家製作的時候使用自己上傳的圖片即可）
這裏使用的是穀歌瀏覽器，有一些瀏覽器點擊右鍵是不會出現“複製圖片網址”這個按鈕的。建議大家使用兼容性較好的穀歌瀏覽器。獲取圖片網址的方法有很多，我們這裏隻講這一種最便捷的。
2.然後我們把從圖片銀行中複製過來的圖片地址添加到我們準備的代碼中。
代碼放的位置就是替換掉#號，千萬記住要引號保留。（這裏我們演示一共加入6張圖片網址，按照順序添加替換#號即可）
用這樣的方法，依次把剩下的5張圖片的網址都加入到代碼中，完成後如圖：
到這裏為止，代碼部分已經製作完畢。下麵開始添加代碼。
3. 打開 My alibaba裝修頁麵
4. 添加自定義裝修板塊
添加如下版塊：
注意：這裏要特別注意，代碼複製進去後千萬不要切換視圖模式，最好別的按鈕都不要動，直接點 擊“確定”按鈕。不然滾動代碼會被刷掉。這裏是成敗的關鍵。
最後更新：2016-12-28 06:49:42