1. 程式人生 > >JQuery實現banner圖片的輪播效果

JQuery實現banner圖片的輪播效果

最近在學習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-->