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 条评论
登录 后参与评论

相关文章

来自专栏抠抠空间

JavaScript之DOM

一、什么是DOM? DOM (Document Object Model)是指文档对象模型,通过它,可以访问HTML文档的所有元素。 DOM(Docum...

2685
来自专栏前端架构与工程

CSS3伪类和伪元素的特性和区别

前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link、visited等,伪元素较常见的比如:bef...

1849
来自专栏云飞学编程

美女老师带你做爬虫:BeautifuSoup库详解及实战!

模块:urllib、urllib2、BeautifuSoup4模块(解析器lxml、html)

591
来自专栏刘望舒

React Native入门(三)组件的Props(属性)和State(状态)

前言 在Android或者iOS开发中我们会用到很多控件,这些控件会有很多的属性、样式等等。同样的,React Native中的组件也有属性、样式和状态。 1...

17310
来自专栏24K纯开源

Qt Style Sheet实践(三):QCheckBox和QRadioButton

导读       单选按钮(QRadioButton)和复选框(QCheckBox)是界面设计中的重要元素。单选按钮只允许用户在一组选项中选择一个,且当其中一个...

2896
来自专栏cnblogs

关于HTML面试题汇总之H5

一、H5有哪些新特性,移除了哪些元素?如何处理h5新标签的浏览器兼容性问题,如何区分html和html5 1. html5不在是SGL(通用标记语言)的一个子集...

1875
来自专栏Modeng的专栏

更好的理解 Script 标签元素

我们在 《Javascript简史》这遍文章中说过,「Javascript」这门语言是由 Netscape开发而来,当初开发的时候为了能让 「Javascrip...

712
来自专栏张俊红

网页的行为

总第62篇 本篇为爬虫基础知识第三篇,JavaScript篇,JavaScript是描述网站行为的,是为了增加与用户的交互,前两篇传送地址: 网页是怎么构成的?...

3425
来自专栏Python、Flask、Django

jQuery 学习(一)

1064
来自专栏Youngxj

CSS3随机背景图片切换特效

2166

扫描关注云+社区