发现了个不错的 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. J2SE知识点摘记(八)

    1.        多线程指的是在单个进程中可以同时运行多个不同的线程,执行不用的任务.多线程意味着一个程序的多行语句可以看上去几乎同时进行. 同样作为基本的执行单元,线程是划分得比进程更小的执行单位 ...

  2. C# 常用函数和方法集

    1.DateTime 数字型  System.DateTime currentTime=new System.DateTime(); 1.1 取当前年月日时分秒 currentTime=System. ...

  3. intent传对象

    intent还有一个很好用的地方,就是传输对象,但要注意的是这里的传输只是将对象复制了一份通过intent进行传递,并不能达到实时更新的效果,也就是这个对象等偏重于“读”.intent对这个对象有着严 ...

  4. Delphi 实现Ini文件参数与TEdit和TCheckBox绑定(TSimpleParam)

    在实际工作中,常遇到对Ini参数的修改,显示与保存问题. 如果手工写代码,会有很大的工作量. 本例把ini文件的参数与控件绑定起来,以达到方便使用的目的. 本例程共有2个单元 uSimpleParam ...

  5. [原]CAS和Shiro在spring中集成

    shiro是权限管理框架,现在已经会利用它如何控制权限.为了能够为多个系统提供统一认证入口,又研究了单点登录框架cas.因为二者都会涉及到对session的管理,所以需要进行集成. Shiro在1.2 ...

  6. STL 源代码剖析 算法 stl_algo.h -- merge sort

    本文为senlie原创.转载请保留此地址:http://blog.csdn.net/zhengsenlie merge sort ----------------------------------- ...

  7. pwd显示链接文件的真实路径

    1.pwd用于显示当前工作路径 2.pwd -P 用于显示当前的实际工作路径(主要用于链接文件) 加参数难以了理解,看个例子就明白了: 进入链接文件,pwd显示的是链接文件所在的路径,而你不是链接文件 ...

  8. <转>LINQ To SQL 语法及实例大全

    一篇很全很强大的linq to sql 总结 来源:http://blog.csdn.net/pan_junbiao/article/details/7015633 目录(?)[-] LINQ to ...

  9. telnet测试端口号

    telnet Ip 端口号 如:telnet localhost 1433 详见此链接(转) http://www.3lian.com/edu/2012/11-08/43232.html

  10. WCF 接收、发送数据的大小及时间的设置

    <system.serviceModel> <bindings> <basicHttpBinding> <binding name="/> & ...