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 相关文章推荐
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
JavaScript.Encode手动解码技巧
Jul 14 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
Jul 13 Javascript
js中document.write的那点事
Dec 12 Javascript
在AngularJS应用中实现一些动画效果的代码
Jun 18 Javascript
javascript带回调函数的异步脚本载入方法实例分析
Jul 02 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
javascript 常用验证函数总结
Jun 28 Javascript
js实现一键复制功能
Mar 16 Javascript
JavaScript对象拷贝与赋值操作实例分析
Dec 10 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
Javascript实现html转pdf高清版(提高分辨率)
Feb 19 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中curl和file_get_content的区别
2014/05/10 PHP
PHP函数实现分页含文本分页和数字分页
2014/10/23 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
关于JS控制代码暂停的实现方法分享
2012/10/11 Javascript
网站404页面3秒后跳到首页的实例代码
2013/08/16 Javascript
jquery链式操作的正确使用方法
2014/01/06 Javascript
jQuery中选择器小问题(新人难免遇到)
2014/03/31 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
2015/11/30 Javascript
用nodejs的实现原理和搭建服务器(动态)
2016/08/10 NodeJs
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
vue-cli项目使用mock数据的方法(借助express)
2019/04/15 Javascript
vue router 用户登陆功能的实例代码
2019/04/24 Javascript
fastadmin中调用js的方法
2019/05/14 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
2019/05/29 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
python类装饰器用法实例
2015/06/04 Python
Python中的zipfile模块使用详解
2015/06/25 Python
对python3.4 字符串转16进制的实例详解
2019/06/12 Python
python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
2020/04/07 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
selenium+headless chrome爬虫的实现示例
2021/01/08 Python
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
汽车检测与维修个人求职信
2013/09/24 职场文书
小学运动会表扬稿
2014/01/19 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
学院党的群众路线教育实践活动第一阶段情况汇报
2014/10/25 职场文书
运动员入场词
2015/07/18 职场文书
公司仓库管理制度
2015/08/04 职场文书