close
網站架設

網站架設 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

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

引入代碼

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

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

arrow
arrow
    文章標籤
    網站架設
    全站熱搜
    創作者介紹
    創作者 juliox56aaj 的頭像
    juliox56aaj

    新竹網站架設

    juliox56aaj 發表在 痞客邦 留言(0) 人氣()