淘寶拓展版店鋪中可以使用輪播焦點(diǎn)圖功能，并且用代碼即可實(shí)現(xiàn)，本文講解Slide卡盤(pán)式輪播圖的制作方法。大家跟淘寶學(xué)堂地瓜一起學(xué)習(xí)學(xué)習(xí)，學(xué)無(wú)止境，技多不壓身。
什么是Slide卡盤(pán)式輪播視圖？就像上面的圖示，淘寶和有啊首頁(yè)的焦點(diǎn)圖。
雖然這兩個(gè)圖示不大一樣，一個(gè)是數(shù)字按鈕，一個(gè)是圖片右側(cè)的文字按鈕，但他們用的插件庫(kù)文件確是相同的，只不過(guò)用CSS將其改變顯示效果而已。
它的制作方法和我們上篇講過(guò)的文章？《Tab標(biāo)簽輪播圖》相似，必不可少的是調(diào)用代碼和Html結(jié)構(gòu)代碼，同時(shí)以CSS代碼輔助顯示效果。
<div style="position: relative;" id="demo2" class="J_TWidget"data-widget-type="Slide"data-widget-config="{
'effect': 'scrollx',
'autoplay': true
}">
<div style="position: absolute;" class="ks-switchable-content">
<div>
<imgsrc="http://xxx.gif" border="0" height="150" width="470">
</div>
<div>
<imgsrc="http://xxx.jpg" border="0" height="150" width="470">
</div>
<div>
<imgsrc="http://xxx.jpg" border="0" height="150" width="470">
</div>
<div>
<imgsrc="http://xxx.jpg" border="0" height="150" width="470">
</div>
<div>
<imgsrc="http://xxx.jpg" border="0" height="150" width="470">
</div>
</div>
<ul class="ks-switchable-nav">
<li class="">
<div class="ks-switchable-trigger-content">1</div>
</li>
<li class="ks-active">
<div style="width: 12.406px;" class="ks-switchable-trigger-mask"></div>
<div class="ks-switchable-trigger-content">2</div>
</li>
<li>
<div class="ks-switchable-trigger-mask"></div><div class="ks-switchable-trigger-content">3</div>
</li>
<li>
<div class="ks-switchable-trigger-mask"></div><div class="ks-switchable-trigger-content">4</div>
</li>
<li>
<div class="ks-switchable-trigger-mask"></div><div class="ks-switchable-trigger-content">5</div>
</li>
</ul>
</div>
如果你看過(guò)上篇Tab輪播圖的文章，可能對(duì)上面的粗體字所代表的內(nèi)容會(huì)明白一些：
1、J_TWidget表示從這里要開(kāi)始用庫(kù)文件渲染；
2、data-widget-type="Slide"表示用Slide卡盤(pán)方式來(lái)進(jìn)行渲染；
3、ks-switchable-content是輪播圖內(nèi)容的開(kāi)始；
4、ks-switchable-nav是數(shù)字或者文字按鈕的內(nèi)容區(qū)；
5、ks-active是默認(rèn)顯示的按鈕；
6、ks-switchable-trigger-mask是沒(méi)有激活的按鈕狀態(tài)樣式；
7、ks-switchable-trigger-content是觸發(fā)狀態(tài)時(shí)的樣式。
Html代碼準(zhǔn)備完畢，還需要CSS樣式讓其顯示得更加規(guī)矩：
<style>
#demo2 { position: relative; width: 470px; height: 150px; border: 1px solid #B6D1E6; overflow: hidden; margin: 10px;}
#demo2 .ks-switchable-nav { position: absolute; bottom: 5px; right: 5px; z-index: 99; }
#demo2 .ks-switchable-nav li {
float: left;
width: 16px;
height: 16px;
line-height: 16px;
margin-left: 3px;
background-color: #FCF2CF;
border: 1px solid #F47500;
color: #D94B01;
text-align: center;
cursor: pointer;
}
#demo2 .ks-switchable-nav li.ks-active {
width: 18px;
height: 18px;
line-height: 18px;
margin-top: -1px;
color: #FFF;
background-color: #FFB442;
font-weight: bold;
}
#demo2 .ks-switchable-content li { height: 150px; width: 470px; overflow: hidden; }
#demo2 .ks-switchable-nav li,
#demo2 .ks-switchable-trigger-content {
position: relative;
}
#demo2 .ks-switchable-trigger-mask {
position: absolute;
right: 0;
width: 18px;
height: 18px;
background-color: #FF9415;
visibility: hidden
}
#demo2 .ks-active .ks-switchable-trigger-mask {
visibility: visible
}
</style>
將上面的Html和CSS代碼一起粘貼到淘寶拓展版后臺(tái)中，然后預(yù)覽，應(yīng)該就可以生成Slide卡盤(pán)式的輪播圖了。
如果希望制作一些適合自己的特殊輪播焦點(diǎn)圖也可以，只要庫(kù)文件的配置參考列表中的值就可以了，具體列表請(qǐng)看下面：
樂(lè)發(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ī)則
本文來(lái)源： 網(wǎng)店拓展版Slide卡盤(pán)輪播圖方法
