之前用淘寶標(biāo)準(zhǔn)版，做淘寶店鋪裝修買的模板，標(biāo)準(zhǔn)版價(jià)格也不貴，能接受。
但是升級(jí)到拓展版之后，看了看拓展版漂亮點(diǎn)的模板基本都是上百，看得上眼的都是300以上，有點(diǎn)舍不得。于是就自己研究了一個(gè)星期，到處參考到處找代碼?，F(xiàn)在店鋪基本都是自己裝修出來的，心頭滿滿的那個(gè)樂呵，(*^__^*) 嘻嘻……
淘寶拓展版自帶有滾動(dòng)圖片的模塊，但是只能一張圖片一個(gè)鏈接，有點(diǎn)浪費(fèi)首頁(yè)的地方。
嘿嘿，下面來給大家分享下滾動(dòng)圖片中一張圖片中放入多個(gè)商品，并且每個(gè)商品都有相應(yīng)超鏈接的做法。
先用PS按照950px(通欄標(biāo)準(zhǔn)寬度)的寬度，高度就自己定義啦，先制作第一張滾動(dòng)圖片：
如上圖所示，把X個(gè)商品都放在一個(gè)圖片上，我這里暫時(shí)命名為圖片1，保存在本地。
親們可以根據(jù)自己需要做4張或更多的大圖，我這里做了3張950寬的圖片，分別為圖片1、圖片2、圖片3.(假設(shè)每個(gè)圖片有4個(gè)寶貝，就是說我這個(gè)滾動(dòng)模塊里一共可展示12件寶貝)
圖片這里就不展示了。。。
然后親們下載一個(gè)dreamweaver,打開程序，新建一個(gè)“HTML”代碼頁(yè)。
刪除新建頁(yè)面里所有的代碼，使之成為一個(gè)空白代碼頁(yè)面。
在導(dǎo)航欄里選擇“插入”，選擇本地電腦里剛保存的“圖片1”，點(diǎn)擊dreamweaver頁(yè)面的“設(shè)計(jì)”，可以看到打開的圖片1：
接下來，我們對(duì)第一張大圖進(jìn)行分割并單個(gè)加鏈接：
1. 點(diǎn)擊圖片，dreamweaver頁(yè)面下方會(huì)出現(xiàn)該圖片的屬性：
2. 選擇“屬性”里“地圖”下方的框的形狀，如果是規(guī)則形狀可選矩形，如果是不規(guī)則框就選最后一個(gè)多邊形。我這里選擇多邊形，點(diǎn)擊多邊形圖標(biāo)，然后在“圖片1”上先選擇第一個(gè)要分割添加超鏈接的區(qū)域：
按照此方法，把大圖上所有需要添加超鏈接的區(qū)域都單獨(dú)選擇完成：
3. 完成區(qū)域選擇之后，我們來給每個(gè)區(qū)域添加超鏈接：
點(diǎn)擊第一個(gè)選擇區(qū)域，即圖片上的第一雙鞋子，在下方的“屬性”里“鏈接”輸入該寶貝的寶貝詳情頁(yè)地址，親們可以同時(shí)在目標(biāo)里選擇“_blank”(這個(gè)是用來設(shè)定買家點(diǎn)擊圖片后在新窗口打開鏈接)
如此這般，把圖片上的4件寶貝都分別添加好相應(yīng)的超鏈接。
然后，點(diǎn)擊編輯頁(yè)上方的“代碼”，親們可以看到相應(yīng)的代碼，dreamweaver
已自動(dòng)生成相應(yīng)代碼：
4.第一張圖片完成多個(gè)超鏈接的添加，接下來我們按照1-3的方法，在后面插入圖片2，完成超鏈接添加后，再完成圖片3.(親們有更多圖片可依次插入添加)。
5. 接下來，我們開始添加滾動(dòng)圖片代碼：
在dreamweaver已生成代碼的最上方添加代碼如下：
<DIV style="WIDTH: 950px; HEIGHT: 246px" class="slider-promo J_Slider J_TWidget" data-widget-config="{'effect':'scrolly','contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}" data-widget-type="Slide" data-type="scroll">
<ul class=lst-main>
<ul class=lst-main>
nfig="{'effect':'scrolly','contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}" data-widget-type="Slide" data-type="scroll">
如此，滾動(dòng)圖片代碼全部添加完成，嘿嘿
6. 我們?cè)賮碜鲆粋€(gè)不可忽視的步驟：
把我們之前用PS做好的本地的3張大圖全部上傳到網(wǎng)絡(luò)上，我是傳到淘寶的“圖片空間”，然后把代碼中每個(gè)相應(yīng)的本地圖片地址，全部換成圖片空間里圖片的網(wǎng)絡(luò)連接地址。不這么做的話，店鋪里顯示不出來圖片的喲~~~
7. 好了，所有準(zhǔn)備工作完成。進(jìn)入店鋪裝修，添加一個(gè)通欄950px寬的“用戶自定義模塊”，進(jìn)入代碼編輯，把剛才的所有代碼全部復(fù)制上去，保存，發(fā)布，OK!!!
大功告成，趕快去試試吧。淘寶店鋪裝修第一次看起來可能會(huì)有點(diǎn)復(fù)雜，多做幾次，熟能生巧，很贊的一個(gè)滾動(dòng)圖片+多個(gè)超鏈接+新窗口顯示模塊哦!!!
樂發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購(gòu)進(jìn)貨渠道。超市進(jìn)貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購(gòu)信息和超市加盟信息.打造國(guó)內(nèi)超市采購(gòu)商與批發(fā)市場(chǎng)供應(yīng)廠商搭建網(wǎng)上批發(fā)市場(chǎng)平臺(tái),是全國(guó)批發(fā)市場(chǎng)行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。
本文內(nèi)容整合網(wǎng)站：百度百科、知乎、淘寶平臺(tái)規(guī)則
