轮播插件——flexslider
輪播插件——flexslider,
首先，當(dāng)我們需要輪播插件的時候呢，去瀏覽器中找自己需要的輪播插件，比如，搜索關(guān)鍵詞“JQuery輪播插件”，就會出來很多網(wǎng)站，選一個點進(jìn)去，預(yù)覽效果，然后下載我們需要的插件。這里我下載的是flexslider輪播插件，下載解壓完之后呢，一共是以下素材，我們選擇必要的東西留下
首先，jquery.flexslider-min是壓縮版的jQuery、jQuery.flexslider的js文件和flexslider的CSS文件（點擊查看文件可以判斷是哪類文件）我們留下（命名一般與下載的文件名一致）
然后呢點進(jìn)去demo文件夾
顯然images里面存放的是素材（圖片），選擇留下，還有就是留下來index這個網(wǎng)頁，便于查看源碼，留下來的東西呢就這些了，(其實留下來的東西也就一個jQuery和css(同名的文件)，還有素材）下面是寫怎么用。
首先我們得有一個自己的jQuery庫，把下載的jQuery放到同一個文件目錄下，css放到css目錄下，然后創(chuàng)建一個HTML
寫一個最簡單的，只需要些存放圖片的div
<body> <div class="flexslider"><ul class="slides "><li><img src="images/kitchen_adventurer_caramel.jpg" alt=""/></li><li><img src="images/kitchen_adventurer_cheesecake_brownie.jpg" alt=""/></li><li><img src="images/kitchen_adventurer_donut.jpg" alt=""/></li><li><img src="images/kitchen_adventurer_lemon.jpg" alt=""/></li></ul> </div> </body>引用js文件與css文件（我們需要的文件）
我們開始寫js代碼：
所謂插件呢，就是幫我們解決問題的，所以并不需要我們?nèi)懯裁磸?fù)雜的東西一般必須要寫的代碼就是
存放圖片li的父元素也就是ul標(biāo)簽的類名調(diào)用同名的方法即可，比如
就可以了，但是在我實際寫的時候呢，這個插件不能這么用，解決問題最直接的方法就是查看源代碼，還記得剛保存下來的那個網(wǎng)頁嗎index，F12打開源代碼查看發(fā)現(xiàn)人家代碼寫的上一級的class名
問題解決了，照抄
animation:’slide’,是切換的方式
prevText: “”,
nextText: “”,見名思義，是兩個方向鍵
direction: “vertical”,是支持觸摸屏
這其實就已經(jīng)實現(xiàn)我們所見的動畫效果了，但是根據(jù)需求呢，我們需要改一下CSS樣式，打開剛剛我們保存的flexslider文件（js文件），在文件的最下部一般會有各種標(biāo)簽的默認(rèn)樣式設(shè)置，比如：
這些樣式是默認(rèn)樣式，如果我們需要改成自己喜歡的樣式的，就需要去了解各寫屬性，比如第三行的代碼
animation: "fade",通過菜鳥網(wǎng)了解它是CSS3的屬性，值得是水平切換還是垂直切換的動畫效果，在js方法里面我們改變?yōu)榇怪狈较虻那袚Q
animation:'slide',這就實現(xiàn)了我們想要的效果。其實輪播的插件大多都是這個套路，不需要去了解每一個。知道怎么用就可以了
這里我們要找的東西呢通過他們的主頁面的源代碼可以知道，看他們引用的各種插件，只要找到與我們下載的文件名一直的插件名，這就是在我們下載的文件中我們必須要留下的文件?？偨Y(jié)不是很到位，最主要的還是多用幾個插件找到其中的方法，用的熟練了就可以了
總結(jié)
以上是生活随笔為你收集整理的轮播插件——flexslider的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： flexslider 轮播图片
- 下一篇： 搜狐影音播放器内核设计