前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >FlexSlider图片轮播插件的使用

FlexSlider图片轮播插件的使用

作者头像
benny
发布2018-03-06 18:20:39
3.9K0
发布2018-03-06 18:20:39
举报
文章被收录于专栏:程序员的碎碎念

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)

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2017-08-31,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 程序员的碎碎念 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Flexslider选项设置
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档