幻灯片/轮播

简单翻页式jQuery幻灯片插件

创客主机


paper-slider.js是一款非常简单的翻页式jQuery幻灯片插件。该幻灯片在切换的时候就像一堆叠好的纸,从最上面抽出一张放到最下面的效果一样。它使用简单,但是功能非常的齐全。

使用方法:

使用该幻灯片需要引入jQuery1.7+和jquery.paper-slider.js文件。

  1. <script src="js/jquery-1.7.2.min.js"></script>  
  2. <script src="js/jquery.paper-slider.js"></script>

HTML结构:

该幻灯片的基本HTML结构如下:

  1. <!-- paper slider units wrapper-->
  2. <div id="papers">
  3.   <!-- one paper slider unit -->
  4.   <div>
  5.     <!-- put any html you want inside this div -->
  6.     <h1 class="aligncenter">Paper Slider Demo</h1>
  7.     <p class="aligncenter">a "paper effect" slider jQuery plugin .</p>
  8.   </div>
  9.   <!-- /one paper slider unit -->
  10.   ......
  11. </div>
  12. <!-- /paper slider units wrapper -->

CSS样式:

要确保幻灯片的包裹元素有一个宽度和高度。定位方式必须是:position:absolute,position:relative或position:fixed。

  1. #papers {
  2.   position:relative;
  3.   width:360px;
  4.   height:480px;
  5. }

基本的CSS样式如下:

  1. /* paper slider css*/
  2. .paper-slide {
  3.   background:#eee;
  4.   box-shadow:0 0 15px rgba(0,0,0,.3);
  5. }
  6. .ps-nav {
  7.   display:block;
  8.   width:2em;
  9.   height:2em;
  10.   border:1px solid #aaa;
  11.   background:#ddd;
  12.   line-height:2em;
  13.   text-align:center;
  14.   position:absolute;
  15.   top:50%;
  16.   margin-top:-1em;
  17.   border-radius:2em;
  18. }
  19. .ps-nav-prev {
  20.   left:-2.5em;
  21. }
  22. .ps-nav-next {
  23.   right:-2.5em;
  24. }
  25. .ps-nav:hover {
  26.   color:#eee;
  27.   background:#08c;
  28. }

初始化插件:

在页面DOM元素加载完毕时候,可以通过下面的方法来初始化该幻灯片插件。

  1. $(document).ready(function() {
  2.   //init slider 
  3.   var as = $('#papers').paperSlider()
  4. })

配置参数:

  1. {
  2. currentPage: 1          //当前显示的页
  3. ,defs: {
  4.   speed: 500            //幻灯片的速度
  5.   ,timer: 4000          //幻灯片切换的速度
  6.   ,autoSlider: true     //是否自动
  7.   ,hasNav: true         //是否显示prev/next按钮
  8.   ,pauseOnHover: true   //是否在鼠标滑过时暂停
  9.   ,navLeftTxt: '<'   //prev 按钮文字
  10.   ,navRightTxt: '>'  //next 按钮文字
  11.   ,zIndex:20            //z-index 设置
  12.   ,ease: 'linear'       //动画的easing效果
  13.   ,beforeAction: function() {/* 回调函数 */}
  14.   ,afterAction: function() {/* 回调函数 */}
  15. }
  16. ,flag: 18952              //loop handler, you can clearTimeout(sliderInstance.flag)
  17. ,len: 5                   //how many slider unit in the loop
  18. ,onAction: false          //the onAction flag, when the animation is on the go, onAction = true
  19. ,p: b.fn.b.init[1]        //the jQuery object  which contains all the slider unit jQuery objects
  20. ,pause: false             //pasue flag, when mouseover and pauseOnHover == true, pause will be set to be true
  21. ,ps: b.fn.b.init[5]       //all the slider unit jQuery objects
  22. ,t: b.fn.b.init[1]        //the slider wrapper jQuery objects
  23. ,action: function (index, isNext){...}        //core slider animation function, 
  24.                                               //index: the taget unit index, 
  25.                                               //inNext: the slider animation direction flag, true will go left
  26.  
  27. ,autoRoll: function (){...}                   //the auto roll function, you can call it by sliderInstance.autoRoll()
  28. ,destroy: function (){...}                    //destroy , you can call it by sliderInstance.destroy()
  29. }
(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!