之前给自己公司的主页套用过一个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. 如何简化跨网络安全域的文件发送流程，大幅降低IT人员工作量？

    为什么要做安全域的隔离? 随着企业数字化转型的逐步深入,企业投入了大量资源进行信息系统建设,信息化程度日益提升.在这一过程中,企业也越来越重视核心数据资产的保护,数据资产的安全防护成为企业面临的重大挑 ...

  2. 使用windows平板学习与办公的一些经历（酷比魔方i9篇）

    大概是在2019年的时候,我在某平台上购买了900元的二手windows平板电脑,酷比魔方i9 首先谈谈背景.当时我手里是有个笔记本,屏幕大概15.6寸,4G+256G的,平时用的时候功率平均20几W ...

  3. 微信开发获取code的时候总是提示 10003 redirect_uri域名与后台配置不一致

    填写的地址不能加 http://

  4. go+redis实现消息队列发布与订阅

    在做项目过程中,实现websocket得时候,不知道哪里写的不太合适,客户端消息收到一定程度,剩下的消息收不到,修改了缓冲区大小,还是没有解决问题,后面因为项目结束期比较紧张,没有时间调试消息的时候, ...

  5. git---全局设置用户名、密码、邮箱

    # git config命令的–global参数,用了这个参数,表示你这台机器上所有的Git仓库都会使用这个配置,当然也可以对某个仓库指定不同的用户名和Email地址. # 1.查看git配置信息 $ ...

  6. 2022-04-28内部群每日三题-清辉PMP

    1.为了降低项目的质量成本(COQ)并增加验收产品的几率,需要进行质量审计.质量审计需要什么? A.质量管理计划和质量测量指标 B.过程分析 C.质量管理计划和质量核对单 D.过程决策程序平图(PDP ...

  7. 删除指定 route ip 段

    route del -net 172.18.0.0 netmask 255.255.0.0

  8. Spring全家桶(二)之SpringMVC总结

    SpringMVC面试题 关于Spring,SpringMVC,SpringBoot三者的源码等解析,会在博客园上详细整理! 这个仅仅是面试题整理 SpringMVC工作原理 1.是否需要在类路径中使 ...

  9. 若依gateway

    1.若依后端gateway模块配置白名单 顾名思义,就是允许访问的地址.且无需登录就能访问.在ignore中设置whites,表示允许匿名访问. 2. SpringCloud Gateway网关配置( ...

  10. 注意注意！！！！关于keil的问题，调试时候的bug

    1.keil变量不区分大小写: 2.KEIL调试debug时误报,未定义某变量 但是实际定义了的. 今天用keil写代码 感觉逻辑上没问题 但是始终不是那个效果 检查了半天错误问题.最后debug居然 ...