之前给自己公司的主页套用过一个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. 2373. 矩阵中的局部最大值 (Easy)

    问题描述 2373. 矩阵中的局部最大值 (Easy) 给你一个大小为 n x n 的整数矩阵 grid . 生成一个大小为 (n - 2) x (n - 2) 的整数矩阵 maxLocal ,并满足 ...

  2. JAVA-GUI创作学校管理系统

    1.对于学校的管理系统,我们先做一个简单的一个需求分析,我们需要做学生信息管理,教师信息管理,课程的信息管理.我们要根据自己的需求进行数据库的编写. 简单的添加了几个 2.然后我们通过eclipse+ ...

  3. Java面向对象之接口的定义与实现

    接口 普通类:只有具体实现 抽象类:具体实现和规范(抽象方法)都有! 接口:只有规范!自己无法写方法.专业的约束!约束和实现分离:面向接口编程 接口就是规范,定义的是一组规则,体现了现实世界中&quo ...

  4. 通过pxelinux引导管理器网络引导slax linux

    前提条件 1.用于引导服务器具备tftp服务和http服务: 2.使用syslinux项目下lpxelinux.0做为pxe引导文件,原因:测试发现lpxelinux.0对http协议支持更好,可以更 ...

  5. App自动化中 - 三大元素定位工具

    文章转自:https://blog.csdn.net/lkm564513278/article/details/105511411 在日常android app自动化测试工作当中,使用一种工具可能难以 ...

  6. Python学习笔记（一）环境确认

    1.安装环境 1)python解释器 版本3.10.2 安装完毕后在命令提示符窗口中输入python显示版本信息 2)开发工具 pycharm 2021.1.3 2.新建项目 创建项目后修改解释器配置 ...

  7. java异常信息打印

    如果你不仅想在日志中查看异常信息,也想把异常信息保存起来作为数据查看,那么你可以这样做 public void printException(Exception e) { ByteArrayOutpu ...

  8. CamstarVP提交前验证

    方法一: public override FormsFramework.ValidationStatus ValidateInputData(Service serviceData) { Valida ...

  9. CH583 是集成 BLE 无线通讯的 RISC-V MCU 微控制器

    CH583 是集成 BLE 无线通讯的 RISC-V MCU 微控制器.片上集成 2Mbps 低功耗蓝牙 BLE 通讯模块.2 个全速 USB 主机和设备控制器及收发器.2 个 SPI.4 个串口.1 ...

  10. 【Pr】如何裁剪视频得页面？

    [Pr]如何裁剪视频得页面? 选择视频轨道 | 效果 | 裁剪(可以搜索) | 调整上下左右需要裁剪的大小 | 选择缩放,去掉黑边