工作原因，花時間研究了一下淘寶店鋪的前端代碼，發現淘寶店鋪的前端就像是戴着鐐銬跳舞，我們沒法在中間嵌入js代碼，因爲淘寶的編輯器不支持js代碼，這也是爲了整個網站的安全着想吧。
去網上搜了一些關於淘寶店鋪裝修的代碼，在網店上測試了一番，對於我這種沒接觸過淘寶店鋪的裝修的人來說，剛開始還真不知道寫完之後在哪裏測試。摸索了大半天（這個還真的得摸索大半天，因爲後來才發現這是一個被廢棄的官方旗艦店，而所有的鏈接都是鏈到了現在的旗艦店，所以我每次看到的都不是我改過的頁面）。
經測試，發現這段代碼是可執行的，我把它粘貼到下面，方便以後的解釋，我把主要的代碼提煉出來。
<div class="slider-promo J_Slider J_TWidget" data-widget-config="{'effect':'scrolly','duration': 0.5,'triggerType':'mouse','autoplay':true,'contentCls': 'lst-main', 'navCls':'lst-trigger', 'activeTriggerCls': 'current'}" data-widget-type="Slide" style="width: 950px; height: 400px">
<ul class="lst-main">
<li>
<a href="#" style="width: 950px; height: 400px" target="_blank"><img border="0" src="圖片鏈接" width="950" /></a></li>
<li>
<a style="width: 950px; height: 400px" target="_blank"><img height="400" src="圖片鏈接" width="950" /> </a></li>
<li>
<a style="width: 950px; height: 400px" target="_blank"><img height="400" src="圖片鏈接" width="950" /> </a></li>
</ul>
</div>這段代碼能實現淘寶店鋪的首頁幻燈片效果，我初一看也覺得很奇怪，沒有一個js代碼？ 其實認真去分析才發現，其中有一個很關鍵的詞：class="slider-promo J_Slider J_TWidget" 這個詞也就意味着，淘寶內置的js庫可以之間通過該屬性對該div中的內容進行控制
另外data-widget-config 是對幻燈片屬性的配置：
data-widget-config="{'effect':'scrolly','duration': 0.5,'triggerType':'mouse','autoplay':true,'contentCls': 'lst-main', 'navCls':'lst-trigger', 'activeTriggerCls': 'current'}" 爲了使上面的代碼更加容易理解，我去淘寶官網查了一下淘寶店鋪開發文檔我把相關信息複製過來，如下：
==== 配置參數列表====
{
| effect
| none/fade/scrolly/scrollx
(默認值：none)
| 切換時的動畫效果
none, 最樸素的顯示/隱藏效果
fade, 可實現淡隱淡現的效果
scrolly, 垂直滾動
scrollx, 水平滾動
|-
| easing
| easeOutStrong/easeBoth
| 滾動的動畫方方式
|-
| countdown
| true/false (默認值：false)
| 是否開啓倒計時樣式
|-
| countdownFromStyle
| 自定義值
| 設定倒計時最終樣式<br>
如: width:15px 表示進度條最終寬度,可先在CSS裏對樣式進行定義
|-
| navCls
| 自定義值
| 對其進行輪播的目標列表的class值
|-
| contentCls
| 自定義值
| 輪播列表所對應的內容列表的class值
|-
| delay
| 自定義數值 (默認值：1)
| 延遲加載時間<br>
.1 == 100ms
|-
| triggerType
| mouse/click<>
(默認值：mouse)br<br>
| 觸發方式——
mouse：鼠標經過觸發<br>
click：鼠標點擊觸發<br>
|-
| hasTriggers
| true/false (默認值：true)
| 是否設置觸發點
|-
| steps
| 自定義數值 (默認值：1)
| 切換視圖內有多少個panels
|-
| viewSize
| 自定義值
| 切換視圖區域的大小。<br>
一般不需要設定此值，僅當獲取值不正確時，用於手工指定大小
|-
| activeIndex
| 自定義數值 (默認值：0)
| 默認激活的列表項
|-
| activeTriggerCls
| 自定義值 (默認值：active)
| 默認激活列表項的class值
|-
| autoplay
| true/false (默認值：true)
| 是否自動播放
|-
| circular
| true/false (默認值：true)
| 是否有循環滾動效果
|-
|duration
| 自定義值（默認值：0.5）
| 動畫時長
.1 = 100ms
|}
其實把上面的參數熟悉之後，改幻燈片的代碼的重點也就基本上掌握了。運用的時候只要按照上面的格式，然後根據自己的需要修改相關參數就可以很快的製作出幻燈片。
當然<li>標籤裏面的內容是可以根據自己的需求進行修改的，下面是相對簡潔的方式，這裏不多加贅述，因爲感覺文章篇幅太長會影響大家網上閱讀的體驗，所以我寧願寫成連載的方式，也不願意把文章寫成長腳襪——又臭又長。
<li>
<a style="width: 950px; height: 400px" target="_blank"><img height="400" src="圖片鏈接" width="950" /> </a></li>
