之前给自己公司的主页套用过一个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. 让CSS flex布局最后一行列表左对齐的N种方法

    原文链接https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649091838&idx=1&sn=fa4e1ed1e0 ...

  2. [Maven] 引入依赖以后如果标红怎么办

  3. 信创要求下，FTP要不要替代？要怎么进行国产化替代？

    信创在国内如火如荼地发展,无论在技术探索和突破上,还是在政策规划上,都朝着更加完善的方向大步迈进.信创目前在从大的方面来说,信创目前主要集中在基础软件.硬件和芯片上,其中基础软件包括操作系统.数据库. ...

  4. UE4启动顺序

    GameMode PlayerController Actor Level gameMode , playerController控制pawn , 激活默认相机active camera , getP ...

  5. python获取上月、当月、下月的开始和结束日期

    获取上月开始结束日期 方法一 import datetime def get_date_of_last_month(form="%Y-%m-%d"): ""&q ...

  6. CSS3实现图片滚动

    body{ margin: 0; padding: 0px; } #banner{ margin:20px auto; width: 600px; position: relative; overfl ...

  7. 宝塔邮局-并解决A纪录解析失败问题

    为什么一定要用这个邮局呢,只要是方便,在宝塔面板直接安装就行了. 使用教程如下: https://www.bt.cn/bbs/thread-87496-1-1.html 有一个BUG本来已经设置好了, ...

  8. pytorch的三种量化方式详解

    pytorch的三种量化方式详解 这篇博客详细介绍了pytorch官方教程提到的三种量化方式的原理,详细解释了三种量化方式的区别: 1. 静态量化 :torch.quantize_per_tensor ...

  9. Linux 第五节 (shell脚本while循环，case，计划任务，用户及权限）

    #!/bin/bash #this is a test script PRICE=$(expr $RANDOM % 1000)   //将随机得出的数字取余 TIMES=0 while true do ...

  10. flutter SafeArea和SliverSafeArea，适应特殊屏幕

    现如今的手机已经不能提供给应用程序规整的矩形界面了,一些带圆角或者是刘海屏让应用程序的布局更加复杂,甚至是需要单独适配,这对开发者来来太糟糕了. 因此SafeArea控件应用而生,SafeArea通过 ...