pbootcms 模板制作教程(六) - 手頁(yè)Banner輪播
手頁(yè)的大圖輪播，算是網(wǎng)站中的一道“硬菜”了。大圖美不美觀，直接影響整個(gè)網(wǎng)站的格局。
當(dāng)然，這道“硬菜”的關(guān)鍵部分應(yīng)該掌握在設(shè)計(jì)師手中，設(shè)計(jì)師就是這道菜的廚師，而寫模板的只不過是端盤子的而已。
可是，職業(yè)不分貴賤，即便大廚燒出了美味的菜肴，服務(wù)員端菜的時(shí)候往里面加了只蒼蠅，顧客也還是會(huì)反胃的。
所以，不要小看端盤子的，他也是整個(gè)流程中重要的一環(huán)。
回到正題，因?yàn)槭悄０逯谱鹘坛蹋躁P(guān)于圖片怎么輪播的部分就不展開講了。各種素材站有很多炫酷的jQuery輪播插件，可以自行選擇。
教程中將以swiper為例，來(lái)做一個(gè)簡(jiǎn)單的輪播。
swiper是一個(gè)強(qiáng)大的輪播插件，關(guān)于具體的一些使用方法，請(qǐng)自行參閱官方文檔。
一、先將swiper的文件放置在文件夾中，并引入到模板文件。
二、寫HTML結(jié)構(gòu)
<div id="Banner" class="swiper-container"> <!-- 輪播主體 --> <div class="swiper-wrapper"> <div class="swiper-slide"> <a href="#"> <img src="#" alt="#"> </a> </div> </div> <!-- 輪播控件 --> <div class="banner-prev"> <i class="fa fa-angle-left"></i> </div> <div class="banner-next"> <i class="fa fa-angle-right"></i> </div> </div>
三、調(diào)用輪播圖片
這里有兩個(gè)思路，使用PbootCMS自帶的輪播圖片模塊或者自建一個(gè)輪播模型。
1、使用PbootCMS自帶的幻燈片模塊
{pboot:slide gid=1 num=3}
<div class="swiper-slide">
<a href="[slide:link]">
<img src="[slide:src]" alt="[slide:title]">
</a>
</div>
{/pboot:slide}很簡(jiǎn)單，使用{pboot:slide}標(biāo)簽調(diào)用即可，其中g(shù)id是分組，num是數(shù)量。
自帶的輪播擴(kuò)展內(nèi)置了10個(gè)分組，有標(biāo)題、副標(biāo)題和鏈接地址，一般輪播夠用了。
2、自建一個(gè)輪播模型
這是本篇教程著重要講解的部分。
關(guān)于模型概念的理解，在使用PbootCMS制作模板的時(shí)候是非常重要的。
（1）、新建一個(gè)輪播模型
輸入模型名稱，模型類型選擇列表，模板留空，提交。輪播模型就建好了，是不是很簡(jiǎn)單。
（2）、添加模型字段
這里可以自己添加需要在輪播中出現(xiàn)的一些元素，比如覆蓋在輪播圖片上的文字，點(diǎn)擊跳轉(zhuǎn)的鏈接等等，更高級(jí)一些甚至還可以添加一個(gè)表示當(dāng)前輪播圖片的動(dòng)畫效果的CSS名稱，讓不同的輪播圖用不同的動(dòng)畫效果出現(xiàn)。（只要開動(dòng)腦筋，PbootCMS的模型讓一切皆有可能）
（3）、添加輪播欄目
添加欄目的理由：
醉簡(jiǎn)單的理由就是添加內(nèi)容需要選擇欄目，不然不能添加。不過，仔細(xì)思考一下，一個(gè)網(wǎng)站的輪播很有可能不止在手頁(yè)頂部調(diào)用，比如一些側(cè)邊欄廣告輪播。那么這里的欄目就相當(dāng)于默認(rèn)輪播擴(kuò)展中的分組，不同的是，這里的欄目是可以無(wú)限分組的，而且還可以根據(jù)欄目名稱知道這是顯示在哪里的輪播，方便管理。
（4）、接下來(lái)就可以添加輪播圖了
可以看到，剛才添加的字段“輪播文字”也在這里顯示了。
（5）、輪播圖調(diào)用
關(guān)于自建模型中輪播圖的調(diào)用，參考官網(wǎng)文檔：指定列表調(diào)用 即可。
四、添加swiper的js部分
<script>
var Banner = new Swiper ('#Banner', {
speed: 1500,
autoplay: {
delay: 5000,
},
loop: true,
//Pagination
pagination: {
el: '.swiper-pagination',
clickable: true,
},
//Navigation
navigation: {
nextEl: '.banner-next',
prevEl: '.banner-prev',
},
})
</script>注意：代碼需要在swiper.min.js后面。
完成，剩下的就是CSS樣式美化問題了。
總結(jié)：輪播圖制作的時(shí)候主要就是調(diào)用思路。使用自帶的輪播擴(kuò)展，可以直接添加調(diào)用；使用模型的方式，可以做一些更高級(jí)的定義。
