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 相关文章推荐
javascript 面向对象 function类
May 13 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
Feb 18 Javascript
JavaScript学习笔记之定时器
Jan 22 Javascript
Angularjs 依赖压缩及自定义过滤器写法
Feb 04 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
Mar 09 Javascript
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
JS 数组随机洗牌的实例代码
Sep 12 Javascript
如何安装控制器JavaScript生成插件详解
Oct 21 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
Vue中使用canvas方法总结
Feb 12 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
Apr 08 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 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 foreach正序倒序输出示例代码
2014/07/01 PHP
关于php 高并发解决的一点思路
2017/04/16 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
List Installed Hot Fixes
2007/06/12 Javascript
jquery 选项卡效果 新手代码
2011/07/08 Javascript
解读JavaScript中 For, While与递归的用法
2013/05/07 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
jQuery中$.extend()用法实例
2015/06/24 Javascript
vue实现可增删查改的成绩单
2016/10/27 Javascript
Vue.js双向绑定操作技巧(初级入门)
2016/12/27 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
2017/10/30 Javascript
js实现多个倒计时并行 js拼团倒计时
2019/02/25 Javascript
浅谈ECMAScript 中的Array类型
2019/06/10 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
2020/03/07 Javascript
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
Python requests发送post请求的一些疑点
2018/05/20 Python
Python调用服务接口的实例
2019/01/03 Python
Python日期时间Time模块实例详解
2019/04/15 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
python字符串,元组,列表,字典互转代码实例详解
2020/02/14 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
Python3.8.2安装包及安装教程图文详解(附安装包)
2020/11/28 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
你在项目中用到了xml技术的哪些方面?如何实现的?
2014/01/26 面试题
毕业生优秀推荐信
2013/11/26 职场文书
《美丽的彩虹》教学反思
2014/02/25 职场文书
农行心得体会
2014/09/02 职场文书
工伤私了协议书范本
2014/11/24 职场文书
致青春观后感
2015/06/09 职场文书
医院见习总结
2015/06/24 职场文书
MySQL中datetime时间字段的四舍五入操作
2021/10/05 MySQL
SQL语句多表联合查询的方法示例
2022/04/18 MySQL