24h購物| | PChome| 登入
2023-01-13 08:54:52| 人氣11| 回應0 | 下一篇
推薦 0 收藏 0 轉貼0 訂閱站台

jQuery 輪播式告白插件 flexslider 利用指南

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

展現網站


發現了個不錯的jQuery幻燈片插件flexslider，有接近3000 Star，應當說是很靠譜的，下面是簡單利用教程。

引入代碼

所有代碼都可以在flexlslider的Github上獲得。

引入css 文件和js 文件和jQuery 焦點代碼：

1.png



本文引用自:

我要檢舉
台長： hawkinsibv

您可能對以下文章有興趣

人氣(11) | 回應(0)| 推薦 (0)| 收藏 (0)| 轉寄
全站分類: 搞笑趣味(笑話、趣事、kuso) | 個人分類: NetYea |
此分類下一篇:Arduino的 RGB led燈(共陽極)的利用

我要回應
否 是 (若未登入"個人新聞台帳號"則看不到回覆唷!)
* 請輸入識別碼：
請輸入圖片中算式的結果(可能為0) 
(有*為必填)
TOP
詳全文