JQuery實現banner圖片的輪播效果
阿新 • • 發佈:2019-01-23
最近在學習jQuery,發現了一個好用的外掛,可以方便地實現很多網站的banner輪播的效果,這個外掛就是MyFocus了。
MyFoucus官網:http://demo.jb51.net/js/myfocus/
MyFocus非常小巧,它是一個獨立的JS庫,不需要依賴任何JS庫,用它可以製作出網上可以看到的絕大多數輪播效果。下面就來說說
怎麼使用吧:
1、首先到官方下載它的庫檔案
2、在HTML的script標籤中引入MyFocus庫檔案。
3、在script標籤中引入MyFocus的風格檔案
4、link引入對應風格檔案的樣式表
5、在頁面當中填充一個圖片的列表(必須包含在一個叫pic的div中)
6、script程式碼:
<script type="text/javascript">
myFocus.set({
id:'picBox'
})
</script>
下面給出完整的head程式碼:
圖片部分程式碼:<script type="text/javascript" src="js/myfocus-2.0.1.min.js"></script> <script src="js/mf-pattern/mF_YSlider.js"></script> <link rel="stylesheet" href="js/mf-pattern/mF_YSlider.css"> <script type="text/javascript"> myFocus.set({ id:'picBox' }) </script>
<div class="ad" id="picBox"> <div class="loading"><img src="images/loading.gif" alt="載入中"></div> <div class="pic"> <ul> <li><img src="images/ad2.jpg" alt=""></li> <li><img src="images/ad3.jpg" alt=""></li> <li><img src="images/ad4.jpg" alt=""></li> </ul> </div> </div><!--ad-->