插件下载:

  点击下载 密码: fbeg

Flexslider具有以下特性:

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

HTML代码:

<link rel="stylesheet" type="text/css" href="flexslider.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.flexslider-min.js"></script> <div class="flexslider">
<ul class="slides">
<li><img src="data:images/s1.jpg" /></li>
<li><img src="data:images/s2.jpg" /></li>
<li><img src="data:images/s3.jpg" /></li>
<li><img src="data:images/s4.jpg" /></li>
</ul>
</div>

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

JavaScript代码:

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

  运行一下试试咯~

Flexslider部分参数设置:

参数 描述 默认值
animation 动画效果类型,有"fade":淡入淡出,"slide":滑动 "fade"
easing 内容切换时缓动效果,需要jquery easing插件支持 "swing"
direction 内容滚动方向,有"horizontal":水平方向 和"vertical":垂直方向 "horizontal"
animationLoop 是否循环滚动 true
startAt 初始滑动时的起始位置,定位从第几个开始滑动 0
slideshow 是否自动滑动 true
slideshowSpeed 滑动内容展示时间(ms) 7000
animationSpeed 内容切换时间(ms) 600
initDelay 初始化时延时时间 0
pauseOnHover 鼠标滑向滚动内容时,是否暂停滚动 false
touch 是否支持触摸滑动 true
directionNav 是否显示左右方向箭头按钮 true
keyboard 是否支持键盘方向键操作 true
minItems 一次最少展示滑动内容的单元个数 1
maxItems 一次最多展示滑动内容的单元个数 0
move 一次滑动的单元个数 0
回调函数 start: function(){},
before: function(){},
after: function(){},
end: function(){},
added: function(){},
removed: function(){},
init: function(){},
-

  

  参考原文:https://www.helloweba.net/javascript/265.html

  Flexslider官网:http://www.woothemes.com/flexslider

Flexslider插件实现图片轮播、文字图片相结合滑动切换效果的更多相关文章

  1. Flexslider图片轮播、文字图片相结合滑动切换效果

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

  2. 2017年10月21日 CSS常用样式&鼠标样式 以及 jQuery鼠标事件& jQuery图片轮播& jQuery图片自动轮播代码

    css代码 背景与前景 background-color:#0000; //背景色,样式表优先级高 background-image:url(路径); //设置背景图片 background-atta ...

  3. UIScrollView实现图片轮播器及其无限循环效果

    图片轮播器: 一.实现效果 实现图片的自动轮播            二.实现代码 storyboard中布局 代码: 1 #import "YYViewController.h" ...

  4. HTML DOM部分---做竖向横向的下拉导航 下拉菜单 图片轮播(圆点、箭头) 选项卡 进度条;

    1,竖向下拉导航 鼠标单击打开 再打击关闭 <style> *{ margin:0px auto; padding:0px;} div{ width:100px; height:50px; ...

  5. 使用JS实现图片轮播滚动跑马灯效果

    我的第一篇文章.哈哈.有点小鸡冻.  之前在百度搜索"图片轮播"."图片滚动",结果都是那种可以左右切换的.也是我们最常见的那种.可能是搜索 关键字的问题吧. ...

  6. axure 动态面板实现图片轮播效果(淘宝)

    淘宝中经常可以看到店铺中的图片轮播效果,本经验将通过axure7.0实现 工具/原料   axure7.0 方法/步骤     下载需要轮播的图片   将图片引入至axure中,将引入的第一张图片转为 ...

  7. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

  8. Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  9. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

随机推荐

  1. 神奇的URL Schemes大全

    微信: 打开微信 wechat:// 微信扫一扫 weixin://scanqrcode 支付宝: 蚂蚁庄园 alipays://platformapi/startapp?appId=66666674 ...

  2. SciPy 图像处理

    章节 SciPy 介绍 SciPy 安装 SciPy 基础功能 SciPy 特殊函数 SciPy k均值聚类 SciPy 常量 SciPy fftpack(傅里叶变换) SciPy 积分 SciPy ...

  3. POJ 1979 Red and Black 四方向棋盘搜索

    Red and Black Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 50913   Accepted: 27001 D ...

  4. Koa微信公众号开发

    微信开发者模式开启需要服务器域名合法并且把接口配置好,这个接口是接通的关键,接通后微信后台的菜单设置功能,客服功能会失效,需要开发者自定义菜单和智能客服界面,并且接通后可以调用微信网页内部的定位分享等 ...

  5. 数据库连接需要dll

    连接oracle引用: Oracle.ManagedDataAccess.dll和Oracle.ManagedDataAccess.EntityFramework.dll, 连接sqlserver 连 ...

  6. spark sortShuffleWriter源码学习

    查看的源码为spark2.3 调用ShuffleMapTask的runTask方法 org.apache.spark.scheduler.ShuffleMapTask#runTask ShuffleM ...

  7. 获取控件的xy坐标

    procedure TForm1.SpeedButton1Click(Sender: TObject); var   Apoint:TPoint; begin   APoint:=TSpeedButt ...

  8. 安卓多个按钮使用一个OnClickListener

    安卓studio 3.1 版本编译通过 一个按钮id为bt1 一个按钮Id为bt2 mainactivity 代码入下 package com.example.vmpdump.firstapp; im ...

  9. 从0开始自己配置一个vps虚拟服务器(1)

    我前几年买的虚拟机都被我荒废了,我已经配置过很多遍了,但是从来没有真的用过.因为我前几个月之前又新买了一个便宜的服务,准备写新的东西.供应商pacificrack,真的很烂,一直断,控制面板还打不开, ...

  10. Fr3设置图片打印

    见 fr3的文件内容,为xml <?xml version="1.0" encoding="utf-8"?> <TfrxReport Vers ...