之前给自己公司的主页套用过一个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. 一文总结Vue

    一.创建项目 1.安装Node.js 查看node版本 node-v 查看npm版本 npm-v 2.安装vue-cli脚手架 安装 npm install -g @vue/cli 创建项目 vue ...

  2. vue 图片分页

    <div class="activities phone"> <!-- 动态 --> <div class="activity" ...

  3. python 使用异常来中断/暂停线程

    """"python 使用异常来中断/暂停线程h_thread 线程句柄stoptype 线程停止类型,返回1则正常中断了线程""" ...

  4. Windows 设置当前路径 临时环境变量 查看、修改、删除与添加

    需求 有些程序依赖的Python版本不同,安装了Python2.7和Python3.10(3.x没有向下兼容),需要设置当前路径的 python 版本(指定使用2或3). 也不止Python,类似的情 ...

  5. "人生重开模拟器"，10分钟轻松搭建！

    人生重开模拟器是最近爆火的一款非常好玩的模拟游戏,会带你走入一个有趣的世界,开启全新的人生旅程,即"人生重开". 然而实际上,这款游戏短短在3天内上线,在百度贴吧.朋友圈.QQ群. ...

  6. redis底层数据结构之字典(dict)

    字典(dict) 字典又称为符号表或者关联数组.或映射(map),是一种用于保存键值对(key-value)的抽象数据结构 字典中的每个key都是唯一的,通过key对值来进行查找或修改,时间复杂度为 ...

  7. mysql 备份定时任务

    #!/bin/bash rq=`date +%Y-%m-%d-%H` #日期 #数据库信息 host=127.0.0.1 user=root password=xxx dbname=script #放 ...

  8. RockyLinux8.7 制作OpenSSH9.2 rpm包

    由于系统原装的openssh存在高危的漏洞,安全扫描不过,故制作出最新版本的rpm包修复openssh高危漏洞. 1.安装基础环境工具 dnf install wget make gcc perl r ...

  9. linux 清空catalina.out日志 不需要重启tomcat（五种方法）

    linux 清空catalina.out日志 不需要重启tomcat 1.重定向方法清空文件   [root@localhost logs]# du -h catalina.out  查看文件大小17 ...

  10. Linxu后台运行Java的jar包

    1.直接运行 java -jar myjar-0.0.1-SNAPSHOT.jar 这种方式需要一直挂载终端(Ctrl+C会结束进程.关闭shell也会结束进程),故不符合需求 2.后台运行 A.Ct ...