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
- });
- });
複製代碼 網站架設
文章出處