安排，閱讀這篇文章下載代碼源碼
知識星球運營篇
循環滾動的產品模塊
裝修國際站店鋪的時候，經常能看見一些效果比較美觀或炫酷的展示樣式，他們是怎么做的呢？我們也想移植到自己的店鋪裝修里要怎么操作呢？今天為主的祥助從知識星球摘取了更新的一節更新的節選內容，分享一下國際站裝修的產品輪播滾動的一段代碼和操作方法。
如何加入祥助的知識星球？請點擊閱讀：
Tips：微信壓縮GIF圖的原因，看起來會發抖一樣，實際是正常滾動的
產品輪播滾動代碼
一
安裝代碼編輯器
首先我們需要在計算機上安裝一款合適的代碼編輯器，普通用戶推薦安裝 Text 3，是主流代碼編輯器中小巧精悍，深受程序員們喜愛的一款編輯器，并且啟動速度算是最快的。所以同時也很適合替代txt文本文檔的功能使用，用來編輯一些文本文件，配置文件，參數文件等。推薦做阿里國際站運營的朋友也安裝一款代碼編輯器，來輔助解決日常工作中的一些使用需求。如何安裝和漢化 Text 3呢？請閱讀：。
如果你做運營的同時還做獨立站官網的維護，相信你本身也有安裝 Code了，都可以用來編輯。
一
修改圖片鏈接
下載代碼關注公眾號，回復：產品輪播代碼，用安裝好的代碼編輯器打開國際站多個產品輪播滾動裝修代碼.html這個文件，首先使用Ctrl+F快捷鍵淘寶自定義模塊插入圖片，搜索：:url，可以定位到這一行代碼
style="height:474px;width:1920px;background:url(//sc01.alicdn.com/kf/H1eb5fef85e32402ebe1122a037a45194G/200286375/H1eb5fef85e32402ebe1122a037a45194G.jpg);position:relative;">我們提取url里的鏈接，加上https:后復制到瀏覽器地址欄訪問，可以看見這是一張底色的背景圖。如果你有需求，可以用進行修改，沒有需求就保持不動。
接下來依然使用Ctrl+F快捷鍵淘寶自定義模塊插入圖片，搜索：style="width:284px; 點擊下一個依次可以看到有多個帶有這行代碼的代碼段，用-image:url寫的。這里就是顯示的產品圖片的位置。
我們在本地使用將需要顯示的產品圖片修改好，注意幾個點：
修改好這些圖片后將其上傳到圖片銀行，再分別獲取圖片在圖片銀行的鏈接，替換到上圖里位于-image:url里的位置，這樣圖片對應的鏈接就已經完成了替換啦。
一
修改產品鏈接
完成圖片鏈接的修改后，可以看到緊跟著后面的代碼段，有一段： 結構的代碼段。分別將上面 -image對應的產品的鏈接輸入替換到a標簽里的鏈接里（文件演示里使用的是阿里上隨機搜索的一家店鋪的鏈接，請刪除換成自己的）=""的意思是客戶點擊產品主圖的時候，會以新窗口的方式打開這個鏈接，而不會從當前頁面跳轉過去。
一
插入自定義裝修
跟著祥助回到店鋪裝修的后臺，從左側裝修菜單選擇圖文-自定義內容，插入一自定義模塊。切換到源代碼模式，粘貼代碼，點擊保存
Tips：切記，這里源代碼模式直接點擊保存，不要切換回可視化編輯，切換后阿里似乎會讓部分代碼刪除
再點擊預覽-PC或直接發布頁面，就可以看到滾動的效果了。如果需要全屏，請勾選自定義內容選擇里的通欄展示。
效果演示：
{ 硬核干貨區 }
想要看祥助更多分享的國際站運營篇內容？想探討更多運營思路和操盤技巧？加入VIP運營群：
掃碼加入知識星球
·小提示·