发现了个不错的 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 }); });