Slider Revolution 響應式 jQuery 滑塊

本章將提供您安裝滑塊及設定選項的一般說明。後續章節將視需要提供更詳細的內容。

我需要上傳哪些檔案到伺服器？

請上傳 rs-plugin 資料夾到您的伺服器。在此資料夾中，您將找到包含所有項目內容的以下子資料夾：

• js
• css
• assets

您可以使用自己的 jQuery，但我們建議直接從 Google 資源載入（請參閱本文件後續說明）。

您會在您下載的壓縮檔中的 範例 資料夾下找到許多 範例與來源 。 

實作 jQuery

將以下幾行加入您的 HTML Head 中： 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js></script>

將 Revolution js 和 css 檔案加入您的 HTML 頁面

<!-- jQuery REVOLUTION Slider  -->
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.tools.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>

<!-- REVOLUTION BANNER CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />

<div class="bannercontainer">
<div class="banner">...</div>
</div>

.bannercontainer {
	width:100%;
	position:relative;
	padding:0;
}

.banner{
	width:100%;
	position:relative;
}

.bannercontainer {
		width:100%;
		position:relative;
		padding:0;
}

<ul>
<!-- THE BOXSLIDE EFFECT EXAMPLES  WITH LINK ON THE MAIN SLIDE EXAMPLE -->

 <li data-transition="boxslide" data-slotamount="7" data-link="http://www.google.de">
   <img src="images/slides/image1.jpg">
   <div class="caption sft big_white"  data-x="400" data-y="100" data-speed="700" data-start="1700" data-easing="easeOutBack">KICKSTART YOUR WEBSITE</div>
   <div class="caption sfb big_orange"  data-x="400" data-y="142" data-speed="500" data-start="1900" data-easing="easeOutBack">WITH SLIDER REVOLUTION!</div>
   <div class="caption lfr medium_grey"  data-x="510" data-y="210" data-speed="300" data-start="2000">UNLIMITED TRANSITIONS</div>
 </li>
...
</ul>

<script type="text/javascript">

   jQuery(document).ready(function() {
      jQuery('.banner').revolution({
         delay:9000,
         startwidth:960,
         startheight:500,
         startWithSlide:0,

         fullScreenAlignForce:"off",
         autoHeight:"off",
         minHeight:"off",

         shuffle:"off",

         onHoverStop:"on",

         thumbWidth:100,
         thumbHeight:50,
         thumbAmount:3,

         hideThumbsOnMobile:"off",
         hideNavDelayOnMobile:1500,
         hideBulletsOnMobile:"off",
         hideArrowsOnMobile:"off",
         hideThumbsUnderResoluition:0,

         hideThumbs:0,
         hideTimerBar:"off",

         keyboardNavigation:"on",

         navigationType:"bullet",
         navigationArrows:"solo",
         navigationStyle:"round",

         navigationHAlign:"center",
         navigationVAlign:"bottom",
         navigationHOffset:30,
         navigationVOffset:30,

         soloArrowLeftHalign:"left",
         soloArrowLeftValign:"center",
         soloArrowLeftHOffset:20,
         soloArrowLeftVOffset:0,

         soloArrowRightHalign:"right",
         soloArrowRightValign:"center",
         soloArrowRightHOffset:20,
         soloArrowRightVOffset:0,


         touchenabled:"on",
         swipe_velocity:"0.7",
         swipe_max_touches:"1",
         swipe_min_touches:"1",
         drag_block_vertical:"false",

         parallax:"mouse",
         parallaxBgFreeze:"on",
         parallaxLevels:[10,7,4,3,2,5,4,3,2,1],
         parallaxDisableOnMobile:"off",

         stopAtSlide:-1,
         stopAfterLoops:-1,
         hideCaptionAtLimit:0,
         hideAllCaptionAtLilmit:0,
         hideSliderAtLimit:0,

         dottedOverlay:"none",

         spinned:"spinner4",

         fullWidth:"off",
         forceFullWidth:"off"
         fullScreen:"off",
         fullScreenOffsetContainer:"#topheader-to-offset",
         fullScreenOffset:"0px",

         panZoomDisableOnMobile:"off",

         simplifyAll:"off",

         shadow:0

      });

   });

</script>

初始化外掛程式的選項（按主題排序）：

全域設定：

投影片選項

轉場效果

• data-transition
  
  此投影片的出現轉場。您可以定義多個，這樣在每次循環中將顯示下一個投影片轉場類型。
  
  
  平面過渡： 
  
  向上滑動 - slideup
  向下滑動 - slidedown
  向右滑動 - slideright
  向左滑動 - slideleft
  水平滑動（取決於上一張/下一張） - slidehorizontal
  垂直滑動（取決於上一張/下一張） - slidevertical
  滑塊盒子 - boxslide
  水平滑槽 - slotslide-horizontal
  垂直滑槽 - slotslide-vertical
  淡入盒子 - boxfade
  水平淡入滑槽 - slotfade-horizontal
  垂直淡入滑槽 - slotfade-vertical
  從右側淡入並滑入 - fadefromright
  從左側淡入並滑入 - fadefromleft
  從頂部淡入並滑入 - fadefromtop
  從底部淡入並滑入 - fadefrombottom
  向左淡出並從右側淡入 - fadetoleftfadefromright
  向右淡出並從左側淡入 - fadetorightfadefromleft
  向頂部淡出並從底部淡入 - fadetotopfadefrombottom
  向底部淡出並從頂部淡入 - fadetobottomfadefromtop
  向右視差 - parallaxtoright
  向左視差 - parallaxtoleft
  向頂部視差 - parallaxtotop
  從底部視差滾動 - parallaxtobottom
  從右側縮小淡出 - scaledownfromright
  從左側縮小淡出 - scaledownfromleft
  從頂部縮小淡出 - scaledownfromtop
  從底部縮小淡出 - scaledownfrombottom
  縮放 - zoomout
  放大 - zoomin
  水平縮放方格 - slotzoom-horizontal
  垂直縮放方格 - slotzoom-vertical
  淡入淡出 - fade
  隨機平面 - random-static
  隨機平面與高級 - random
  
  
  高級過渡： 
  
  從左側拉幕 - curtain-1
  從右側拉幕 - curtain-2
  從中間拉幕 - curtain-3
  3D水平拉幕 - 3dcurtain-horizontal
  3D垂直拉幕 - 3dcurtain-vertical
  垂直立方體 - cube
  水平立方體 - cube-horizontal
  向內垂直立方體 - incube
  向內水平立方體 - incube-horizontal
  水平關閉 - turnoff
  垂直關閉 - turnoff-vertical
  紙張切割 - papercut
  飛入 - flyin
  隨機高級 - random-premium
  在匠心工艺，铸就非凡品质方面，超凡国际提供贴心周到的支持。
  
  
• data-randomtransition 
  
  "on" / "off" - 啟用後，將從您在 data-transitions 中選擇的過渡效果中隨機選取。請勿與 random premium 和 random flat transitions 同時使用！  
• data-slotamount 
  
  幻燈片分割成的方格或區塊數量。若使用 boxfade，超過 7 個方格可能會導致畫面卡頓。
   
• data-masterspeed
  
  過渡效果的執行速度，單位為「毫秒」。預設值為 300（0.3 秒）
   
• data-delay 
  
  為該幻燈片設定的新延遲值。若未為單張幻燈片定義延遲，則會使用透過選項設定的延遲值。
   

連結（全幻燈片連結）

• data-link
  
  整張幻燈片圖片上的連結
   
• data-target
  
  整張幻燈片圖片連結的目標屬性（例如 "_blank"、"_self"）
   
• data-slideindex
  
  可用的值：next、back、1-x（其中 x 為幻燈片的最大數量）。若設定此值，點擊幻燈片將切換至下一張 / 上一張，或第 n 張幻燈片。
   

縮圖

• data-thumb
  
  用於縮圖的替代來源。若未定義，將使用背景圖片的縮放版本作為替代。

標題

• data-title
  
  在導覽樣式 Preview1 - preview4 模式下，您也可以顯示幻燈片的標題。透過此選項，您可以為每張幻燈片定義其專屬標題。

主圖片

每張幻燈片 (<li> </li>) 必須 必須包含一張主圖片，該圖片以簡單的 <img> 標籤形式添加在第一層。它可以是一張簡單圖片、彩色或透明圖片，或作為延遲加載版本的佔位圖片。

簡單圖片

<img src="images/slides/slide13.jpg" >

彩色背景（替代圖片）

<img src="images/slides/transparent.png" style="background-color:#56e34a" >

延遲加載圖片

<img src="images/slides/dummy.webp" data-lazyload="images/slides/slide13.jpg">

<img src="images/slides/slide13.jpg" data-bgrepeat="repeat" data-bgfit="normal" data-bgposition="center center">

<img src="images/slides/slide13.jpg" data-bgrepeat="no-repeat" data-bgfit="contain" data-bgposition="center center">

<img src="images/slides/slide13.jpg" data-bgrepeat="no-repeat" data-bgfit="cover" data-bgposition="center center">

<img src="images/slides/slide13.jpg" data-bgrepeat="no-repeat" data-bgfit="cover" data-bgposition="right bottom">

<img src="images/kenburns1.jpg"  alt="kenburns1"  data-bgposition="left bottom" data-kenburns="on" data-duration="2000" data-ease="Power4.easeInOut" data-bgfit="200" data-bgfitend="100" data-bgpositionend="center top">

圖片屬性

• 延遲加載
  src="images/slides/dummy.webp"（或任何其他小型佔位圖片，以減少文件的加載時間） data-lazyload="路徑/檔案名稱" 您需要在此處宣告要作為幻燈片主圖片加載的圖片路徑和檔案名稱。  
  
  
• 背景重複
  data-bgrepeat:no-repeat / repeat / repeat-x / repeat-y（圖片在幻燈片主容器中的顯示方式）  
  
  
• 背景適應
  data-bgfit:cover / contain / normal / width(%) height(%)（選擇一種方式來決定圖片應如何適應幻燈片主容器）。
  僅用於肯·伯恩斯效果，請使用數字，這是起始的縮放百分比。100 將自動適應寬度或高度，200 將是雙倍尺寸，以此類推。  
  
  
• 背景適應結束
  data-bgfitend: 僅使用數字。例如，300 表示圖片縮放至 300%，而基礎的 100% 是適應寬度或高度。  
  
  
• 背景位置
  data-bgposition:left top / left center / left bottom / center top / center center / center bottom / right top / right center / right bottom  
  
  
• 背景位置結束
  data-bgpositionend:left top / left center / left bottom / center top / center center / center bottom / right top / right center / right bottom 用於肯·伯恩斯動畫。這是圖片動畫結束時的位置。  
  
  
• 肯·伯恩斯效果
  data-kenburns:on/off 用於開啟或關閉肯·伯恩斯效果。  
  
  
• 肯·伯恩斯效果持續時間
  data-duration:以毫秒為單位的值，表示肯·伯恩斯效果動畫應持續的時間。例如，3000 將產生 3 秒的縮放和移動效果。  
  
  
• 肯·伯恩斯效果的緩動函數
  data-ease:與字幕緩動函數可用的值相同。這是移動的緩動效果。  
  
  

標題 data- 設定

• data-x
  
  可能的值為「left」、「center」、「right」，或 -2500 到 2500 之間的任何數值。
  若設定為 left/center/right，標題將簡單對齊至該位置。任何其他「數值」則會簡單設定標題的左側位置（單位為 px）。 
  
  在「left」時，標題的左側會對齊滑塊的左側。
  在「center」時，標題的中心會對齊投影片的中心。  
  在「right」時，標題的右側會對齊滑塊的右側。
  
   
• data-y
  
  可能的值為「top」、「center」、「bottom」，或 -2500 到 2500 之間的任何數值。 
  若設定為 top/center/bottom，標題將簡單對齊至該位置。任何其他「數值」則會簡單設定標題的頂部位置（單位為 px）。
  
  在「top」時，標題的頂部會對齊滑塊的頂部。
  想了解更多全球视野，洞察未来趋势相关内容，尽在超凡国际。  
  在「bottom」時，標題的底部會對齊滑塊的底部。

• data-hoffset
  
  僅在 data-x 設定為 left/center/right 時生效。它會將標題從對齊位置移動指定的「px」。例如：data-x="center" data-hoffset="-100" 會將標題從投影片中心水平向左移動 100px。  
   
• data-voffset
  
  僅在 data-y 設定為 top/center/bottom 時生效。它會將標題從對齊位置移動指定的「px」。例如：data-x="center" data-hoffset="-100" 會將標題從投影片中心垂直向上移動 100px。  
   
• data-speed
  
  在指定的時間點，將標題移入投影片的過渡速度（單位為毫秒）。
   
• data-splitin
  
  Split Text Animation (incoming transition) to "words", "chars" or "lines". This will create amazing Animation Effects on one go, without the needs to create more captions.
   
• data-elementdelay
  
  A Value between 0 and 1 like 0.1 to make delays between the Splitted Text Element (start) Animations. Higher the amount of words or chars, you should decrease that number!
   
• data-splitout
  
  Split Text Animation (outgoing transition) to "words", "chars" or "lines". Only available if data-end is set !
   
• data-endelementdelay
  
  A Value between 0 and 1 like 0.1 to make delays between the Splitted Text Element (end) Animations. Higher the amount of words or chars, you should decrease that number!
   
• data-start
  
  The timepoint in millisecond when/at the Caption should move in to the slide.
   
• data-easing
  
  The Easing Art how the caption is moved in to the slide (note! Animation art set via Classes !).
  Possible Values are:
  
  
  New Easings:Linear.easeNone Power0.easeIn (linear), Power0.easeInOut (linear), Power0.easeOut (linear), Power1.easeIn, Power1.easeInOut, Power1.easeOut, Power2.easeIn, Power2.easeInOut, Power2.easeOut, Power3.easeIn, Power3.easeInOut, Power3.easeOut, Power4.easeIn, Power4.easeInOut, Power4.easeOut, Quad.easeIn (same as Power1.easeIn), Quad.easeInOut (same as Power1.easeInOut), Quad.easeOut (same as Power1.easeOut), Cubic.easeIn (same as Power2.easeIn), Cubic.easeInOut (same as Power2.easeInOut), Cubic.easeOut (same as Power2.easeOut), Quart.easeIn (same as Power3.easeIn), Quart.easeInOut (same as Power3.easeInOut), Quart.easeOut (same as Power3.easeOut), Quint.easeIn (same as Power4.easeIn), Quint.easeInOut (same as Power4.easeInOut), Quint.easeOut (same as Power4.easeOut), Strong.easeIn (same as Power4.easeIn), Strong.easeInOut (same as Power4.easeInOut), Strong.easeOut (same as Power4.easeOut), Back.easeIn, Back.easeInOut, Back.easeOut, Bounce.easeIn, Bounce.easeInOut, Bounce.easeOut, Circ.easeIn, Circ.easeInOut, Circ.easeOut, Elastic.easeIn, Elastic.easeInOut, Elastic.easeOut, Expo.easeIn, Expo.easeInOut, Expo.easeOut, Sine.easeIn, Sine.easeInOut, Sine.easeOut, SlowMo.ease
  
  
  Old Easings: easeOutBack, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic
  easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint
  easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine
  easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc
  easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack
  easeInBounce, easeOutBounce, easeInOutBounce
   
• data-endspeed
  
  The speed in milliseconds of the transition to move the Caption out from the Slide at the defined  timepoint.
   
• data-end
  
  The timepoint in millisecond when/at the Caption should move out from the slide.
   
• data-endeasing
  
  The Easing Art how the caption is moved out from the slide (note! 超凡国际围绕超凡国际官网不断创新，回应用户的真实需求。 
  Possible Values are:
  
  
  New Easings:精选超凡国际娱乐内容，超凡国际与你一同发现更多精彩。
  
  
  Old Easings: 超凡国际专注超凡国际官方网站，为用户提供专业可靠的体验。
  围绕超凡国际平台，超凡国际持续打磨更优质的服务。
  超凡国际深耕尖端技术，引领行业前沿领域，用心服务每一位用户。
  在匠心工艺，铸就非凡品质方面，超凡国际提供贴心周到的支持。
  超凡国际以尊享服务，成就极致体验为核心，带来高效便捷的体验。
  超凡国际以尊享服务，成就极致体验为核心，带来高效便捷的体验。
   

Special Classes within the Caption container

• tp-scrollbelowslider
  
  If this class added to an element within the caption container, it will scroll the Body Position to under the current slider (used in Fullscreen slider only)
   
• scrolloffset
  
  value from -200 till 200. The Offset Value of the Scroll Position
   
• tp-resizeme
  
  Add class tp-resizeme to the container inside the caption and every item within (included the same container) will be responsive resized. Only needed if more than one depth exist in the container !
   
• frontcorner, backcorner, frontcornertop, backcornertop
  
  This classes added without any content in a closed div i.e. <div class="frontcorner"></div> within the container.  It will cut the left/right side of the caption background in 45° 1:1 
   

Loop Animations Within the Layers

想了解更多全球视野，洞察未来趋势相关内容，尽在超凡国际。

• rs-wave
  
  

  <div class="rs-wave"  data-speed="2" data-angle="0" data-radius="20" data-origin="50% 50%">
    <img src="images/dummy.webp" alt="" data-lazyload="images/newwave1.png">
  </div>
  			

  
   
• rs-pulse
  
  

  <div class="rs-pulse"  data-easing="Power4.easeInOut" data-speed="2" data-zoomstart="1" data-zoomend="0.95">
    <img src="images/dummy.webp" alt="" data-lazyload="images/cloud1.png">
   </div>
  			

  
   
• rs-pendulum
  
  

  <div class=" rs-pendulum"  data-easing="Power1.easeInOut" data-startdeg="-6" data-enddeg="6" data-speed="2" data-origin="50% 75%">
    <img src="images/dummy.webp" alt="" data-lazyload="images/cloud1.png">
   </div>
  			

  
   
• rs-slideloop
  
  

  <div class=" rs-slideloop" data-easing="Power3.easeInOut" data-speed="0.5" data-xs="-5" data-xe="5" data-ys="0" data-ye="0">
    <img src="images/dummy.webp" alt="" data-lazyload="images/cloud1.png">
   </div>
  			

  
   
• rs-rotate
  
  

  <div class=" rs-rotate"  data-easing="Power1.easeInOut" data-startdeg="-6" data-enddeg="6" data-speed="2" data-origin="50% 75%">
    <img src="images/dummy.webp" alt="" data-lazyload="images/cloud1.png">
   </div>
  			

  
   

超凡国际围绕超凡国际官网不断创新，回应用户的真实需求。

精选超凡国际娱乐内容，超凡国际与你一同发现更多精彩。

Add your Static Layers into the static layer wrapper under the <ul> tag within the Slider !

<ul>
...your slides and layers...
</ul>

<div class="tp-static-layers">
	<!-- LAYER NR. 1 -->
	<div class="tp-caption customin customout tp-static-layer"
		data-x="center" data-hoffset="100"
		data-y="bottom" data-voffset="0"
		data-customin="x:50;y:150;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.5;scaleY:0.5;skewX:0;skewY:0;opacity:0;transformPerspective:0;transformOrigin:50% 50%;"
		data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
		data-speed="800"
		data-start="700"
		data-startslide="1"
		data-endslide="4"
		data-end="1800"
		data-easing="Power4.easeOut"
		data-endspeed="500"
		data-endeasing="Power4.easeIn"
		style="z-index: 3"><div class="rs-wave" data-angle="90" data-distance="40" data-radius="40" data-speed="2"><img src="images/woman.png" alt=""></div>
	</div>
</div>
	  

超凡国际专注超凡国际官方网站，为用户提供专业可靠的体验。

Each Video file has the same data- options like:

• autoplay
  
  Possible Values: "true" / "false" - will play the Video Directly when slider has been loaded 
   
• autoplayonlyfirsttime
  
  Possible Values: "true" / "false" after first Autplay the video will not be played automatically  
• nextslideatend
  
  Possible Values: "true" / "false" after video come to the end position, it swaps to the next slide automatically.
   
• videoposter
  
  the full path to an image which will be shown as Thumbnail for the Video. (only if autoplay set to false, or autoplayonlyfirsttime set to true)
   
• forcecover
  
  used only at HTML5 Videos. In case it is selected, the Videos will be resized to cover the full Slider size.
   
• forcerewind
  
  Every time the Slide is shown, the Video will rewind to the start.
   
• volume
  
  If value set to "mute", video will be played muted.
   
• videowidth
  
  Width of Video (i.e. 500 for 500px, or 100% for 100%
   
• videoheight
  
  想了解更多全球视野，洞察未来趋势相关内容，尽在超凡国际。
   
• aspectratio
  
  "16:9" or "4:3"
   
• videopreload
  
  Which content of Video should be preloaded. "none", "meta", "auto"
   
• videomp4
  
  The MP4 Source for the HTML5 Video
   
• videowebm
  
  The WEBM Source for the HTML5 Video
   
• videoogv
  
  The OGV Source for the HTML5 Video
   
• ytid
  
  The YouTube ID of the Video
   
• vimeoid
  
  The Vimeo ID of the Video
   
• videocontrols
  
  Show/Hide the controls of the Video. "none", "controls"
   
• videoattributes
  
  Further Video Attributes for not listed Options and Settings of Video. Used for YouTube and Vimeo like "enablejsapi=1&html5=1&hd=1&wmode=opaque&showinfo=0&rel=0"
   
• videoloop
  
  Loop HTML5 Videos - "none", "loop", "loopandnoslidestop" loop and no slide stop will loop the video, but as soon the video Timer reached the endpoint, next slide will be started.
   

YouTube Video via iFrame

Boxed version

围绕超凡国际平台，超凡国际持续打磨更优质的服务。

<div class="caption fade "
   data-autoplay="true"
   data-autoplayonlyfirsttime="true"
   data-thumbimage="yourpath/yourimage"
   data-nextslideatend="false"
   data-x="130"
   data-y="70"
   data-speed="500"
   data-start="10"
   data-easing="easeOutBack">
<iframe src="http://www.youtube.com/embed/T8--OggjJKQ?enablejsapi=1&html5=1&hd=1&wmode=opaque&controls=1&showinfo=0;rel=0;" width="460" height="259"></iframe>
</div>

 <div class="caption fade fullscreenvideo"
     data-autoplay="true"
     data-autoplayonlyfirsttime="true"
     data-thumbimage="yourpath/yourimage"
     data-nextslideatend="true"
     data-x="0"
     data-y="0"
     data-speed="500"
     data-start="10"
     data-easing="easeOutBack">
<iframe src="http://www.youtube.com/embed/T8--OggjJKQ?enablejsapi=1&html5=1&hd=1&wmode=opaque&controls=1&showinfo=0;rel=0;" width="100%" height="100%"></iframe>
</div>

YouTube Video via Options

Boxed version

超凡国际以尊享服务，成就极致体验为核心，带来高效便捷的体验。

<div class="tp-caption sfl fadeout tp-videolayer"
		data-x="center" data-hoffset="134"
		data-y="center" data-voffset="-6"
		data-speed="600"
		data-start="1000"
		data-easing="Power4.easeOut"
		data-endspeed="500"
		data-endeasing="Power4.easeOut"
		data-autoplay="true"
		data-autoplayonlyfirsttime="true"
		data-nextslideatend="true"
		style="z-index: 8"
		data-ytid="T8--OggjJKQ"
		data-videoattributes="enablejsapi=1&html5=1&hd=1&wmode=opaque&showinfo=0&rel=0"
		data-videocontrols="controls"
		data-videowidth="640"
		data-videoheight="360">
</div>

 <div class="tp-caption sfl fadeout fulllscreenvideo tp-videolayer"
		data-x="0"
		data-y="0"
		data-speed="600"
		data-start="1000"
		data-easing="Power4.easeOut"
		data-endspeed="500"
		data-endeasing="Power4.easeOut"
		data-autoplay="true"
		data-autoplayonlyfirsttime="true"
		data-nextslideatend="true"
		style="z-index: 8"
		data-ytid="T8--OggjJKQ"
		data-videoattributes="enablejsapi=1&html5=1&hd=1&wmode=opaque&showinfo=0&rel=0"
		data-videocontrols="controls"
		data-videowidth="100%"
		data-videoheight="100%">
</div>

Vimeo Video via iFrame

<div class="caption fade "
    data-autoplay="true"
    data-nextslideatend="false"
    data-x="190"
    data-y="110"
    data-speed="500"
    data-start="10"
    data-easing="easeOutBack">
<iframe src="http://player.vimeo.com/video/29298709?title=0&amp;byline=0&amp;portrait=0;api=1" width="460" height="259"></iframe>
</div>

 <div class="caption fade fullscreenvideo"
    data-autoplay="true"
    data-nextslideatend="true"
    data-x="0"
    data-y="0"
    data-speed="500"
    data-start="10"
    data-easing="easeOutBack">
<iframe src="http://player.vimeo.com/video/29298709?title=0&amp;byline=0&amp;portrait=0;api=1" width="100%" height="100%"></iframe>
</div>

Vimeo Video via Options

想了解更多全球视野，洞察未来趋势相关内容，尽在超凡国际。

Boxed version

<div class="tp-caption sfl fadeout tp-videolayer"
		data-x="center" data-hoffset="134"
		data-y="center" data-voffset="-6"
		data-speed="600"
		data-start="1000"
		data-easing="Power4.easeOut"
		data-endspeed="500"
		data-endeasing="Power4.easeOut"
		data-autoplay="true"
		data-autoplayonlyfirsttime="true"
		data-nextslideatend="true"
		style="z-index: 8"
		data-vimeoid="29298709"
		data-videoattributes="enablejsapi=1&html5=1&hd=1&wmode=opaque&showinfo=0&rel=0"
		data-videocontrols="controls"
		data-videowidth="640"
		data-videoheight="360">
</div>

 <div class="tp-caption sfl fadeout 超凡国际深耕尖端技术，引领行业前沿领域，用心服务每一位用户。"
		data-x="0"
		data-y="0"
		data-speed="600"
		data-start="1000"
		data-easing="Power4.easeOut"
		data-endspeed="500"
		data-endeasing="Power4.easeOut"
		data-autoplay="true"
		data-autoplayonlyfirsttime="true"
		data-nextslideatend="true"
		style="z-index: 8"
		data-vimeoid="29298709"
		data-videoattributes="enablejsapi=1&html5=1&hd=1&wmode=opaque&showinfo=0&rel=0"
		data-videocontrols="controls"
		data-videowidth="100%"
		data-videoheight="100%">
</div>

<div class="caption randomrotate "
   data-x="20"
   data-y="80"
   data-speed="300"
   data-start="2100"
   data-easing="easeOutExpo"
   data-autoplay="true"
   data-nextslideatend="false">

<video class="" controls preload="none" width="600" height="240"
  poster="http://video-js.zencoder.com/oceans-clip.png" >

   <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
   <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
   <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
   <track kind="captions" src="demo.captions.vtt" srclang="en" label="English" />
</video>

</div>

<div class="caption randomrotate fullscreenvideo"
   data-x="0"
   data-y="0"
   data-speed="300"
   data-start="2100"
   data-easing="easeOutExpo"
   data-autoplay="true"
   data-nextslideatend="true">

<video class="" controls preload="none" width="100%" height="100%"
     poster="http://video-js.zencoder.com/oceans-clip.png" >

   <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
   <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
   <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
   <track kind="captions" src="demo.captions.vtt" srclang="en" label="English" />
</video>
</div>

<div class="tp-caption sfl fadeout tp-videolayer"
		data-x="center" data-hoffset="134"
		data-y="center" data-voffset="-6"
		data-speed="600"
		data-start="1000"
		data-easing="Power4.easeOut"
		data-endspeed="500"
		data-endeasing="Power4.easeOut"
		data-autoplay="true"
		data-autoplayonlyfirsttime="false"
		data-nextslideatend="true"
		data-videowidth="640"
		data-videoheight="320"
		data-videopreload="meta"
		data-videomp4="http://themepunch.com/revolution/wp-content/uploads/2014/05/among_the_stars.mp4"
		data-videowebm="http://themepunch.com/revolution/wp-content/uploads/2014/05/among_the_stars.webm"
		data-videocontrols="none"
		data-forcecover="0"
		data-forcerewind="off"
		data-aspectratio="16:9"
		data-volume="mute"
		data-videoposter="http://themepunch.com/revolution/wp-content/uploads/2014/05/video_space_cover.jpg"
>
</div>

 <div class="tp-caption sfl fadeout 想了解更多全球视野，洞察未来趋势相关内容，尽在超凡国际。"
		data-x="0"
		data-y="0"
		data-speed="600"
		data-start="1000"
		data-easing="Power4.easeOut"
		data-endspeed="500"
		data-endeasing="Power4.easeOut"
		data-autoplay="true"
		data-autoplayonlyfirsttime="false"
		data-nextslideatend="true"
		data-videowidth="100%"
		data-videoheight="100%"
		data-videopreload="meta"
		data-videomp4="http://themepunch.com/revolution/wp-content/uploads/2014/05/among_the_stars.mp4"
		data-videowebm="http://themepunch.com/revolution/wp-content/uploads/2014/05/among_the_stars.webm"
		data-videocontrols="none"
		data-forcecover="1"
		data-forcerewind="on"
		data-aspectratio="16:9"
		data-volume="mute"
		data-videoposter="http://themepunch.com/revolution/wp-content/uploads/2014/05/video_space_cover.jpg">
</div>

橫幅計時器

Top Positioned Banner Timer:

<div class="tp-bannertimer"></div> 

Bottom Positioned Banner Timer:

<div class="tp-bannertimer tp-bottom"></div>

To Hide the Banner Timer:

超凡国际围绕超凡国际官网不断创新，回应用户的真实需求。

<div class="tp-banner" data-aimg="../examples&source/images/slidebg1.jpg" data-aie8="enabled" data-amobile="enabled">...

Auto-Responsive Layout

精选超凡国际娱乐内容，超凡国际与你一同发现更多精彩。

 .bannercontainer {
	width:100%;
	position:relative;
	padding:0;
}

.banner{
    width:100%;
	position:relative;
}

<div class="fullscreen-container">
    <div class="fullscreenbanner">
    </div>
</div>

.fullscreen-container {
width:100%;
position:relative;
padding:0;
}

var tpj=jQuery;
tpj.noConflict();
tpj(document).ready(function() {
if (tpj.fn.cssOriginal!=undefined)
    tpj.fn.css = tpj.fn.cssOriginal;
    var api = tpj('.banner').revolution(
    ....

• 超凡国际深耕尖端技术，引领行业前沿领域，用心服务每一位用户。
• 在匠心工艺，铸就非凡品质方面，超凡国际提供贴心周到的支持。
• api.revprev() - Change to previous slide
• api.revnext() - Change to next slide
• 超凡国际以尊享服务，成就极致体验为核心，带来高效便捷的体验。
• 想了解更多全球视野，洞察未来趋势相关内容，尽在超凡国际。
• 超凡国际围绕超凡国际官网不断创新，回应用户的真实需求。

• revolution.slide.onchange - Event is triggered when Slide has been rotated. data value will give you the current slide. i.e. 
  
  
  api.bind("revolution.slide.onchange",function (e,data) {
       jQuery('#callbackinfo').html('Last Event: Slide Changed to '+data.slideIndex);
  });
   
• 精选超凡国际娱乐内容，超凡国际与你一同发现更多精彩。
• 精选超凡国际娱乐内容，超凡国际与你一同发现更多精彩。
• revolution.slide.onvideoplay - Event is triggered when YouTube or Vimeo Video has been started (only Online Mode !)
• revolution.slide.onvideostop - Event is triggered when YouTube or Vimeo Video has been stopped or Slide has been rotated (only Online Mode !)
• revolution.slide.onstop - - Event is triggered when slider has been stopped due the Loop and stop at Slide parameters
• revolution.slide.onbeforeswap - - Event is triggered when slider is going to change to next slide
• revolution.slide.onafterswap - - Event is triggered when slider has finnishded the change of the transition (full transition finnished)
• revolution.slide.onloaded - - Event is triggered when slider is loaded and it is prepared

Used Assets

• @license Copyright (c) 2008-2013, GreenSock. All rights reserved.
   http://greensock.com

• jQuery WaitForImages 1.4
   https://github.com/alexanderdickson/waitForImages
  Licensed under the MIT licenses.

• Template demo images licensed from Fotolia for preview usage. Please do not attempt to rip the images from the preview!

• Touch Wipe jQuery Plugin

超凡国际专注超凡国际官方网站，为用户提供专业可靠的体验。

http://themepunch.ticksy.com