发现了个不错的 jQuery 幻灯片插件 flexslider，有 接近 3000 Star，应该说是很靠谱的，下面是简单使用教程。

引入代码

所有代码都可以在 flexlslider 的 Github上获得。

引入 css 文件和 js 文件和 jQuery 核心代码：

 <link rel="stylesheet" href="flexslider.css">

 <script src="jquery.min.js"></script>

 <script src="jquery.flexslider-min.js"></script>

HTML 代码：

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

JavaScript 代码：

$(window).load(function() {

    $('.flexslider').flexslider({

        animation: 'slide',                 // 必备参数，自动滑动

        animationLoop: true,           // 是否循环滑动，默认为 true

         itemWidth: 500,                  // 定义每个 item 宽度，单位为 px，默认为 100%

         itemMargin: 0,                     // 定义每个 item margin，默认为 0

         controlNav: false,                // 是否显示滑动控制小圆点，默认为 true

        directionNav: false,               // 是否显示左右滑动控制控件，默认为 true

        slideshowSpeed: 2000,        // 每次自动滑动间隔时间，默认为 7000，单位为 ms

         animationSpeed: 500           // 手动点击滑动时间，默认为 600，单位为 ms

     });

});

jQuery 插件 flexslider 初步使用的更多相关文章

  1. 第7章 jQuery插件的使用和写法

    第7章 jQuery插件的使用和写法 插件又称扩展,是一种遵循一定规范的应用程序接口写出来的程序. 插件的编写思想基于面向对象. 获取最新的插件可以查看jquery官网:http://plugins. ...

  2. 自定义jQuery插件Step by Step

    1.1.1 摘要 随着前端和后端技术的分离,各大互联网公司对于 Mobile First理念都是趋之若鹜的,为了解决网页在不同移动设备上的显示效果,其中一个解决方案就是Responsive Desig ...

  3. 期待已久的2012年度最佳jQuery插件揭晓

    近日,国外著名博客WDL发布了2012年度最佳 jQuery 插件.jQuery 自2006年发布以来,经过6年的迅速发展,目前已是最流行和使用最广泛的 JavaScript 框架,这主要归功于众多围 ...

  4. jquery 插件大全

    1.jquery.roundabout.js 超棒的左右3D旋转式幻灯片jQuery插件 2.jquery validate.js 验证表单 3.jquery ui插件 对话框 日期 4.lhgdia ...

  5. 常用JQUERY插件大全

    jQuery内容滚动插件-BoxSlider jQuery artDialog对话框插件 移动端日期选择组件 图像延迟加载库Echo.js 轮播图FlexSlider插件 Slick.js幻灯片使用方 ...

  6. 自己写jquery插件之模版插件高级篇(一)

    需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...

  7. JQuery插件定义

    一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...

  8. BootStrap_04之jQuery插件（导航、轮播）、以及Less

    1.列偏移与列排序: ①列偏移:控制列出现的位置,某列偏移后,后序列会随之偏移--只能右偏移: col-lg/md/sm/xs-offset-*; ②列排序:控制某一列的位置,该列可以左(pull)右 ...

  9. 锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]

    1.表单验证插件Validation   2.表单插件Form   3.动态事件绑定插件livequery 可以为后来的元素绑定事件   类似于jQuery中的live()方法     4.jQuer ...

随机推荐

  1. UVA1351-----String Compression-----区间DP（记忆化搜索实现）

    本文出自:http://blog.csdn.net/dr5459 题目地址: http://uva.onlinejudge.org/index.php?option=com_onlinejudge&a ...

  2. POJ 2400 最小权匹配

    吐槽:首先,这道题的输入居然是错的.要将上下两个矩阵的位置换一下才可以出样例,也就是上面那个矩阵是employee对Supervisor的打分,下面那个矩阵才是Supervisor对employee的 ...

  3. Problem 2128 最长子串(kmp+strstr好题经典)

     Problem 2128 最长子串 Accept: 134    Submit: 523Time Limit: 3000 mSec    Memory Limit : 65536 KB  Probl ...

  4. Cocos2d—X游戏开发之CCTableView详解（十一）

    本来很早就想写关于CCTableView的文章,但是在基本功能实现之后呢,项目需求增加导致对这个控件的研究必须更加深入一点. 好的,现在开始介绍一下这个控件,在Cocos2d—X引擎中,这是一个仿制i ...

  5. selector是在文件夹drawable中进行定义的xml文件。

    获取Drawable对象: Resources res = mContext.getResources(); Drawable myImage = res.getDrawable(R.drawable ...

  6. select2插件常用方法汇总

    1.获取下拉框的value和text <input type="hidden" name="xa" id="xa" data-plac ...

  7. 浅谈Spring(三)

    一.基础Spring的标准测试 1.导入spring与junit继承的jar 2.引入注解 @RunWith(SpringJUnit4ClassRunner.class) @ContextConfig ...

  8. python定制类（以Fib类为例）

    class Fib(object): def __init__(self): self.a, self.b = 0, 1 def __iter__(self): return self def __n ...

  9. BZOJ 1415: [Noi2005]聪聪和可可( 最短路 + 期望dp )

    用最短路暴力搞出s(i, j)表示聪聪在i, 可可在j处时聪聪会走的路线. 然后就可以dp了, dp(i, j) = [ dp(s(s(i,j), j), j) + Σdp(s(s(i,j), j), ...

  10. python之面向对象那点事

    一.类与对象 1.什么是类?类,顾名思义,就是具体相同属性的同一类事物的统称及抽象.对象,指是就是具体的抽象类的实例 以上的说法是不是看起来有点云里来雾里去呢.没错,专业的解释总是让人难以理解,这就是 ...