花魁直播高品质美女在线视频互动社区 - 花魁直播官方版

 歡迎來到素材無憂網(wǎng),按 + 收藏我們
登錄 注冊 退出 找回密碼

PbootCMS首頁Banner輪播制作和調(diào)用教程

時間: 2024-02-25 10:04 閱讀: 作者:素材無憂網(wǎng)

首頁的大圖輪播,算是網(wǎng)站中的一道"硬菜"了。大圖美不美觀,直接影響整個網(wǎng)站的格局。 當(dāng)然,這道"硬菜"的關(guān)鍵部分應(yīng)該掌握在設(shè)計師手中,設(shè)計師就是這道菜的廚師,而寫模板的只不過是端盤子的而已。
可是,職業(yè)不分貴賤,即便大廚燒出了美味的菜肴,服務(wù)員端菜的時候往里面加了只蒼蠅,顧客也還是會反胃的。
所以,不要小看端盤子的,他也是整個流程中重要的一環(huán)。
回到正題,因為是模板制作教程,所以關(guān)于圖片怎么輪播的部分就不展開講了。各種素材站有很多炫酷的jQuery輪播插件,可以自行選擇。
教程中將以swiper為例,來做一個簡單的輪播。
swiper是一個強(qiáng)大的輪播插件,關(guān)于具體的一些使用方法,請自行參閱官方文檔。
一、先將swiper的文件放置在文件夾中,并引入到模板文件。
二、寫HTML結(jié)構(gòu)
三、調(diào)用輪播圖片
這里有兩個思路,使用PbootCMS自帶的輪播圖片模塊或者自建一個輪播模型。
1、使用PbootCMS自帶的幻燈片模塊
???????{pboot:slide gid=1 num=3}
[slide:title]

{/pboot:slide}
很簡單,使用{pboot:slide}標(biāo)簽調(diào)用即可,其中g(shù)id是分組,num是數(shù)量。
自帶的輪播擴(kuò)展內(nèi)置了10個分組,有標(biāo)題、副標(biāo)題和鏈接地址,一般輪播夠用了。
2、自建一個輪播模型
這是本篇教程著重要講解的部分。
關(guān)于模型概念的理解,在使用PbootCMS制作模板的時候是非常重要的。
(1)、新建一個輪播模型

輸入模型名稱,模型類型選擇列表,模板留空,提交。輪播模型就建好了,是不是很簡單。
(2)、添加模型字段

這里可以自己添加需要在輪播中出現(xiàn)的一些元素,比如覆蓋在輪播圖片上的文字,點擊跳轉(zhuǎn)的鏈接等等,更高級一些甚至還可以添加一個表示當(dāng)前輪播圖片的動畫效果的CSS名稱,讓不同的輪播圖用不同的動畫效果出現(xiàn)。(只要開動腦筋,PbootCMS的模型讓一切皆有可能)
(3)、添加輪播欄目

添加欄目的理由:
最簡單的理由就是添加內(nèi)容需要選擇欄目,不然不能添加。不過,仔細(xì)思考一下,一個網(wǎng)站的輪播很有可能不止在首頁頂部調(diào)用,比如一些側(cè)邊欄廣告輪播。那么這里的欄目就相當(dāng)于默認(rèn)輪播擴(kuò)展中的分組,不同的是,這里的欄目是可以無限分組的,而且還可以根據(jù)欄目名稱知道這是顯示在哪里的輪播,方便管理。
(4)、接下來就可以添加輪播圖了

可以看到,剛才添加的字段"輪播文字"也在這里顯示了。
(5)、輪播圖調(diào)用
關(guān)于自建模型中輪播圖的調(diào)用,參考官網(wǎng)文檔:指定列表調(diào)用 即可。
四、添加swiper的js部分
???????
注意:代碼需要在swiper.min.js后面。完成,剩下的就是CSS樣式美化問題了??偨Y(jié):輪播圖制作的時候主要就是調(diào)用思路。使用自帶的輪播擴(kuò)展,可以直接添加調(diào)用;使用模型的方式,可以做一些更高級的定義。

版權(quán)聲明: 本站資源均來自互聯(lián)網(wǎng)或會員發(fā)布,如果侵犯了您的權(quán)益請與我們聯(lián)系,我們將在24小時內(nèi)刪除!謝謝!

轉(zhuǎn)載請注明: PbootCMS首頁Banner輪播制作和調(diào)用教程

標(biāo)簽: PbootCMS  
相關(guān)文章
推薦文章
模板推薦