笔记本样式jQuery滑块特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是笔记本样式jQuery滑块特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="gb2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    
<title>笔记本样式jQuery视频滑块</title>
<meta name="viewport" content="width = device-width, initial-scale = 1.0" />
<link href="royalslider/royalslider.css" rel="stylesheet">
<script src="royalslider/jquery-1.8.3.min.js"></script>
<script src="royalslider/jquery.royalslider.min.js?v=9.3.6"></script>
<link href="preview-assets/css/reset.css?v=1.0.4" rel="stylesheet">
<link href="royalslider/skins/default-inverted/rs-default-inverted.css?v=1.0.4" rel="stylesheet">
<style>
      #slider-in-laptop {
  width: 70%;
  height: 200px;
  padding: 2% 15% 7%;
  background: none;
}
#slider-in-laptop .rsOverflow,
#slider-in-laptop .rsSlide,
#slider-in-laptop .rsVideoFrameHolder,
#slider-in-laptop .rsThumbs {
  background: #151515;
}
.imgBg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}
#slider-in-laptop .rsBullets {
  bottom: -25px;
}
.laptopBg {
  position: relative;
  width: 100%;
  height: auto;
}
#slider-in-laptop .rsBullets {
    bottom: -30px;
}

    </style>
    
  </head>
  <body >

  <div  class="page wrapper main-wrapper">  
      <div class="row clearfix">
    <div id="page-navigation" class="col span_6"> 
         
        <div class="left page-nav-item"> </div> 
         
          
        <div class="right page-nav-item"></div> 
         
        
	</div> 
</div>
<div class="row clearfix">
  <div class="col span_4 fwImage">
    <div class="royalSlider-preview laptopBg">
      <img src="img/laptop.png" class="imgBg" width="707" height="400" />
      <div id="slider-in-laptop" class="royalSlider rsDefaultInv">
        <img src="img/full-width/medium/1.jpg" />
        <img src="img/full-width/medium/2.jpg" data-rsVideo="https://vimeo.com/45778774" />
        <img src="img/full-width/medium/3.jpg" />
        <img src="img/full-width/medium/4.jpg" />
      </div>
    </div>
  </div>

  <div class="col span_2">
      <h1>Slider in laptop</h1>
      <p>Simple variation of image slider with bullets is used, image behind scales with slider automatically.</p>
      <p>Laptop mockup by Maxwell Barvian, photography by Gilderic.</p>
      <p>Buttons controlled by API:</p>
      <button id="slider-prev">上一张</button><button id="slider-next">下一张</button>
    </div>
</div>

  </div>
  
    <script>
      jQuery(document).ready(function($) {
  var rsi = $('#slider-in-laptop').royalSlider({
    autoHeight: false,
    arrowsNav: false,
    fadeinLoadedSlide: false,
    controlNavigationSpacing: 0,
    controlNavigation: 'bullets',
    imageScaleMode: 'fill',
    imageAlignCenter: true,
    loop: false,
    loopRewind: false,
    numImagesToPreload: 6,
    keyboardNavEnabled: true,
    autoScaleSlider: true,  
    autoScaleSliderWidth: 486,     
    autoScaleSliderHeight: 315,

    imgWidth: 792,
    imgHeight: 479



  }).data('royalSlider');
  $('#slider-next').click(function() {
    rsi.next();
  });
  $('#slider-prev').click(function() {
    rsi.prev();
  });
});
    </script>
  </body>
</html>

CSS代码(royalslider.css):

/* v1.0.5 */
/* Core RS CSS file. 95% of time you shouldn't change anything here. */
.royalSlider{width:600px;height:400px;position:relative;direction:ltr;}
.royalSlider > *{float:left;}
.rsWebkit3d .rsSlide{-webkit-transform:translateZ(0);}
.rsWebkit3d .rsSlide,.rsWebkit3d .rsContainer,.rsWebkit3d .rsThumbs,.rsWebkit3d .rsPreloader,.rsWebkit3d img,.rsWebkit3d .rsOverflow,.rsWebkit3d .rsBtnCenterer,.rsWebkit3d .rsAbsoluteEl,.rsWebkit3d .rsABlock,.rsWebkit3d .rsLink{-webkit-backface-visibility:hidden;}
.rsFade.rsWebkit3d .rsSlide,.rsFade.rsWebkit3d img,.rsFade.rsWebkit3d .rsContainer{-webkit-transform:none;}
.rsOverflow{width:100%;height:100%;position:relative;overflow:hidden;float:left;-webkit-tap-highlight-color:rgba(0,0,0,0);}
.rsVisibleNearbyWrap{width:100%;height:100%;position:relative;overflow:hidden;left:0;top:0;-webkit-tap-highlight-color:rgba(0,0,0,0);}
.rsVisibleNearbyWrap .rsOverflow{position:absolute;left:0;top:0;}
.rsContainer{position:relative;width:100%;height:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
.rsArrow,.rsThumbsArrow{cursor:pointer;}
.rsThumb{float:left;position:relative;}
.rsArrow,.rsNav,.rsThumbsArrow{opacity:1;-webkit-transition:opacity 0.3s linear;-moz-transition:opacity 0.3s linear;-o-transition:opacity 0.3s linear;transition:opacity 0.3s linear;}
.rsHidden{opacity:0;visibility:hidden;-webkit-transition:visibility 0s linear 0.3s,opacity 0.3s linear;-moz-transition:visibility 0s linear 0.3s,opacity 0.3s linear;-o-transition:visibility 0s linear 0.3s,opacity 0.3s linear;transition:visibility 0s linear 0.3s,opacity 0.3s linear;}
.rsGCaption{width:100%;float:left;text-align:center;}
/* Fullscreen options,very important ^^ */
.royalSlider.rsFullscreen{position:fixed !important;height:auto !important;width:auto !important;margin:0 !important;padding:0 !important;z-index:2147483647 !important;top:0 !important;left:0 !important;bottom:0 !important;right:0 !important;}
.royalSlider .rsSlide.rsFakePreloader{opacity:1 !important;-webkit-transition:0s;-moz-transition:0s;-o-transition:0s;transition:0s;display:none;}
.rsSlide{position:absolute;left:0;top:0;display:block;overflow:hidden;height:100%;width:100%;}
.royalSlider.rsAutoHeight,.rsAutoHeight .rsSlide{height:auto;}
.rsContent{width:100%;height:100%;position:relative;}
.rsPreloader{position:absolute;z-index:0;}
.rsNav{-moz-user-select:-moz-none;-webkit-user-select:none;user-select:none;}
.rsNavItem{-webkit-tap-highlight-color:rgba(0,0,0,0.25);}
.rsThumbs{cursor:pointer;position:relative;overflow:hidden;float:left;z-index:22;}
.rsTabs{float:left;background:none !important;}
.rsTabs,.rsThumbs{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);}
.rsVideoContainer{/*left:0;top:0;position:absolute;*/
/*width:100%;height:100%;position:absolute;left:0;top:0;float:left;*/
width:auto;height:auto;line-height:0;position:relative;}
.rsVideoFrameHolder{position:absolute;left:0;top:0;background:#141414;opacity:0;-webkit-transition:.3s;}
.rsVideoFrameHolder.rsVideoActive{opacity:1;}
.rsVideoContainer iframe,.rsVideoContainer video,.rsVideoContainer embed,.rsVideoContainer .rsVideoObj{position:absolute;z-index:50;left:0;top:0;width:100%;height:100%;}
/* ios controls over video bug,shifting video */
.rsVideoContainer.rsIOSVideo iframe,.rsVideoContainer.rsIOSVideo video,.rsVideoContainer.rsIOSVideo embed{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding-right:44px;}
.rsABlock{left:0;top:0;position:absolute;z-index:15;}
img.rsImg{max-width:none;}
.grab-cursor{cursor:url(grab.png) 8 8,move;}
.grabbing-cursor{cursor:url(grabbing.png) 8 8,move;}
.rsNoDrag{cursor:auto;}
.rsLink{left:0;top:0;position:absolute;width:100%;height:100%;display:block;z-index:20;background:url(blank.gif);}

附件:下载该文件资源,减少时间成本(增值服务)