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 相关文章推荐
Jquery对象和Dom对象的区别分析
Nov 20 Javascript
JavaScript中的fontsize()方法使用详解
Jun 08 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
express文件上传中间件Multer详解
Oct 24 Javascript
纯js模仿windows系统日历
Feb 04 Javascript
js实现下一页页码效果
Mar 07 Javascript
js仿拉勾网首页穿墙广告效果
Mar 08 Javascript
javascript过滤数组重复元素的实现方法
May 03 Javascript
vue 标签属性数据绑定和拼接的实现方法
May 17 Javascript
Layui实现主窗口和Iframe层参数传递
Nov 14 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 Javascript
js+css实现扇形导航效果
Aug 18 Javascript
内容滑动切换效果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中图片等比缩放的实例
2013/03/24 PHP
ASP和PHP实现生成网站快捷方式并下载到桌面的方法
2014/05/08 PHP
php+highchats生成动态统计图
2014/05/21 PHP
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
避免 showModalDialog 弹出新窗体的原因分析
2010/05/31 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
2017/08/11 Javascript
为什么我们要做三份 Webpack 配置文件
2017/09/18 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
2017/09/22 jQuery
three.js中3D视野的缩放实现代码
2017/11/16 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
vuex实现购物车功能
2020/06/28 Javascript
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
python获取本机mac地址和ip地址的方法
2015/04/29 Python
Python中的fileinput模块的简单实用示例
2015/07/09 Python
Python的Django框架中的URL配置与松耦合
2015/07/15 Python
Python3 操作符重载方法示例
2017/11/23 Python
基于Python列表解析(列表推导式)
2018/06/23 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
使用PyOpenGL绘制三维坐标系实例
2019/12/24 Python
python保留小数位的三种实现方法
2020/01/07 Python
python使用numpy实现直方图反向投影示例
2020/01/17 Python
python3 简单实现组合设计模式
2020/07/02 Python
Python + opencv对拍照得到的图片进行背景去除的实现方法
2020/11/18 Python
python中K-means算法基础知识点
2021/01/25 Python
Linux的文件类型
2016/07/05 面试题
超市总经理岗位职责
2014/02/02 职场文书
高考作弊检讨书1500字
2015/02/16 职场文书
2015年暑假生活总结
2015/07/13 职场文书
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS
python基础之文件处理知识总结
2021/05/23 Python
Mysql数据库表中为什么有索引却没有提高查询速度
2022/02/24 MySQL