视差响应动画滑动图片切换效果

这是一款非常强大的内容切换插件,它基于jQuery,它充分响应,支持移动设备,支持手机触摸,键盘翻页;它内置幻灯、视频播放计时器,它拥有各种模式:自定义,自动响应,全屏;它有多种动画效果、3d效果...总之你想到的效果它都做到了,它的名字叫Slider Revolution。

HTML

Slider Revolution是一款基于jQuery的插件,使用它时需要先载入jQuery库文件,以及Slider Revolution依赖的css和js文件。

<script src="js/jquery.js"></script> <link rel="stylesheet"  href="css/style.css" media="screen" /> <script src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script> <script src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script> 

内容切换的主体html结构如下,由div.tp-banner包含多个<li>标签,<li>中放置切换的内容,包括主要图片、文字、按钮信息。这些信息配上各自的data-属性,是为了让Slider Revolution识别。

<div class="tp-banner-container">     <div class="tp-banner" >         <ul>             <!-- SLIDE  -->             <li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >                 <!-- MAIN IMAGE -->                 <img src="images/bg1.jpg"  alt="slidebg1"  data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">                 <!-- LAYERS -->                 <!-- LAYER NR. 1 -->                 <div class="tp-caption lightgrey_divider skewfromrightshort fadeout"                     data-x="85"                     data-y="224"                     data-speed="500"                     data-start="1200"                     data-easing="Power4.easeOut">My Caption                 </div>                 ...              </li>             <li data-transition="zoomout" data-slotamount="7" data-masterspeed="1000" >                 <!-- MAIN IMAGE -->                 <img src="images/bg2.jpg"  alt="darkblurbg"  data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">                 <!-- LAYERS -->                 <!-- LAYER NR. 1 -->                 <div class="tp-caption lightgrey_divider skewfromrightshort fadeout"                     data-x="85"                     data-y="224"                     data-speed="500"                     data-start="1200"                     data-easing="Power4.easeOut">My Caption                 </div>                 ...             </li>             ....         </ul>     </div> </div> 

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:关闭。

对于每个<li>标签可以设置各种效果:

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...多种动画效果,可参照jQuery Easing 动画效果扩展

此外,如果要加上时间线作为一个定时器,可以在滑动内容的末尾加上以下代码:

<div class="tp-bannertimer"></div> 
时间: 2024-11-03 01:18:21

视差响应动画滑动图片切换效果的相关文章

Android 自定义 ViewPager 打造千变万化的图片切换效果

Android 自定义 ViewPager 打造千变万化的图片切换效果 标签: Android自定义ViewPagerJazzyViewPager 目录(?)[+] 转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38026503 记 得第一次见到ViewPager这个控件,瞬间爱不释手,做东西的主界面通通ViewPager,以及图片切换也抛弃了ImageSwitch之类的,开 始让ViewPager来做.时间长了,ViewPa

css图片切换效果分析+翻译整理

Demos:http://tympanus.net/Tutorials/CSS3SlidingImagePanels/ 出处:http://tympanus.net/codrops/2012/01/17/sliding-image-panels-with-css3/ 这个教程将介绍如何使用纯CSS创建一个干净的幻灯图片面板.主要想法是在面板中使用背景图片,然后在点击标签后让动画起效. 今天我们将向您展示如何创建仅适用于CSS一些巧妙的滑动图像面板.该想法是使用背景图像的面板和一个标签上点击时动画

CSS3实现绚丽的图片切换效果

逛博客看到的一个很好看的图片切换效果,用CSS3做的,自己也尝试了一下.想法很巧妙,实现起来并不困难.将一个图片分为了四个部分,通过绝对定位的方式使每个li中显示图片的一个部分,从而拼成一个完整的图片.再对四个部分进行动画处理让第二个图片显现出来,第二个图片也是使用transform属性来先放大再还原的处理. 效果预览 附代码段: <div class="grid-box"> <ul class="pic1"> <li> <

[Swift通天遁地]九、拔剑吧-(15)搭建具有滑出、视差、3D变形等切换效果的引导页

软件一般包含一个引导页面,向用户形象的展示产品的主要特性. 本文将演示搭建具有滑出.视差.3D变形等切换效果的引导页. GitHub项目:[ariok/BWWalkthrough],下载并解压文件. [Pod]->选择两个文件: [BWWalkthroughViewController.swift]. [BWWalkthroughPageViewController.swift] 将选择的两个文件,拖动到项目中.在弹出的文件导入确认窗口中,点击[Finish] 创建一个自定义的视图控制器,用来制

图片切换特效(1):原生JS图片切换效果

转自:http://www.codefans.net/jscss/code/4699.shtml <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

JS图片切换效果

源地址:http://www.codefans.net/jscss/code/4699.shtml <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g

jquery简单的图片切换效果,支持pc端、移动端的banner图片切换开发

详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的banner图片切换效果. 写法很简单,网页初学者们或者wenbapp初学者们可以拿去学习学习,也可以在这基础上加上手机的图片滑动切换效果.废话不多说,下面说说这个简单的图片切换的效果吧! 首先以下是图片切换的效果图:   图片切换效果html内容: <div class="tyna2"&

jquery带按钮的图片切换效果

<!doctype html> <html> <head> <meta charset="gb2312"> <title>jquery带按钮的图片切换效果</title> <script type="text/javascript" src="jquery-1.8.0.js"></script> <style type="text/cs

精致3D图片切换效果,最适合企业产品展示

这是一个精致的立体图片切换效果,特别适合企业产品展示,可立即用于实际项目中.支持导航和自动播放功能, 基于 CSS3 实现,推荐使用最新的 Chrome,Firefox 和 Safari 浏览器浏览效果. 效果演示      源码下载 您可能感兴趣的相关文章 Web 开发中很实用的10个效果[源码下载] 精心挑选的优秀jQuery Ajax分页插件和教程 12个让人惊叹的的创意的 404 错误页面设计 让网站动起来!12款优秀的 jQuery 动画插件 十分惊艳的8个 HTML5 & JavaS