FlexSlider图片轮播插件的使用

Flexslider是一款基于的jQuery内容滚动插件,不用自己写轮播图的代码,现在可以直接使用这个插件。

首先在页面head部位载入jquery库文件和Flexslider插件,以及Flexslider所需的基本css样式文件

然后是html代码:

使用了.flexslider来包括所有需要滚动的内容元素,然后使用<ul class="slides">这个class非常关键,内部的滚动内容都是针对.slides的,然后在<li>内部加入任意html元素,包括图片和文字。

调用Flexslider插件非常简单,使用如下代码:

当然想要更多个性化设置,flexslider提供了丰富的选项配置以及回调函数绝对可以满足大多数开发者需求。

最终代码:

效果图如下:

Flexslider选项设置

参数

描述

默认值

animation

动画效果类型,有"fade":淡入淡出,"slide":滑动

"fade"

easing

内容切换时缓动效果,需要jquery easing插件支持

"swing"

direction

内容滚动方向,有"horizontal":水平方向 和"vertical":垂直方向

"horizontal"

animationLoop

是否循环滚动

true

startAt

初始滑动时的起始位置,定位从第几个开始滑动

0

slideshow

是否自动滑动

true

slideshowSpeed

滑动内容展示时间(ms)

7000

animationSpeed

内容切换时间(ms)

600

initDelay

初始化时延时时间

0

pauseOnHover

鼠标滑向滚动内容时,是否暂停滚动

false

touch

是否支持触摸滑动

true

directionNav

是否显示左右方向箭头按钮

true

keyboard

是否支持键盘方向键操作

true

minItems

一次最少展示滑动内容的单元个数

1

maxItems

一次最多展示滑动内容的单元个数

0

move

一次滑动的单元个数

0

回调函数

start: function(){},before: function(){},after: function(){},end: function(){},added: function(){},removed: function(){},init: function(){},

-

(原文写于2017.8.18)

原文发布于微信公众号 - 程序员的碎碎念(gh_53e607dd4782)

原文发表时间:2017-08-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏刘望舒

React Native组件(三)Text组件解析

前言 此前介绍了最基本的View组件,接下来就是最常用的Text组件,对于Text组件的一些常用属性,这篇文章会给出简单的例子以供学习。 1 概述 Text组...

2186
来自专栏我和未来有约会

Silverlight初级教程-动画

Silverlight初级教程 动画 在这一节里将要用到在“认识工作区”中提到的时间抽了。这里将和学习flash的过程一样做一个最简单的动画。 ...

17510
来自专栏练小习的专栏

css实现未知宽度的正方形需求

今天群里有哥们问了一下,百分比宽度的正方形如何用css实现。其实就是不定宽的正方形如何用css实现。 第一个方法利用图片的等比例缩放,用base64写一个1*1...

2066
来自专栏vue学习

13、优化轮播图组件与vue深度处理器

(1)这里我们要用到vue的深度作用选择器,关于深度作用选择其详情看一看官网介绍:https://vue-loader-v14.vuejs.org/zh-cn/...

1322
来自专栏Python小屋

Python以字符形式打印双色图片中的文字

本文代码功能:假设有一白色背景的图片内含非白色姓名,代码读取图片像素信息,用很多星号来打印该姓名。 from PIL import Image def prin...

2444
来自专栏韦弦的偶尔分享

微信小程序textarea层级问题

写了一个页面,其中包含textarea和自定义的一个蒙版视图,发现在真机中textarea的placeholder文字和value文字都会显示在蒙版视图之上。。...

8841
来自专栏静默虚空的博客

HTML 基础

HTML 基础 本章展示最常用的 HTML 标签。 标题 标题很重要 请确保标题标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。 搜索引擎...

21210
来自专栏V站

Skill丨如何利用代码美化网站滚动条?

V站今天回想起以前模板也有美化滚动条,后来魔改魔改就没了,现在找出来分享出来。由于偏爱谷歌浏览器的简洁,感觉滚动条还是太宽了,用过改变滚动条粗细的插件,后来感觉...

1924
来自专栏杨龙飞前端

浏览器渲染过程

1434
来自专栏自动化测试实战

HTML第一课——基础知识普及【2】

1946

扫码关注云+社区