jquery.flexisel - 一个响应式轮播 jQuery 旋转木马插件
  • 分享到微信朋友圈
    X
查看演示

关于jquery.flexisel

自从有了 jQuery，就有了用 jQuery 创建的图像轮播。著名的jCarousel于 2006 年问世，同年 jQuery 的第一个版本也发布了。然而，随着现在使用移动设备（iPhone、iPad 等）浏览互联网的用户激增，jQuery 插件必须支持这些设备上的良好用户体验。Flexisel 应运而生，它是一款响应式图像轮播，具有专门用于调整轮播以适应移动和平板设备的选项。 调整浏览器窗口大小，Flexisel 会做出响应调整。您还可以根据屏幕宽度更改显示的项目数量！还有丰富的参数设置可以控制滚动的更多细节。

如何使用flexisel

1、引用jQuery.js 和 jquery.flexisel.js

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.flexisel.js"></script>

因为flexisel是基于jQuery的插件，所以前提必须先引用jQuery，再引用flexisel.js

2、编写HTML

<ul id="flexiselDemo1">
    <li>
        <img src="images/logo-nyt.png" /></li>
    <li>
        <img src="images/logo-microsoft.png" /></li>
    <li>
        <img src="images/logo-ebay.png" /></li>
    <li>
        <img src="images/logo-hp.png" /></li>
    <li>
        <img src="images/logo-youtube.png" /></li>
</ul>

3、编写CSS，为HTML赋予样色

认真检查您的css，保证兼容大部分浏览器前提下再调用flexisel

4、调用flexisel

<script type="text/javascript">
    $("#flexiselDemo1").flexisel({
        visibleItems: 3,
        itemsToScroll: 1,
        autoPlay: {
            enable: true,
            interval: 5000,
            pauseOnHover: true
        }
    });
</script>

参数说明

  • visibleItems Integer 指定在一行中显示的项数。‌例如，‌在较小的屏幕上可能希望显示较少的项，‌而在较大的屏幕上则可能希望显示更多的项。‌

  • itemsToScroll Integer 设置一次要滚动的初始项目数。注意：此值将被较小或较大屏幕宽度的响应式断点设置覆盖

  • animationSpeed Integer 定义动画的持续时间，‌以毫秒为单位。‌

  • infinite Boolean 设置轮播是否无限循环

  • navigationTargetSelector String 使用此选择器将向元素添加左/右箭头，而不是默认的

  • autoPlay Object 控制是否自动播放旋转木马。‌

  • loaded func 滑块加载并初始化后运行的回调函数。

  • before func 在幻灯片切换之前运行的回调函数。

  • after func 幻灯片切换后运行的回调函数。

  • resize func 调整浏览器大小事件完成后运行的回调函数。