發現了個不錯的 jQuery 幻燈片插件 flexslider，有 接近 3000 Star，應該說是很靠譜的，下面是簡單使用教程。
引入代碼
所有代碼都可以在 flexlslider 的 Github 上獲得。
引入 css 文件和 js 文件和 jQuery 核心代碼：
1 <link rel="stylesheet" href="flexslider.css"> 2 <script src="jquery.min.js"></script> 3 <script src="jquery.flexslider-min.js"></script>
HTML 代碼：
1 <!-- Place somewhere in the <body> of your page --> 2 <div class="flexslider"> 3 <ul class="slides"> 4 <li> 5 <img src="slide1.jpg" /> 6 </li> 7 <li> 8 <img src="slide2.jpg" /> 9 </li> 10 <li> 11 <img src="slide3.jpg" /> 12 </li> 13 <li> 14 <img src="slide4.jpg" /> 15 </li> 16 </ul> 17 </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 }); });