jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果


Posted in Javascript onApril 16, 2020

Flexslider是一款基于的jQuery内容滚动插件。它能让你轻松的创建内容滚动的效果,具有非常高的可定制性。开发者可以使用Flexslider轻松创建各种图片轮播效果、焦点图效果、图文混排滚动效果。

jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果

下载源码

Flexslider具有以下特性:
支持滑动和淡入淡出效果。
支持水平、垂直方向滑动。
支持键盘方向键控制。
支持触控滑动。
支持图文混排,支持各种html元素。
自适应屏幕尺寸。
可控制滑动单元个数。
更多选项设置和回调函数。 

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

<link rel="stylesheet" type="text/css" href="flexslider.css" /> 
<script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="jquery.flexslider-min.js"></script>

然后在body中加入以下HTML代码:

<div class="flexslider"> 
 <ul class="slides"> 
 <li><img src="images/s1.jpg" /></li> 
 <li><img src="images/s2.jpg" /></li> 
 <li><img src="images/s3.jpg" /></li> 
 <li><img src="images/s4.jpg" /></li> 
 </ul> 
</div>

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

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

$(function() { 
 $(".flexslider").flexslider(); 
});

然后预览网页效果,一个内容切换效果就完成了,当然想要更多个性化设置,flexslider提供了丰富的选项配置以及回调函数绝对可以满足大多数开发者需求。 

Flexslider选项设置

jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果

本文来源:helloweba.com

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
onbeforeunload与onunload事件异同点总结
Jun 24 Javascript
JavaScript数组常用操作技巧汇总
Nov 17 Javascript
bootstrap改变按钮加载状态
Dec 01 Javascript
node.js中的console.info方法使用说明
Dec 09 Javascript
JQuery分屏指示器图片轮换效果实例
May 21 Javascript
简介JavaScript中fixed()方法的使用
Jun 08 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
React Native仿美团下拉菜单的实例代码
Aug 08 Javascript
关于微信小程序登录的那些事
Jan 08 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
js实现无缝轮播图
Mar 09 Javascript
Vue操作Storage本地化存储
Apr 29 Vue.js
内容滑动切换效果jquery.hwSlide.js插件封装
Jul 07 #Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 #Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
Jul 06 #Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
Jul 06 #Javascript
jQuery+ajax实现实用的点赞插件代码
Jul 06 #Javascript
jQuery操作iframe中js函数的方法小结
Jul 06 #Javascript
jQuery深拷贝Json对象简单示例
Jul 06 #Javascript
You might like
PHP遍历并打印指定目录下所有文件实例
2014/02/10 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
PHP输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
PHP运行模式汇总
2016/11/06 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
JS 时间显示效果代码
2009/08/23 Javascript
js常用代码段收集
2011/10/28 Javascript
使用js修改客户端注册表的方法
2013/08/09 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
JS控制文本域只读或可写属性的方法
2016/06/24 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
2020/11/03 Javascript
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
python函数的5种参数详解
2017/02/24 Python
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
python查询mysql,返回json的实例
2018/03/26 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
详解vscode实现远程linux服务器上Python开发
2020/11/10 Python
python实现猜拳游戏项目
2020/11/30 Python
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
销售顾问的岗位职责
2013/11/13 职场文书
送货司机岗位职责
2013/12/11 职场文书
运动会通讯稿400字
2014/01/28 职场文书
房地产促销活动方案
2014/03/01 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
2014和解协议书范文
2014/09/15 职场文书
安全月宣传标语
2014/10/07 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书
论文致谢词范文
2015/05/14 职场文书
Spring Boot 实现敏感词及特殊字符过滤处理
2021/06/29 Java/Android