之前给自己公司的主页套用过一个js动态生成的轮播图，但是从载入的时机和载入后的效果都不太理想，又懒得去优化了，这次偶然遇到一个比较不错的轮播图的js插件，记录之。

首先它是给予jquery的，引进jquery和jquery.flexslider-min.js，然后定义div范围，在div内定义好要轮播的ul和li标签，然后设置flex参数渲染即可。不多说，上代码

<html>

<body>

 <div class="flexslider">

     <ul class="slides">

         <li>

         <img src="slide1.png" />

         </li>

         <li>

         <img src="slide2.png" />

         </li>

         <li>

         <img src="slide3.png" />

         </li>

     </ul>

 </div>

<script type="text/javascript" src="jquery.js"></script>

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

<script type="text/javascript">

      $(document).ready(function () {

           $('.flexslider').flexslider({

                 directionNav: true,

                 pauseOnAction: false,

                 initDelay : 5000,

           });

       });

</script>

</body>

</html>

至于这些参数是什么意思，不去纠结，用到的时候再看源代码的参数配置即可。git Url：https://github.com/woothemes/FlexSlider。源代码中有几十个参数可供选择。

记一个好用的轮播图的FlexSlider的更多相关文章

  1. 一步一步拆解一个简单的iOS轮播图（三图）

    导言(可以不看): 不吹不黑,也许是东半球最简单的iOS轮播图拆分注释(讲解不敢当)了(tree new bee).(一句话包含两个人,你能猜到有谁吗?提示:一个在卖手机,一个最近在卖书)哈哈... ...

  2. 用原生的javascript 实现一个无限滚动的轮播图

    说一下思路:和我上一篇博客中用JQ去写的轮播图有相同点和不同点 相同点: 首先页面布局是一样的 同样是改变.inner盒子的位置去显示不同的图片 不同点: 为了实现无限滚动需要多添加两张重复的图片 左 ...

  3. vue 写一个炫酷的轮播图

    效果如上图: 原理: 1.利用css 的 transform 和一些其他的属性,先选五张将图片位置拍列好,剩余的隐藏 2.利用 js 动态切换类名,达到切换效果 css代码如下 .swiper-cer ...

  4. jquery一个比较好的轮播图jQuery.kinMaxShow介绍

    kinMaxShow API 可选参数以及详解 kinMaxShow 主参数详解 参数名称 默认值 简单释义 height 500 [整型 (单位:像素)]焦点图高度,必须设置 缺省则启用默认高度 5 ...

  5. iOS回顾笔记（05） -- 手把手教你封装一个广告轮播图框架

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  6. js 基础篇（点击事件轮播图的实现）

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...

  7. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  8. html、css、js实现轮播图

    2017-03-13 今天把轮播图的知识1过了一下,写了一个比较简单的轮播图,给大家参考一下. 查看具体的效果点击这个链接 : http://gjhnstxu.me/%E8%BD%AE%E6%92%A ...

  9. js编写轮播图，广告弹框

    1.轮播图 js编写轮播图,需要用到setInterval(计时器):先给一个div,里面放轮播图的图片,将轮播图的图片明明为相同样式的:如:banner1.jpg,banner2.jpg,banne ...

  10. Swift-ScrollView轮播图的简易封装和使用

    不多说,轮播图是开发中必要一项技能,直接上代码: 先说我的思路:首次继承于UIScrollView类自定义MyScrollView,在MyScrollView里自定制方法,func creatMySc ...

随机推荐

  1. QP之QEP事件分配流程分析

    *********************************1*********************************** QActive *AO_Blinky = &l_bl ...

  2. NSIS 制作漂亮的安装界面（仿QQ音乐，网易云音乐）

    废话少说,先上图: 注:下面的录制的安装过程使用的安装包,均为制作的安装包,而非官方源包. QQ音乐的安装过程: ​

  3. drf内容总结

    # 1 drf 入门规范 -前后端分离模式 -前后端混合 -postman -restful规范 -drf:django的app # 2 序列化类(重点) -Serializer -字段类 -字段参数 ...

  4. 四大组件之服务Service

    参考:Android开发基础之服务Service 什么是服务呢? 用俗话话应该是长期于后台运行的程序,如果是官方一点,首先它是一个组件,用于执行长期运行的任务,并且与用户没有交互. 每一个服务都需要在 ...

  5. go语言 cmd执行命令,遇到空格或者双引号无法执行成功的解决方案

    大部分go执行cmd命令都是,我也是这样写的 package main import ( "fmt" "os/exec" ) func main() { cmd ...

  6. R.swift 使用详解

    R.Swift 能快速访问本地图片.颜色.字体等资源的一个库 使用介绍 1.工程中倒入R.swift 以pod为例 pod 'R.swift' 2.配置执行脚本 "$PODS_ROOT/R. ...

  7. python备份文件(简易)

    步骤逻辑 要备份的文件夹:source = ["/opt/containerd"] 保存备份信息的文件夹 targz_dir = "/home/backup" ...

  8. java HashMap 原理

    jdk1.7 和 1.8 大致相同但还是有区别,主要是数据结构的区别,1.7 为数组+链表:1.8 为数组+链表+红黑树 关键知识点 加载因子:装填因子,目的是何时对 map 进行扩容,默认是 0.7 ...

  9. CI2454 低成本高性能SOC产品 遥控产品的绝佳选择

    Ci2454 是一款集成无线收发器和 8 位 RISC(精简指令集)MCU 的 SOC 芯 片. 无线收发器特性:  工作在 2.4GHz ISM 频段.  调制方式:GFSK/FSK.  数据 ...

  10. Curl 命令举例

    curl是一个强大的网络请求lib,虽然强大,但是参数太多哈,不得不吐槽,下面列举一下常用使用方法,供大家CV POST 请求 入门: curl -X POST "http://localh ...