html首页 slider图片切换效果,jQuery插件Slider Revolution实现响应动画滑动图片切换效果...
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
2018-12-31
编程之家
https://www.jb51.cc
这是一款非常强大的内容切换插件,它基于jQuery,它充分响应,支持移动设备,支持手机触摸,键盘翻页;它内置幻灯、视频播放计时器,它拥有各种模式:自定义,自动响应,全屏;它有多种动画效果、3d效果...总之你想到的效果它都做到了,它的名字叫Slider Revolution。
HTML
Slider Revolution是一款基于jQuery的插件,使用它时需要先载入jQuery库文件,以及Slider Revolution依赖的css和js文件。
内容切换的主体html结构如下,由div.tp-banner包含多个
中放置切换的内容,包括主要图片、文字、按钮信息。这些信息配上各自的data-属性,是为了让Slider Revolution识别。
SEOut">My Caption
...
SEOut">My Caption
...
....
jQuery调用
HTML结构布置好后,就可以调用Slider Revolution插件了,贴上以上代码后,打开浏览器就可以看到切换效果了。
$(function() {
$('.tp-banner').revolution({
delay:9000,startwidth:1170,startheight:500,hideThumbs:10
});
});
Slider Revolution提供了很多参数选项设置:
delay: 滑动内容停留时间。默认9000毫秒
startheight: 滑动内容高度,默认490像素。
startwidth: 滑动内容宽度,默认890像素。
navigationType: 显示翻页图标,默认“bullet”(圆点),如果设置为“none”则不显示。。
navigationArrows: 显示翻页箭头,默认nexttobullets,即鼠标滑向时显示左右翻页箭头,如果设置为none则不显示。
touchenabled: 是否允许触摸滑动,默认on即允许,如果设置为off则不允许。
onHoverStop: 是否开启鼠标滑向时暂停,on:开启,off:关闭。
fullWidth: 是否开启全屏展示图片内容,on:开启,off:关闭。
对于每个
标签可以设置各种效果:
data-transition: 内容滑动效果,可以设置以下值:Boxslide,Boxfade,slotzoom-horizontal,slotslide-horizontal,slotfade-horizontal,slotzoom-vertical,slotslide-vertical,slotfade-vertical,curtain-1,curtain-2,curtain-3,slideleft,slideright,slideup,slidedown,fade
data-slotamount: 切换时被分成的方形块数。
data-link: 图片链接
data-delay: 设置当前滑块内容的停留时间
对于每个li里面的元素,可以设置以下选项来实现各种效果。
动画样式,class属性: class属性值代表不同的动画样式:sft - Short from Top sfb - Short from Bottom,sfr - Short from Right,sfl - Short from Left,lft - Long from Top,lfb - Long from Bottom,lfr - Long from Right,lfl - Long from Left,fade - fading
data-x: 当前元素相对li的横向位移
data-y : 当前元素相对li的纵向位移
data-speed: 动画时间,毫秒
data-start after: 当前元素等待几秒后再显示
data-easing: 缓冲动画,有eaSEOutBack...多种动画效果,可参照动画效果扩展
此外,如果要加上时间线作为一个定时器,可以在滑动内容的末尾加上以下代码:
html首页 slider图片切换效果,jQuery插件Slider Revolution实现响应动画滑动图片切换效果...相关推荐
- 分享超酷的添加图片悬浮特效jQuery插件 - Adipoli
日期:2012/03/08 在线演示 本地下载 今天分享一个帮助你添加图片悬浮特效的jQuery插件 - Adipoli,这个插件可以帮助你添加各种不同的悬浮特效到你指定的图片上,特别适合制作你的相 ...
- html图片播放器,imgplay-基于canvas的图片序列播放jQuery插件
imgplay是一款基于HTML5 canvas的图片序列播放jQuery插件.通过该插件可以实现一组图片的轮流播放,你还可以进行暂停.快进.后退操作,并且可以进入全屏模式进行图片观看. 使用方法 使 ...
- jQuery插件之ajaxFileUpload上传文件或图片
我用的是这个:https://github.com/carlcarl/AjaxFileUpload 下载地址在这里:http://files.cnblogs.com/files/kissdodog/a ...
- html图片幕墙特效,jQuery和CSS3炫酷可交互的图片墙特效
Polaroid_Gallery是一款效果非常酷的可交互的jQuery和CSS3图片墙特效插件.该照片墙插件可以使用圆点导航按钮将相应的图片旋转居中显示,当点击居中的图片时,图片会翻转到反面,显示图片 ...
- html5页面滑入滑出效果,jQuery实现的淡入淡出与滑入滑出效果示例
本文实例讲述了jQuery实现的淡入淡出与滑入滑出效果.分享给大家供大家参考,具体如下: 1. 淡入淡出效果: 我们做这样一个实例: 有两个按钮,点击淡入,有一个div层淡入,点击淡出,div层淡出: ...
- js网页雪花效果jquery插件
1,使用前先导入jquery类库 2,导入雪花特效js类库 jq.snow.min.js 3,初始化代码 <script>$(function(){$.fn.snow({minSize : ...
- html5立体照片墙效果,jQuery超酷3D网格照片墙动画特效 -HTML5功能
作为网格容器,和一个按钮来触发动画效果. Animate CSS样式 在网格容器上设置了固定的宽度和高度,为了制作3D效果,还设置了perspective: 500px;.每一张图片也设置了固定的宽度 ...
- 轮播图切换圆点html,jQuery插件实现带圆点的焦点图片轮播切换
这次分享的代码是jQuery插件,HovertreeImg是一个图片轮播jquery插件,使用方便,可以设置大小,圆点位置等,代码简洁 #img img{width:100%;height:100%; ...
- 超强的jquery极品插件--色彩选择器类/ 右键菜单类/ 图片新闻flash展示类
Farbtastic Farbtastic是一个color picker插件.它能够在一个页面中加入多个颜色选择控件,然后每个控件关联到页面中的一个元素比如:文本输入框. Farbtastic jQu ...
最新文章
- hibernate3
- 多看系统下载_漫画迷手机必备,「漫画之家」全网漫画随意看
- 【HTML5】Server-Sent服务器发送事件
- 如何反映两条曲线的拟合精度_用水平仪如何检测导轨的直线度?
- 移动开发技术有哪些?
- 3ds max sdk导出插件编写的心得
- 洛谷 P4390 [BOI2007]Mokia 摩基亚 解题报告
- magento -- 如何在magento中进行产品的批量上传
- php 支付宝支付回调与查询订单
- 到底什么才是自动化巡检?
- 华氏温度转摄氏温度c语言作业,利用C语言怎么将摄氏度转换为华氏度
- usb计算机采集卡,关于usb视频采集卡 hdmi设置你可能不知道
- python 进行文本情感分析
- linux 修改文件内容命令
- Python 保存图片的两种方法
- python3_函数_形参调用方式 / 不定长参数 / 函数返回值 / 变量作用域 / 匿名函数 / 递归调用 / 函数式编程 / 高阶函数 / gobal和nonlocal关键字 / 内置函数
- 比最快的超级计算机快一百万亿倍!中国科学家实现“量子计算优越性”里程碑
- C++二进制转十进制源代码
- 考研:研究生考试(五天学完)之《线性代数与空间解析几何》研究生学霸重点知识点总结之第二课矩阵及其运算
- 计算方法--编程计算当x很小,接近零时计算(1-cos(x))/sin(x)的值,怎么样避免这种两个相近的数相减产生误差。
热门文章
- ASP.NET Core 管道再探
- ASP.NET Core MVC 视图
- ML.NET 0.9特性简介
- 如何在.NET Core控制台程序中使用依赖注入
- 规模化微服务——《微服务设计》读书笔记
- ASP.NET Core 运行原理剖析1:初始化WebApp模版并运行
- 启动Jupyter Notebook时出现Kernel error错误的解决方法
- Android单击、长按获取当前触点坐标下(TextView)文字字符
- 【Envi风暴】基于ENVI平台提取ASTER DEM完整操作步骤(附案例数据)
- 【ArcGIS遇上Python】ArcGIS Python批处理入门到精通实用教程目录