由於初學網頁程式設計，接了一個專案需要首頁進行圖片滾動，於是找了這個外掛，剛開始根據flexslider推薦的官方配置使用了一下，圖片一直顯示不出來。經過一番折騰，終於可以了，使用教程以及flexslider下載如下。

首先在html首部宣告flexslider所需要的包，flexsider完整外掛可以在我的網盤裡面下載，網盤地址：http://pan.baidu.com/s/1qWrxm1Y，

<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
 

另外需要在專案中匯入flexslider的fonts資料夾，裡面包含了該外掛的圖示檔案，如左右翻頁圖示

然後用js載入這個外掛，其中.flexslider必須和所要顯示的div的class名相同，裡面有一些屬性如animation等這裡不做詳細解釋，大家意會即可。

<script type="text/javascript" charset="utf-8">
	$(window).load(function() {
		$(.flexslider).flexslider({
			animation : "fade",
			controlsContainer : ".flex-container",
			controlNav : false,
			slideshowSpeed : 5000
		});
	});
</script>
 

<div class="<span style="color:#ff0000;">flexslider</span>">
<span style="white-space:pre">	</span><ul class="slides">
	<span style="white-space:pre">	</span><li><img src="images/1.jpg" /></li>
	<span style="white-space:pre">	</span><li><img src="images/2.jpg" /></li>

	</ul>
</div>
 

貼出一張效果圖