发现了个不错的 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. MVC+JSON 无限滚动翻页

    public partial class News { public int ID{ get; set; } public int Title{ get; set; } } ) { Response. ...

  2. 解决Oracle 11gR2 空闲连接过多，导致连接数满的问题

    今天又遇到了11gR2连接数满的问题,以前也遇到过,因为应用那边没有深入检查,没有找到具体原因,暂且认为是这个版本Oracle的BUG吧. 上次的处理办法是用Shell脚本定时在系统中kill  v$ ...

  3. SD和SDHC和SDXC卡的区别是什么

    SD卡,SDHC卡,SDXC卡区别在规格不一样,SD卡最大支持2GB容量,SDHC 最大支持32GB容量,SDXC 最大支持2TB(2048GB)容量,支持SDXC卡的数码设备是兼容支持SD卡与SDH ...

  4. [原]容器学习（一）：动手模拟spring的IoC

    介绍 学习经典框架的实现原理以及设计模式在其实际中的运用,是非常有必要的,可以让我们更好进行面向对象. 本篇文章就来模拟Spring的IOC功能,明白原理后,可以更好的使用它,进而为进行面向对象提供一 ...

  5. HDU 3468 Treasure Hunting（BFS+网络流之最大流）

    题目地址:HDU 3468 这道题的关键在于能想到用网络流.然后还要想到用bfs来标记最短路中的点. 首先标记方法是,对每个集合点跑一次bfs,记录全部点到该点的最短距离.然后对于随意一对起始点来说, ...

  6. java 请求响应乱码

    package org.operamasks.servlet; import java.io.IOException; import java.io.PrintWriter; import java. ...

  7. Struts2.x教程(一) Struts2介绍

    一.Struts2是什么 Struts2是在WebWork2基础发展而来的.和Struts1一样, Struts2也是基于MVC的web层框架. 那么既然有了Struts1,为何还要Struts2? ...

  8. 使用my97datepicker控件实现日期范围选择

    注:(2014-12-05内容修改:添加运行效果) 使用my97datepicker 控件,需要对日期的范围进行控制,本人自己写了一个js完成此功能,示例为当前日期到下一周周五之间的日期可选,其他日期 ...

  9. css引入讲解及media

    引用Css的几种方式: 一.@import <style type="text/css" media="screen"> @import url(& ...

  10. SQL Server索引进阶：第十二级，创建，修改，删除

    在第十级中我们看到了索引的内部结构,在第十一级中我们看到了平衡树结构潜在的负面影响:索引碎片.有了索引内部结构的知识,我们可以检查在执行数据定义语句和数据操作语句的时候,都发生了什么.在本级中我们介绍 ...