`
9秒学院
  • 浏览: 37608 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

slider revolution实现幻灯片

 
阅读更多
dd
Slider Revolution基于jQuery,它充分响应,支持移动设备,支持手机触摸,键盘翻页;它内置幻灯、视频播放计时器,它拥有各种模式:自定义,自动响应,全屏;它有多种动画效果、3d效果。

下面介绍使用步骤:

1,引入需要使用的文件如下:

1
2
3
4
<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>
2.在body部分定义主体html结构如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>


3。调用Slider Revolution:

1
2
3
4
5
6
7
8
9
$(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...多种动画效果,可参照jQuery Easing 动画效果扩展

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

1
2
<div class="tp-bannertimer"></div>
分享到:
评论

相关推荐

    Slider Revolution for Wordpress

    Revolution Slider是一个具有视差功能的幻灯片插件,此插件是wordpress上目前为至最强大的幻灯片插件,具有自适应功能、可创建全宽幻灯片、具有视差效果,所有幻灯片拥有的功能他全部拥有。所以,你值得拥有! 图片...

    slider-revolution-v6.2.23_WordPress_slider_wApuu.com_

    "slider"表明这是一款滑动展示内容的工具,"revolution"通常指的是这款知名的响应式滑动插件的名字,它允许用户创建出引人入胜的幻灯片和全屏滚动效果。"wApuu.com"可能是一个网站或服务的名称,提供此插件的下载或...

    Slider Revolution5.4.7.3 中文汉化版,完全汉化

    Slider Revolution 是一款功能强大的WordPress滑块插件,广泛应用于网站设计中,用于创建引人注目的内容展示、幻灯片和图像滑块。在2018年5月,它发布了5.4.7.3版本,这一更新带来了多项改进和新特性,同时也被全面...

    jQuery插件Slider Revolution实现响应动画滑动图片切换效果

    通过给tp-banner类元素绑定revolution()函数,并在函数内部定义各种参数,如滑动内容的停留时间(delay)、初始宽度(startwidth)、初始高度(startheight)和是否显示缩略图(hideThumbs)等,来调整幻灯片的展示...

    wordpress的幻灯片插件 Revslider 中文汉化版

    Revolution Slider,简称Revslider,是一款功能强大的WordPress幻灯片插件,专为网站设计者和开发者提供专业级的动态内容展示解决方案。这款插件以其丰富的功能、易用性以及高度自定义的特点而广受赞誉。Revslider...

    TouchSlider是一个幻灯slider效果

    【TouchSlider】是一个专为全平台设计的轻量级JavaScript组件,主要功能是实现高效的幻灯片Slider效果。在Web开发中,滑动效果经常被用于网站的首页展示、产品介绍或者图片轮播等场景,TouchSlider凭借其跨平台兼容...

    基于jquery的slide图片切换,高宽自适应.rar

    本插件支持一个页面多次使用,自动播放切换图片列表,具备图片预加载功能,重置图片宽度,可以自动适应图片的宽和高以适应指定的宽高,可以指定图片列表,指定切换... 飞飞图片宽高自适应的slide幻灯片切换jQuery插件

    Master_Slider_v2.9.2

    Master Slider 超强超好用幻灯片 WordPress插件,说起高级幻灯片,体验最好的就是Revolution 幻灯片,这个插件和其他2款插件比,功能都差不多,虽然体验不如Revolution 幻灯片,但是提供了个超友好的功能,就是全部...

    RevolutionSlider汉化包

    Revolution Slider 是一款流行的WordPress滑动展示插件,广泛用于创建响应式的图像、内容和视频幻灯片。它以其丰富的设计选项、动画效果和用户友好性而闻名。 描述中的关键点在于如何应用这个汉化包:"将revslider-...

    revslider609.zip

    Revolution Slider(RevSlider)的核心特性包括: 1. **丰富的设计模板**:RevSlider提供了大量预设的幻灯片模板,这些模板设计精美,适用于多种用途,如产品展示、新闻发布、公司介绍等。用户可以根据自己的需求...

    highlight-carousel_WordPress_源码

    这个组件可能是为了增强网站的视觉效果,通过展示图片、内容或者幻灯片的形式,吸引用户注意力并提供交互体验。 【描述】"Template for RevSlider WP"说明这个"highlight-carousel"是专门为Revolution Slider(简称...

    xshot-site:网站Xshot数据

    6. **事件和交互**:Revolution Slider提供了多种事件监听器,允许你监听滑块的状态变化,如滑动开始、结束、当前幻灯片改变等。这些事件可以与网站其他功能结合,提供更丰富的用户体验。 7. **自定义扩展**:如果...

    Wordpress Interior模板

    3. Revolution Slider:提供高级幻灯片功能,可创建动态且引人注目的展示。 4. SEO优化:内置SEO友好元素,有助于提高网站在搜索引擎中的排名。 5. 自定义小工具:包括社交媒体链接、最新文章、分类等,便于添加个性...

    wordpress 模板

    `slider_export.txt` 文件可能是一个滑块插件的导出数据,滑块是网页设计中常见的一种展示内容的方式,尤其适用于展示图片或幻灯片。WordPress有许多滑块插件,如Revolution Slider、Slider Revolution等,它们允许...

    revslider_WordPress_zip_

    2. **丰富的动画效果**:该插件包含大量预设的过渡动画,可以为每个幻灯片或层添加独特的进入和退出效果。这些动画可以自定义,以实现更加个性化的视觉体验。 3. **响应式设计**:RevSlider确保滑块在不同设备和...

    jQuery常用插件

    5. **Slider和Carousel**:`Slider Revolution`、`Slick`和`Bootstrap Carousel`提供了动态的幻灯片和轮播组件,常用于首页展示和产品推介。 6. **Ajax Form**:`jQuery Form Plugin`使得使用Ajax提交表单变得简单...

    2023年最新WordPress主题:zephyr_V8.17.3.zip

    1. **Slider Revolution**:一款高级幻灯片插件,可以创建引人入胜的动态滑块,提升网站视觉效果。 2. **Contact Form 7**:提供简单易用的联系表单,方便访客与网站所有者进行沟通。 3. **Yoast SEO**:强大的SEO...

    wordpress THE7 主题最新款

    1. **Revolution Slider**:THE7 预装了Revolution Slider,一个强大的幻灯片插件,用于创建吸引人的动态内容展示。 2. **Elementor**:除了Visual Composer,THE7 还兼容Elementor页面构建器,提供更多设计选项。 ...

    蓝色时尚CSS3单页模板是一款蓝色大气好看的响应式网站模板下载.rar

    2. **revolution-slider.css**:这个文件关联到Revolution Slider,一个功能强大的jQuery幻灯片插件,常用于创建引人注目的滑动内容展示,比如首页的特色介绍或产品展示。 3. **animate.css**:这是一个包含各种...

    2023年最新WordPress主题:grand-conference_v5.1.5.zip

    4. **Slider Revolution** - 创建动态幻灯片和引人入胜的视觉效果,吸引访问者的注意力。 5. **Yoast SEO** - 强大的SEO优化工具,帮助提升网站的搜索引擎排名。 6. **Translation Plugins** - 如WPML或Polylang,...

Global site tag (gtag.js) - Google Analytics