jquery-flexslider
FlexSlider 是一个超棒的响应式 jQuery 幻灯片插件。它拥有多个特性:1.简单,语义标记。2.支持所有主流浏览器。3.水平/垂直滑动和淡出动画。4.多个幻灯片支持,回调 API 等。5.硬件加速触摸滑动支持。6.自定义导航选项。7.兼容最新版本的 jQuery 。

HTML


<!-- 放置在网页的任何地方 -->
<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>

JS


// 也可以使用 $(document).ready()
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide"
  });
});

高级选项

属性 默认 描述
namespace "flex-" String 前缀字符串附加到插件生成的所有元素的类。
selector ".slides > li" Selector 选择器必须匹配一个简单的模式。 '{container} > {slide}'
animation "fade" String 控制动画类型, "fade""slide"
easing "swing" String 使用 jQuery 动画。
direction "horizontal" String 控制动画方向, "horizontal" or "vertical"
reverse false Boolean 反转动画方向。
animationLoop true Boolean 给幻灯片一个无缝的无限循环。
smoothHeight false Boolean 为不同高度的幻灯片平滑滑动滑块的高度。
startAt 0 Number 幻灯片的起始滑块,数组符号。
slideshow true Boolean 设置幻灯片以使滑块自动生成动画。
slideshowSpeed 7000 Number 设置幻灯片循环的速度(以毫秒为单位)。
animationSpeed 600 Number 设置动画的速度,以毫秒为单位。
initDelay 0 Number 设置初始化延迟,以毫秒为单位。
randomize false Boolean 加载时,随机化幻灯片顺序。
pauseOnAction true Boolean 在与控件元素交互时暂停幻灯片。
pauseOnHover false Boolean 当(鼠标)悬停在幻灯片上时暂停幻灯片放映,然后在不再悬停时继续播放。
useCSS true Boolean 幻灯片使用CSS3过渡,如果可用。
touch true Boolean 启用触摸滑动。
video false Boolean 阻止使用CSS3 3D变换,避免图形不正常。
controlNav true Boolean 为每个幻灯片的分页控制创建导航。
customDirectionNav "" jQuery Object/Selector 容器自定义导航标记。
directionNav true Boolean 创建上一个/下一个箭头导航。
prevText "Previous" String 设置文本 “previous” directionNav
nextText "Next" String 设置文本 “next” directionNav
keyboard true Boolean 允许幻灯片通过键盘左/右键导航。
multipleKeyboard false Boolean 允许键盘导航影响多个幻灯片。
mousewheel false Boolean 允许幻灯片通过鼠标滚轮导航。
pausePlay false Boolean 创建暂停/播放元素以控制幻灯片。
pauseText "Pause" String 设置文本 “pause” pausePlay
playText "Play" String 设置文本 “play” pausePlay
controlsContainer "" jQuery Object/Selector 应该附加导航元素的容器。
manualControls "" jQuery Object/Selector 定义要用来代替动态的元素 controlNav
sync "" Selector 使用另一个幻灯片镜像此幻灯片上执行的操作。
asNavFor "" Selector 将滑块转换为另一个幻灯片的缩略图导航。
itemWidth 0 Number 个别轮播项目的Box-model宽度,包括水平边框和内边距。
itemMargin 0 Number 轮播项目之间的边距。
minItems 0 Number 应显示的轮播项目最小数量。
maxItems 0 Number 应显示的轮播项目的最大数量。
move 0 Number 应该在动画上移动的轮播项目数。
start empty Function 当加载第一张幻灯片时触发。
before empty Function 与每个幻灯片异步触发。
after empty Function 每个幻灯片完成后触发。
end empty Function 当到达最后一个幻灯片时触发(异步)。
added empty Function 添加幻灯片后触发。
removed empty Function 删除幻灯片后触发。