发现了个不错的 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. cad2007 钢筋符号显示为问号

    如题:cad2007 钢筋符号显示为问号 解决办法:下载Tssdeng,解压(Tssdeng.rar) 把下载到的cad大字体Tssdeng.shx文件放到autoCAD2007安装目录C:\Prog ...

  2. Oracle单个数据文件超过32G后扩容

    Oracle单个数据文件超过32G后扩容   表空间数据文件容量与DB_BLOCK_SIZE的设置有关,而这个参数在创建数据库实例的时候就已经指定.DB_BLOCK_SIZE参数可以设置为4K.8K. ...

  3. arcEngine添加标注(上)

    arcEngine添加标注有3个技术点:1,获得图层的属性字段:2,初始化符号显示控件:3,添加标注. 获得图层的属性字段:   //每个图层都是一个表的图形化显示,ILayer跟ITale可以互相转 ...

  4. Delphi中运行时改变panel的位置及大小（WM_SysCommand消息配合参数使用，很奇妙） good

    procedure TForm1.pnl1MouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Inte ...

  5. [LeetCode][Python]Tow Sum

    # -*- coding: utf8 -*-'''https://oj.leetcode.com/problems/two-sum/ Given an array of integers, find ...

  6. Matrix Swapping II（求矩阵最大面积，dp）

    Matrix Swapping II Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  7. 存储过程中调用EXECUTE IMMEDIATE的“权限不足”问题

    使用plsql 动态创建表时,用户需要具有create any table 权限 例如: create or replace procedure create_table_test is tmpstr ...

  8. JavaSE思维导图(七)

  9. C++中#include的工作原理

    大多数人可能对“#include”比较熟悉,因为我们写C/C++程序的时候都会写的字符串之一,但是它是具体怎么工作的?或者它的原理是什么呢? 可能不太熟悉,也有可能没有去关心过.我们只关心程序能否正确 ...

  10. SQL标识列的查询

        1.判段一个表是否具有标识列    www.2cto.com   可以使用 OBJECTPROPERTY 函数确定一个表是否具有 IDENTITY(标识)列,用法: Select OBJECT ...