jQuery 輪播式廣告插件 flexslider 使用指南
展示網站發現了個不錯的jQuery幻燈片插件flexslider，有接近3000 Star，應該說是很靠譜的，下面是簡單使用教程。
引入代碼
所有代碼都可以在flexlslider的Github上獲得。
引入css 文件和js 文件和jQuery 核心代碼：
<link rel="stylesheet" href="flexslider.css">
<script src="jquery.min.js"></script>
<script src="jquery.flexslider-min.js"></script>
HTML 代碼：
<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
<ul class="slides">
<li>
<img src="slide1.jpg" />
</li>
<li>
<img src="slide2.jpg" />
</li>
<li>
<img src="slide3.jpg" />
</li>
<li>
<img src="slide4.jpg" />
</li>
</ul>
</div>
JavaScript 代碼：
$(window).load(function() {
$('.flexslider').flexslider({
animation: 'slide', // 必備參數，自動滑動
animationLoop: true, // 是否循環滑動，默認為true
itemWidth: 500, // 定義每個item寬度，單位為px，默認為100%
itemMargin: 0, // 定義每個item margin，默認為0
controlNav: false, // 是否顯示滑動控制小圓點，默認為true
directionNav: false, // 是否顯示左右滑動控制控件，默認為true
slideshowSpeed: 2000, // 每次自動滑動間隔時間，默認為7000，單位為ms
animationSpeed: 500 // 手動點擊滑動時間，默認為600，單位為ms
});
});
文章出處
頁:
[1]