FlexSlider：jQuery内容滚动插件的全解析-易源易彩

摘要

FlexSlider是一款轻量级的jQuery内容滚动插件，压缩后的文件大小仅为4KB。这款插件使用户能够轻松实现内容滚动效果，并提供了高度的可定制性。通过将UL列表转换为内容滚动列表，FlexSlider不仅支持自动播放功能，还允许用户进行手动控制。为了帮助读者更好地理解和应用，本文提供了丰富的代码示例。

关键词

FlexSlider, jQuery插件, 内容滚动, 可定制性, 自动播放

一、FlexSlider简介与安装

1.1 FlexSlider的核心特性

FlexSlider，这款仅4KB大小的jQuery插件，以其轻巧而强大的特性，在众多内容滚动插件中脱颖而出。它不仅能够轻松地将普通的HTML列表转换为动态滚动的展示区，更令人赞叹的是其高度的可定制性和灵活性。无论是在博客、企业网站还是个人主页上，FlexSlider都能完美适应各种场景，满足不同用户的需求。

首先，FlexSlider的自动播放功能是其一大亮点。这一特性使得内容可以无缝循环展示，无需用户频繁操作即可享受流畅的视觉体验。不仅如此，FlexSlider还允许用户根据实际需求调整播放速度，甚至完全关闭自动播放，转而采用手动控制模式。这种灵活性极大地提升了用户体验，让每个细节都尽在掌握之中。

此外，FlexSlider的可定制性也是不可忽视的优势之一。从基本的颜色设置到高级的过渡效果，开发者可以通过简单的配置选项来实现个性化的定制。这意味着即使是非专业人员也能轻松打造出符合自己风格的滚动效果，让网站更加生动有趣。

1.2 FlexSlider的安装步骤

安装FlexSlider的过程简单明了，即便是初学者也能快速上手。首先，你需要下载最新版本的FlexSlider包，其中包含了所有必要的文件和文档。接下来，将这些文件上传至你的服务器，并确保jQuery库已正确加载。如果你还没有引入jQuery，可以在页面头部添加以下代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

完成这一步后，接下来就是将FlexSlider的CSS和JS文件链接到你的HTML页面中。通常情况下，CSS文件用于定义样式，而JS文件则负责实现滚动逻辑。正确的链接方式如下所示：

<link rel="stylesheet" href="path/to/flexslider.css" type="text/css" media="screen" />
<script src="path/to/jquery.flexslider-min.js"></script>

最后，你需要初始化FlexSlider。这通常通过在页面底部添加一段简短的JavaScript代码来实现：

$(window).load(function() {
    $('.flexslider').flexslider({
        animation: "slide",
        controlNav: "thumbnails"
    });
});

这段代码的作用是告诉FlexSlider如何初始化以及使用哪些默认设置。通过这种方式，你可以轻松地为不同的滑块指定特定的行为，从而创造出丰富多彩的内容展示效果。

二、FlexSlider的基本使用方法

2.1 如何创建一个基础内容滚动列表

创建一个基础的内容滚动列表并不复杂，但要想让其既美观又实用，则需要一些技巧。首先，你需要准备一组有序或无序的列表项（<ul> 或 <ol>），并将它们放入一个容器中。这个容器将是FlexSlider识别并转换为滚动列表的关键元素。例如，一个最简单的HTML结构可能如下所示：

<div class="flexslider">
    <ul class="slides">
        <li>这是第一个列表项</li>
        <li>这是第二个列表项</li>
        <li>这是第三个列表项</li>
    </ul>
</div>

在这个例子中，.flexslider 是FlexSlider所识别的外部容器类名，而 .slides 则是内部列表的类名。这样的结构设计不仅简洁明了，而且易于维护。更重要的是，它为后续的自定义和扩展留下了足够的空间。

接下来，通过初始化FlexSlider，上述静态列表将被赋予生命。想象一下，当用户访问网页时，原本静止的文字瞬间变得生动起来，一个个列表项如同舞台上的演员般依次登场，展现出各自的魅力。这种动态效果不仅能吸引用户的注意力，还能提升整体用户体验。

2.2 FlexSlider的HTML结构

为了让FlexSlider发挥出最佳性能，合理的HTML结构至关重要。一个典型的FlexSlider HTML结构通常包括以下几个部分：

外部容器：通常是一个 <div> 元素，用来包裹整个滑块区域。这个容器需要有一个明确的类名，如 .flexslider，以便于CSS样式和JavaScript脚本识别。
内部列表：位于外部容器内的 <ul> 或 <ol> 元素，用于存放具体的列表项。这些列表项将会被转换成滚动条目。
列表项：即 <li> 标签，每一个 <li> 都代表一个独立的内容单元。这些单元可以是图片、文本或者其他任何HTML元素。

一个完整的示例代码如下：

<div class="flexslider">
    <ul class="slides">
        <li>
            <img src="path/to/image1.jpg" alt="Image Description 1" />
        </li>
        <li>
            <img src="path/to/image2.jpg" alt="Image Description 2" />
        </li>
        <li>
            <img src="path/to/image3.jpg" alt="Image Description 3" />
        </li>
    </ul>
</div>

在这个示例中，我们使用了 <img> 标签来展示图片内容。每张图片都有一个清晰的路径以及描述性的 alt 属性，这对于提高网站的可访问性非常重要。通过这样的结构，FlexSlider能够轻松地将静态图片转换为动态的幻灯片展示，带给用户耳目一新的视觉享受。

三、FlexSlider的配置选项

3.1 理解配置选项的作用

FlexSlider之所以能够成为众多前端开发者的首选工具，很大程度上得益于其丰富的配置选项。这些选项不仅赋予了插件极高的灵活性，还使得开发者可以根据具体项目需求进行精细化调整。理解每一个配置选项的具体作用，对于充分发挥FlexSlider的潜力至关重要。

想象一下，当你面对一个需要展示大量图片或信息的网站时，如何才能让这些内容既美观又高效地呈现给用户？这时，配置选项就如同一位艺术家手中的调色板，帮助你绘制出一幅幅精美的画卷。例如，通过调整animationSpeed参数，你可以控制内容切换的速度，让每一次变化都恰到好处，既不会太快让用户来不及反应，也不会太慢以至于显得拖沓。再比如，利用directionNav选项，可以决定是否显示前后导航按钮，从而给予用户更多的交互自由度。

更重要的是，这些看似简单的配置选项背后，隐藏着对用户体验深刻的理解与关怀。每一个细节的调整，都是为了让最终呈现在用户面前的效果更加自然流畅。因此，深入研究并合理运用这些配置选项，不仅是技术层面的要求，更是对用户尊重与体贴的表现。

3.2 常用配置选项详解

为了帮助大家更好地掌握FlexSlider的核心配置选项，下面将详细介绍几个最为常用且重要的参数，希望通过这些实例，能够让大家在实际操作中更加得心应手。

1. `animation`

animation选项决定了滑块之间的过渡效果，默认值为fade，表示淡入淡出效果。如果希望实现平滑的左右滑动效果，则可以将其设置为slide。例如：

$('.flexslider').flexslider({
    animation: "slide"
});

这种改变不仅能让页面看起来更加动感活泼，还能根据不同场景选择最适合的展示方式。

2. `controlNav`

controlNav用于控制是否显示缩略图导航，默认为true。当设置为thumbnails时，FlexSlider会在底部生成一组缩略图供用户点击切换。这对于拥有较多内容的滑块来说尤其有用，因为它可以帮助用户快速定位到感兴趣的部分。

$('.flexslider').flexslider({
    controlNav: "thumbnails"
});

通过这种方式，不仅增强了用户互动性，还提高了信息传递效率。

3. `directionNav`

与controlNav类似，directionNav控制着是否显示左右方向箭头，默认也为true。开启此功能后，用户可以通过点击箭头来手动切换内容，增加了操作的直观性和便捷性。

$('.flexslider').flexslider({
    directionNav: true
});

特别是在移动设备上，这种设计可以让用户更加自如地浏览内容，提升整体使用体验。

通过以上几个关键配置选项的介绍，相信你已经对如何利用FlexSlider打造个性化的内容滚动效果有了初步了解。当然，这只是冰山一角，FlexSlider还提供了许多其他高级设置等待着开发者们去探索和实践。

四、自动播放与手动控制

4.1 自动播放功能的实现

FlexSlider的自动播放功能无疑是其最具魅力的特点之一。想象一下，当用户打开网页时，无需任何额外操作，内容便开始自动滚动展示，仿佛一场精心编排的视觉盛宴正在上演。这种无缝循环播放的方式不仅极大地提升了用户体验，还使得网站更具活力与吸引力。

要启用自动播放功能，只需在初始化FlexSlider时设置animationLoop和slideshow两个参数为true即可。例如：

$('.flexslider').flexslider({
    animationLoop: true,
    slideshow: true
});

通过这样的配置，FlexSlider将自动启动连续播放模式，让内容像流水般顺畅地展现出来。不仅如此，开发者还可以进一步调整slideshowSpeed参数来控制播放间隔时间，确保每一帧内容都能得到充分展示，同时避免过快切换导致的信息遗漏。

此外，FlexSlider还允许用户根据实际情况灵活调整自动播放的速度。例如，如果某个页面的内容较为复杂，信息量较大，那么适当延长播放间隔时间（如设置slideshowSpeed为7000毫秒）将有助于用户更好地消化吸收信息。反之，对于那些需要快速传达信息的场景，则可以缩短播放间隔时间，加快内容流转速度。

4.2 手动控制用户交互

尽管自动播放功能带来了极大的便利，但在某些情况下，用户可能更倾向于自主控制内容的展示节奏。FlexSlider同样考虑到了这一点，提供了多种手动控制方式，使得用户可以根据自己的喜好自由切换内容。

首先，通过设置directionNav参数为true，FlexSlider将在滑块两侧显示左右方向箭头，用户只需轻轻一点，即可向前或向后切换内容。这种方式不仅直观易懂，还大大增强了用户的参与感与互动性。

$('.flexslider').flexslider({
    directionNav: true
});

其次，若希望进一步提升用户体验，可以启用controlNav功能，通过设置其值为thumbnails，FlexSlider将在页面底部生成一组缩略图导航。用户只需点击感兴趣的缩略图，即可直接跳转至对应内容，这种快速定位的方式特别适用于内容较多的滑块展示。

$('.flexslider').flexslider({
    controlNav: "thumbnails"
});

通过这些手动控制选项，FlexSlider不仅赋予了用户更大的自由度，还使得内容展示过程变得更加灵活多样。无论是追求高效浏览的快速切换，还是细致品味的逐项查看，FlexSlider都能满足不同用户的需求，带来极致的使用体验。

五、FlexSlider的高级应用

5.1 响应式设计适配

在当今这个多屏幕时代，响应式设计已成为网站开发不可或缺的一部分。FlexSlider作为一款优秀的jQuery插件，自然也具备了出色的响应式设计能力。它能够根据不同的设备屏幕尺寸自动调整内容布局，确保在任何设备上都能呈现出最佳的视觉效果。无论是桌面电脑、平板还是智能手机，FlexSlider都能做到无缝适配，让内容滚动效果始终保持一致性和美观性。

为了实现这一点，FlexSlider内置了一系列智能调整机制。当浏览器窗口大小发生变化时，插件会自动检测当前视口宽度，并相应地调整滑块的尺寸和布局。这意味着开发者无需为不同设备单独编写样式表，只需简单配置几项参数，即可让FlexSlider在各种环境下表现自如。

例如，通过设置responsive选项为true，FlexSlider将自动启用响应式模式：

$('.flexslider').flexslider({
    responsive: true
});

此外，还可以通过调整minWidth和maxWidth参数来限制滑块的最小和最大宽度，从而确保在不同设备上都能获得良好的用户体验。这种灵活性不仅节省了开发时间，还大大提升了网站的整体兼容性和可用性。

5.2 自定义动画效果

除了基本的滚动功能外，FlexSlider还提供了丰富的自定义动画效果，让开发者可以根据实际需求创造出独一无二的内容展示效果。从淡入淡出到平滑滑动，再到各种过渡效果，FlexSlider几乎涵盖了所有常见的动画类型。更重要的是，这些动画效果都可以通过简单的配置选项进行调整和组合，使得内容展示更加生动有趣。

例如，想要实现一种渐变过渡效果，可以通过设置animation参数为fade来实现：

$('.flexslider').flexslider({
    animation: "fade"
});

而对于那些希望增加一些创意元素的开发者来说，FlexSlider还支持自定义CSS动画。通过编写特定的CSS规则，可以为滑块添加旋转、缩放等复杂效果，从而打造出令人眼前一亮的视觉体验。

.slides li {
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.slides li:hover {
    transform: scale(1.1);
}

通过这种方式，不仅能够增强内容的吸引力，还能为用户提供更加丰富的互动体验。无论是用于产品展示、新闻资讯还是个人作品集，FlexSlider都能凭借其强大的自定义能力，帮助开发者实现心中所想，创造出令人难忘的数字作品。

六、FlexSlider的优化与性能

6.1 优化FlexSlider的性能

在当今这个高速发展的互联网时代，用户对于网站的加载速度和响应时间有着越来越高的要求。FlexSlider虽然以其轻量级和多功能性赢得了众多开发者的青睐，但在实际应用过程中，如何进一步优化其性能，确保在任何设备上都能流畅运行，成为了摆在开发者面前的一道重要课题。幸运的是，通过一些简单有效的策略，我们可以显著提升FlexSlider的性能表现，让其在各种环境中都能展现出最佳状态。

首先，减少不必要的资源加载是提高FlexSlider性能的关键之一。由于FlexSlider依赖于jQuery库，因此确保jQuery库的高效加载至关重要。推荐的做法是使用CDN（内容分发网络）来托管jQuery文件，这样不仅可以加快文件传输速度，还能减轻服务器负担。例如，可以将jQuery的引用改为：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

此外，对于FlexSlider自身的CSS和JS文件，同样建议使用CDN服务。这样做不仅能够加速文件加载速度，还能确保用户始终使用到最新版本的插件，从而避免因版本不匹配导致的问题。

其次，合理利用缓存机制也是提升性能的有效手段。通过设置浏览器缓存策略，可以让用户在首次访问网站时加载FlexSlider的相关文件，之后再次访问时则直接从本地缓存中读取，大大减少了重复加载的时间。具体而言，可以在服务器端配置HTTP响应头，指示浏览器缓存这些静态资源文件：

Cache-Control: public, max-age=31536000
Expires: <未来一年后的日期>

最后，针对移动设备进行专门优化也不可忽视。随着移动互联网的普及，越来越多的用户习惯于通过手机和平板浏览网页。因此，在设计FlexSlider时，应当充分考虑到移动设备的特点，比如屏幕尺寸较小、触控操作为主等因素。通过设置responsive选项为true，FlexSlider能够自动适应不同设备的屏幕尺寸，确保在任何设备上都能呈现出最佳的视觉效果。

$('.flexslider').flexslider({
    responsive: true
});

6.2 常见问题与解决方法

在使用FlexSlider的过程中，难免会遇到一些常见问题。这些问题可能会影响到插件的正常运行，甚至导致用户体验下降。因此，了解并掌握一些常见的故障排除方法，对于确保FlexSlider稳定运行至关重要。

问题一：FlexSlider无法正常初始化

如果发现FlexSlider在页面加载后没有按照预期工作，首先要检查是否正确引入了所有必要的文件。确认jQuery库、FlexSlider的CSS和JS文件都已经正确加载。此外，还需要确保初始化代码放置在DOM元素加载完成之后执行，例如：

$(document).ready(function() {
    $('.flexslider').flexslider({
        animation: "slide",
        controlNav: "thumbnails"
    });
});

问题二：滑块内容无法正确显示

有时可能会遇到滑块内容无法正常显示的情况。这通常是由于HTML结构错误或者CSS样式冲突导致的。首先检查.flexslider和.slides这两个容器的HTML结构是否正确。确保所有的列表项都包含在<ul>或<ol>标签内，并且每个列表项都使用了<li>标签。此外，检查是否有其他CSS样式影响了FlexSlider的正常显示，尝试禁用其他样式表，逐一排查问题所在。

问题三：自动播放功能失效

如果自动播放功能无法正常工作，首先确认是否正确设置了animationLoop和slideshow参数。这两个参数都需要设置为true才能启用自动播放功能。此外，还需要检查slideshowSpeed参数是否设置得当，确保播放间隔时间足够长，以便内容能够充分展示。

$('.flexslider').flexslider({
    animationLoop: true,
    slideshow: true,
    slideshowSpeed: 5000 // 设置播放间隔时间为5秒
});

问题四：触摸设备上的滑动效果不佳

在移动设备上，如果发现滑动效果不够流畅或者无法正常响应触摸操作，可以尝试启用FlexSlider的触摸手势支持。通过设置touch选项为true，FlexSlider将能够更好地处理触摸事件，提升用户体验。

$('.flexslider').flexslider({
    touch: true
});

通过以上几种常见问题及其解决方法的介绍，相信你已经掌握了如何应对FlexSlider在实际应用中可能出现的各种状况。无论是初始化失败、内容显示异常还是自动播放功能失效，只要按照上述步骤逐一排查，大多数问题都能够迎刃而解。

七、FlexSlider与其它插件的兼容性

7.1 FlexSlider与其他jQuery插件的结合使用

在现代Web开发中，jQuery插件因其简便易用而备受开发者青睐。FlexSlider作为一款轻量级的内容滚动插件，不仅自身功能强大，还能与其他jQuery插件无缝结合，共同创造出更为丰富和动态的用户体验。通过巧妙地将FlexSlider与其他插件相结合，开发者能够实现更多复杂的功能，让网站更加生动有趣。

7.1.1 与LightGallery.js的结合

LightGallery.js是一款流行的图片画廊插件，它能够为用户提供高质量的图片展示效果。当FlexSlider与LightGallery.js结合使用时，可以实现从内容滚动列表中直接弹出大图展示的功能。这种组合不仅提升了图片展示的质量，还增强了用户的互动体验。例如，当用户浏览FlexSlider中的图片时，只需点击一张图片，即可通过LightGallery.js弹出一个全屏的高清图片展示界面，让用户更详细地欣赏每一张图片的细节。

// 初始化FlexSlider
$('.flexslider').flexslider({
    animation: "slide",
    controlNav: "thumbnails"
});

// 初始化LightGallery.js
$('.flexslider .slides li').lightGallery({
    selector: 'a'
});

通过这种方式，用户不仅能在FlexSlider中快速浏览图片，还能通过点击进入LightGallery.js的全屏模式，享受更加沉浸式的视觉体验。

7.1.2 与Magnific Popup的结合

Magnific Popup是一款功能强大的模态框插件，它可以用于展示图片、视频等多种内容。与FlexSlider结合使用时，Magnific Popup能够为用户提供更加丰富的多媒体展示效果。例如，在FlexSlider中展示一系列产品图片时，用户可以通过点击图片触发Magnific Popup的弹窗，查看产品的详细信息或观看相关的视频介绍。

// 初始化FlexSlider
$('.flexslider').flexslider({
    animation: "slide",
    controlNav: "thumbnails"
});

// 初始化Magnific Popup
$('.flexslider .slides li a').magnificPopup({
    type: 'image',
    gallery: {
        enabled: true
    }
});

这种组合不仅提升了内容展示的多样性，还增强了用户的参与感，使得网站更加生动有趣。

7.1.3 与Colorbox的结合

Colorbox是一款轻量级的模态框插件，它能够为用户提供简洁而优雅的弹窗展示效果。当FlexSlider与Colorbox结合使用时，可以实现从内容滚动列表中直接弹出图片或视频的功能。这种组合不仅提升了内容展示的质量，还增强了用户的互动体验。例如，在FlexSlider中展示一系列摄影作品时，用户可以通过点击图片触发Colorbox的弹窗，查看图片的高清版本或观看相关的视频介绍。

// 初始化FlexSlider
$('.flexslider').flexslider({
    animation: "slide",
    controlNav: "thumbnails"
});

// 初始化Colorbox
$('.flexslider .slides li a').colorbox({
    rel: 'group',
    slideshow: true
});

通过这种方式，用户不仅能在FlexSlider中快速浏览图片，还能通过点击进入Colorbox的弹窗模式，享受更加沉浸式的视觉体验。

7.2 兼容性问题分析与处理

在实际应用中，FlexSlider可能会遇到一些兼容性问题，尤其是在不同浏览器和设备之间。解决这些问题不仅能够提升用户体验，还能确保网站在各种环境下都能正常运行。以下是一些常见的兼容性问题及其解决方法。

7.2.1 跨浏览器兼容性

FlexSlider在不同浏览器中的表现可能会有所差异，特别是在一些老旧的浏览器中。为了解决这个问题，开发者需要确保FlexSlider的CSS和JavaScript代码在各种浏览器中都能正常运行。以下是一些常用的解决方法：

使用Polyfills：对于一些不支持新特性的老旧浏览器，可以使用Polyfills来模拟这些特性。例如，对于不支持CSS3动画的浏览器，可以使用Modernizr来检测并加载相应的Polyfills。
简化CSS代码：尽量避免使用过于复杂的CSS3特性，尤其是那些尚未被广泛支持的特性。简化CSS代码可以提高FlexSlider在老旧浏览器中的兼容性。
测试与调试：在多个浏览器中进行测试，确保FlexSlider在各种环境下都能正常运行。使用开发者工具进行调试，找出并修复潜在的兼容性问题。

if (!Modernizr.csstransitions) {
    // 加载Polyfill
    document.write('<script src="path/to/polyfill.js"><\/script>');
}

通过这些方法，可以确保FlexSlider在不同浏览器中都能正常运行，提升用户体验。

7.2.2 移动设备兼容性

随着移动互联网的普及，越来越多的用户习惯于通过手机和平板浏览网页。因此，在设计FlexSlider时，应当充分考虑到移动设备的特点，比如屏幕尺寸较小、触控操作为主等因素。以下是一些常用的解决方法：

启用触摸手势支持：通过设置touch选项为true，FlexSlider能够更好地处理触摸事件，提升用户体验。

$('.flexslider').flexslider({
    touch: true
});

响应式设计：通过设置responsive选项为true，FlexSlider能够自动适应不同设备的屏幕尺寸，确保在任何设备上都能呈现出最佳的视觉效果。

$('.flexslider').flexslider({
    responsive: true
});

优化CSS样式：针对移动设备的特点，优化FlexSlider的CSS样式，确保在小屏幕上也能呈现出清晰美观的效果。例如，可以使用媒体查询来调整滑块的尺寸和布局。

@media (max-width: 768px) {
    .flexslider .slides li img {
        width: 100%;
        height: auto;
    }
}

通过这些方法，可以确保FlexSlider在移动设备上也能正常运行，提升用户体验。

7.2.3 老旧浏览器兼容性

在一些老旧浏览器中，FlexSlider可能会遇到一些兼容性问题。为了解决这些问题，开发者需要采取一些额外的措施，确保FlexSlider在这些浏览器中也能正常运行。以下是一些常用的解决方法：

使用Polyfills：对于不支持新特性的老旧浏览器，可以使用Polyfills来模拟这些特性。例如，对于不支持CSS3动画的浏览器，可以使用Modernizr来检测并加载相应的Polyfills。
简化CSS代码：尽量避免使用过于复杂的CSS3特性，尤其是那些尚未被广泛支持的特性。简化CSS代码可以提高FlexSlider在老旧浏览器中的兼容性。
测试与调试：在多个老旧浏览器中进行测试，确保FlexSlider在这些环境中也能正常运行。使用开发者工具进行调试，找出并修复潜在的兼容性问题。

if (!Modernizr.csstransitions) {
    // 加载Polyfill
    document.write('<script src="path/to/polyfill.js"><\/script>');
}

通过这些方法，可以确保FlexSlider在老旧浏览器中也能正常运行，提升用户体验。

八、总结

通过本文的详细介绍，我们不仅了解了FlexSlider这款轻量级jQuery插件的核心功能与优势，还掌握了其安装、基本使用方法、配置选项、自动播放与手动控制、高级应用以及优化与性能等方面的知识。FlexSlider以其4KB的压缩文件大小，为用户提供了一个高度可定制的内容滚动解决方案。无论是自动播放功能带来的无缝视觉体验，还是手动控制选项赋予用户的自由度，都极大地提升了网站的互动性和用户体验。此外，FlexSlider还具备出色的响应式设计能力，能够自动适应不同设备的屏幕尺寸，确保在任何设备上都能呈现出最佳的视觉效果。通过合理的配置和优化，开发者可以轻松打造出既美观又实用的内容滚动效果，为网站增添无限活力。总之，FlexSlider是一款值得前端开发者深入了解和广泛应用的强大工具。

FlexSlider：jQuery内容滚动插件的全解析

摘要

关键词