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 字符串【整合】

JavaScript 字符串用于存储和处理文本。因此在编写 JS 代码之时总如影随形,在你处理用户的输入数据的时候,在读取或设置 DOM 对象的属性时,在操作 ...

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

【翻译】浏览器渲染Rendering那些事:repaint、reflow/relayout、restyle

原文链接:http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ 有没有被标题中的5个“...

1986
来自专栏静晴轩

CSS征途之Background点滴

CSS虽算不上编程语言,确是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控...

3224
来自专栏糊一笑

移动端效果之Picker

写在前面 接着前面的移动端效果的研究,这次来看看picker选择器的实现原理 移动端效果之Swiper 移动端效果之CellSwiper 移动端效果之Index...

2873
来自专栏闻道于事

正式学习第二天上午——常用标签及列表 0605

今天2017.0605上午,主要学习了常用标签和列表,以下面代码为例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

2686
来自专栏软件测试经验与教训

Python学习笔记(二)

2647
来自专栏闻道于事

JavaScript事件与例子(三)

两个例子,好友选中效果和左侧右侧子菜单 一、好友选中效果 可以通过设置属性的方式判断当前是否被选中,也可以通过获取当前元素的颜色从而得知当前元素状态是否被选中,...

2746
来自专栏软件测试经验与教训

Python学习笔记(八)- 四个小程序

3299
来自专栏开源优测

python selenium2示例 - 同步机制

前言 在使用python selenium2进行自动化测试实践的过程中,经常会遇到元素定位不到,弹出框定位不到等等各种定位不到的情况,在大多数的情况下,无非是以...

2704
来自专栏守候书阁

css写作建议和性能优化小结

还有几天就到国庆中秋了,快要放假了,先祝大家节日快乐!之前写过js的写作建议和技巧,那么今天就来聊聊css吧!说到css,每一个网页都离不开css,但是对于cs...

472

扫码关注云+社区