TShopping

 找回密碼
 註冊
搜索
查看: 230|回復: 0

[分享] jQuery 輪播式廣告插件 flexslider 使用指南

[複製鏈接]
發表於 2017-7-25 22:49:07 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
展示網站
netyea.png

發現了個不錯的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 代碼:
  1. $(window).load(function() {
  2.     $('.flexslider').flexslider({
  3.         animation: 'slide',                 // 必備參數,自動滑動
  4.         animationLoop: true,             // 是否循環滑動,默認為true
  5.          itemWidth: 500,                   // 定義每個item寬度,單位為px,默認為100%
  6.          itemMargin: 0,                     // 定義每個item margin,默認為0
  7.          controlNav: false,                 // 是否顯示滑動控制小圓點,默認為true
  8.         directionNav: false,                // 是否顯示左右滑動控制控件,默認為true
  9.         slideshowSpeed: 2000,           // 每次自動滑動間隔時間,默認為7000,單位為ms
  10.          animationSpeed: 500            // 手動點擊滑動時間,默認為600,單位為ms
  11.      });
  12. });
複製代碼

文章出處

 

臉書網友討論
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2017-11-19 03:31 , Processed in 0.059068 second(s), 25 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表