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 相关文章推荐
editable.js 基于jquery的表格的编辑插件
Oct 24 Javascript
JQuery循环滚动图片代码
Dec 08 Javascript
js有关元素内容操作小结
Dec 20 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
Jan 09 Javascript
js带点自动图片轮播幻灯片特效代码分享
Sep 07 Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 Javascript
jQuery插件之validation插件
Mar 29 jQuery
Angular2的管道Pipe的使用方法
Nov 07 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 Javascript
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
内容滑动切换效果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
一个连接两个不同MYSQL数据库的PHP程序
2006/10/09 PHP
PHP中的cookie
2006/11/26 PHP
PHP内核探索之解释器的执行过程
2015/12/22 PHP
php生成带logo二维码方法小结
2016/04/08 PHP
php  单例模式详细介绍及实现源码
2016/11/05 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
PHP goto语句用法实例
2019/08/06 PHP
php实现登录页面的简单实例
2019/09/29 PHP
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
Javascript实现获取及设置光标位置的方法
2015/07/21 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
noty ? jQuery通知插件全面解析
2016/05/18 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
微信小程序 template模板详解及实例
2017/02/21 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
2017/08/08 Javascript
详解写好JS条件语句的5条守则
2019/02/28 Javascript
在Uni中使用Vue的EventBus总线机制操作
2020/07/31 Javascript
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
Python3.5.3下配置opencv3.2.0的操作方法
2018/04/02 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
台湾最大网路书店:博客来
2018/03/18 全球购物
M.M.LaFleur官网:美国职业女装品牌
2020/10/27 全球购物
学生个人求职自荐信格式
2013/09/23 职场文书
广告学专业应届生求职信
2013/10/01 职场文书
点菜员岗位职责范本
2014/02/14 职场文书
发展部经理职责规定
2014/02/22 职场文书
2015年党员干部承诺书
2015/01/21 职场文书
新学期感想
2015/08/10 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
总结Python变量的相关知识
2021/06/28 Python
如何利用python创作字符画
2022/06/25 Python