js網站輪播圖怎麼做如何做？雞哥教你簡單製作效果炫酷

標籤：估計   auto   下載頁面   jpg   產生   點擊下載   jquery代碼   提升   nbsp   

日了狗啦，剛剛雞哥辛苦碼了那麼多字全丟了又要重新寫，這是第二遍寫了...
今天雞哥給小白寫個不需要寫js原生代碼，只需要幾個外掛程式和一段通俗易懂得jquery代碼就能搞定的輪播圖，當然js原生代碼寫著也不算很繁瑣，但是有些浪費時間，更何況很多人並不會用js直接寫包括雞哥，當年在學校還是研究過一段時間js的，當時還獨自寫了一個輪播圖俘獲了多少同班妹子的芳心，不過現在是基本廢了，這東西要常寫，不然忘的很快。

唉，本來還有妹子等著雞哥呢，我這一大意文章丟了，重新寫的話估計來不及了，先打個電話讓妹子回家吧~~  好了切入主題！

本次教程的原理就是用一個大神寫好的外掛程式，裡邊包含了很多封裝好的js函數供我們使用，我們只需引入這個外掛程式和jquery庫配合，然後寫出規定的html結構，最後再插一段通俗易懂的jquery代碼就大功告成了~~ 
大家先百度一下“大話主席”  第一個就是點進去點擊下載頁面



下載之後是一個本地的網站其實和線上是一樣的下載不下載都一樣，開啟之後點擊基礎效果，如果想下載擴充效果的話是要付費的，反正也不貴19塊錢，就當給作者得辛苦錢（雞哥是不是要想這貨要點廣告費啊~~~哈哈哈）



雞哥沒截完，其實下邊還有很多效果，右側紅框框住的是輪播效果的屬性選擇，可以產生一段jquery代碼（橙色部分代碼），就是剛才所說的那段通俗易懂得代碼。這段代碼在最後是要用到的，我在後邊會講到。
好了，大話主席的外掛程式簡單的介紹完了，下邊給大家列一下需要得外掛程式：
1：jquery1.42.min.js                                 / jquery庫 知道點js的人都懂得
2：jquery.SuperSlide.2.1.1.js                 /  這個就是剛剛介紹得大話主席的外掛程式
這倆外掛程式雞哥會在大傢伙看完文章後在結尾附上下載連結，雞哥打包好的。
下邊雞哥介紹下這倆檔案如何引要放在哪裡先看個：



如，在body結束標籤後邊引入我們的這倆檔案，當然你的路徑可能跟我的不一樣。
特別注意一下：引入的順序一定要先引入jquery外掛程式然後引入大話主席外掛程式不然沒得效果~~~

知道怎麼引入之後大家再看看html的結構怎麼寫，必須要按照這個結構，不然也沒得效果，見下方代碼結構。

  <div class="box">      / 此標紅類名後邊會用到 留意   <div class="hd">     <ul><li>1</li><li>2</li><li>3</li></ul>   </div>   <div class="bd">     <ul><li>1.jpg</li><li>2.jpg</li><li>3.jpg</li></ul>   </div>  </div>

如上述代碼：一個大的div包住倆小div，大div類名就是標紅地方可以任意起，倆小div是固定的類名，hd就是head的縮寫，就是輪播圖中的1234之類的按鈕。bd縮寫就是body，就是輪播圖啦。
好了，現在已經基本差不多了就差一個產生的剛剛講過的那個橙色部分代碼了，按照自己想要的效果產生一個代碼，然後複製到你引入大話主席代碼的下邊就ok了，見下方代碼：

  jQuery(".box").slide({mainCell:".bd ul",effect:"fold",autoPlay:true,interTime:7000,delayTime:1000});

標紅的地方填的就是剛剛所講的大div的類名，特別注意前邊有個點。
到現在已經基本成了，但是大家還不要忘了給你的html加上css樣式喲，怎麼樣是不是很簡單~~~

好了文章到這終於寫完了，第二次啊.....可能寫的有些粗糙，畢竟現在已經淩晨一點多了，不知各位看官覺得寫的怎麼樣，哪裡沒寫明白請在下方評論中寫出，這樣及提升了你也提升了我。

感謝瀏覽啊

原文連結：js網站輪播圖怎麼做如何做？雞哥教你簡單製作效果炫酷

js網站輪播圖怎麼做如何做？雞哥教你簡單製作效果炫酷