SliderRevolution实现幻灯片-创新互联

创新互联主营南雄网站建设的网络公司,主营网站建设方案,App定制开发,南雄h5小程序定制开发搭建,南雄网站营销推广欢迎南雄等地区企业咨询

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="p_w_picpaths/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="p_w_picpaths/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>

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网页名称：SliderRevolution实现幻灯片-创新互联
当前URL：https://www.cdcxhl.com/article22/phicc.html

成都网站建设公司_创新互联，为您提供App开发、虚拟主机、网站排名、手机网站建设、品牌网站设计、商城网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联