0712-2888027 189-8648-0214
微信公眾號

孝感風(fēng)信網(wǎng)絡(luò)科技有限公司微信公眾號

當(dāng)前位置:主頁 > 技術(shù)支持 > Javascript/JQuery > JQuery flexSlider響應(yīng)式圖片輪播插件

JQuery flexSlider響應(yīng)式圖片輪播插件

時間:2018-08-09來源:風(fēng)信官網(wǎng) 點擊: 1246次

Flexslider是一款基于的jQuery內(nèi)容滾動插件。它能讓你輕松的創(chuàng)建內(nèi)容滾動的效果,具有非常高的可定制性。開發(fā)者可以使用Flexslider輕松創(chuàng)建各種圖片輪播效果、焦點圖效果、圖文混排滾動效果。

源代碼下載地址:https://github.com/woothemes/FlexSlider/zipball/master

更多使用示例演示地址:http://flexslider.woothemes.com/index.html

Flexslider具有以下特性:

支持滑動和淡入淡出效果。
支持水平、垂直方向滑動。
支持鍵盤方向鍵控制。
支持觸控滑動。
支持圖文混排,支持各種html元素。
自適應(yīng)屏幕尺寸。
可控制滑動單元個數(shù)。
更多選項設(shè)置和回調(diào)函數(shù)。
 

引入flexslider.css和jquery.flexslider-min.js文件

<link rel="stylesheet" href="../../common/css/flexslider.css" />
<script type="text/javascript" src="../../common/js/jquery.flexslider-min.js"></script>

HTML代碼結(jié)構(gòu):

<!-- 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>

JQuery代碼結(jié)構(gòu):

// Can also be used with $(document).ready()
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide"
  });
});


Flexslider選項設(shè)置

參數(shù) 描述 默認值
animation 動畫效果類型,有"fade":淡入淡出,"slide":滑動 "fade"
easing 內(nèi)容切換時緩動效果,需要jquery easing插件支持 "swing"
direction 內(nèi)容滾動方向,有"horizontal":水平方向 和"vertical":垂直方向 "horizontal"
animationLoop 是否循環(huán)滾動 true
startAt 初始滑動時的起始位置,定位從第幾個開始滑動 0
slideshow 是否自動滑動 true
slideshowSpeed 滑動內(nèi)容展示時間(ms) 7000
animationSpeed 內(nèi)容切換時間(ms) 600
initDelay 初始化時延時時間 0
pauseOnHover 鼠標(biāo)滑向滾動內(nèi)容時,是否暫停滾動 false
touch 是否支持觸摸滑動 true
directionNav 是否顯示左右方向箭頭按鈕 true
keyboard 是否支持鍵盤方向鍵操作 true
minItems 一次最少展示滑動內(nèi)容的單元個數(shù) 1
maxItems 一次最多展示滑動內(nèi)容的單元個數(shù) 0
move 一次滑動的單元個數(shù) 0
回調(diào)函數(shù) start: function(){},
           before: function(){},
           after: function(){},
           end: function(){},
           added: function(){},
           removed: function(){},
           init: function(){},
-

 

欄目列表
推薦內(nèi)容
熱點內(nèi)容
展開