发现了个不错的 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. 供应类型与计划分类一致性检查(INV)

    应用 Oracle Inventory 层 Level Function 函数名 Funcgtion Name CUXINVIMM 表单名 Form Name CUXINVIMM 说明 Descrip ...

  2. Xcode 真机测试破解方法（转加修改）xcode 4.3 通过

    Xcode 真机测试破解方法(转加修改)xcode 4.3 通过 生成本机证书 应用程序->实用工具->钥匙串访问 菜单:钥匙串访问->证书助理->创建证书, 然后按以下图片顺 ...

  3. NOI2013 Day2

    NOI2013 Day2 矩阵游戏 题目描述:设矩阵\(F\) 求\(F[n][m](mod (10^9+7))\) solution: 这题可以求通项解决. 设\(X_i=F[i][m]\), \( ...

  4. 解析nodejs微信开发-2获取ticket

    获取ticket是需要拼接url,url中需要获得的tocken 1.先判断有无tocken:若有则拼接url: 2.请求url: a.处理回调数据,注意时间戳和签名处理方式,此两项并未存到ticke ...

  5. android开发利器--站在巨人肩膀上前行

    本文主要介绍有助于android开发的三方平台和站点. 一:开发阶段 1:SVN(一个开放源码的版本号控制系统) 团队开发没有server,代码管理就没那么方便了,推荐taocode阿里开源站点,方便 ...

  6. 从零开始nodejs系列文章

    http://blog.fens.me/series-nodejs/ 从基础的node安装到npm配置,从express到jade,还有mongoDB.是一个很好的node教程

  7. tigervnc*

    yum install -y tigervnc* tigervnc-server vncserver www.webmin.cn http://blog.sina.com.cn/s/blog_4ba5 ...

  8. asp.net验证码及怎么获取里面的数值（整合）

    一.ASP.Net的验证码的作用 对于一个预防攻击的web表单来讲,验证码通常是一个常见的措施.因为如果对于一些public区域的页面内容来讲,譬如一个登录表单,如果没有必要的安全措施,很可能遭到模拟 ...

  9. 查询离指定日期最近的一条数据（oracle）

    select * from ( Select   *   from   t_currency_rate   where f_orig_curr='USD'   and f_dest_curr='RMB ...

  10. IOS开发－UIView之动画效果的实现方法（合集）

    http://www.cnblogs.com/GarveyCalvin/p/4193963.html 前言:在开发APP中,我们会经常使用到动画效果.使用动画可以让我们的APP更酷更炫,最重要的是优化 ...