首页>>Jquery图片>>mySystem.js插件 图片水平垂直滚动切换代码(2018-08-04)

mySystem.js插件 图片水平垂直滚动切换代码

jQuery图片水平垂直滑动插件mySystem.js，使用非常方便，通过简单的参数设置就可以改为你想要的结果。

mySystem.js插件 图片水平垂直滚动切换代码
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <script>  
  2. $(function(){  
  3.     //回调函数计数  
  4.     var callbackIndex = 0;  
  5.     $('.silder-box-1').mySilder({  
  6.         width:400, //容器的宽度 必选参数!!!!!!  
  7.         height:400, //容器的高度 必选参数!!!!!!  
  8.         auto:true,//是否自动滚动  
  9.         autoTime:5, //自动滚动时，时间间隙，即多长滚动一次,单位(秒)  
  10.         direction:'x',//滚动方向,默认X方向  
  11.         autoType:'left', //滚动方向，auto为true时生效  
  12.         few:1,//一次滚动几个，默认滚动1张  
  13.         showFew:2, //显示几个,就不用调css了,默认显示一个  
  14.         clearance:50, //容器之间的间隙，默认为 0  
  15.         silderMode:'linear' ,//滚动方式  
  16.         timeGap:350,//动画间隙，完成一次动画需要多长时间，默认700ms  
  17.         buttonPre:'.silder-button.btl',//上一个，按钮  
  18.         buttonNext:'.silder-button.btr',//下一个，按钮  
  19.         jz:true, //点击时，是否等待动画完成  
  20.         runEnd:function(){//回调函数  
  21.             callbackIndex ++ ;  
  22.             $('.cj em').text(callbackIndex);  
  23.         }  
  24.     });  
  25.       
  26.       
  27.     $('.silder-box-2').mySilder({  
  28.         width:200, //容器的宽度 必选参数!!!!!!  
  29.         height:200, //容器的高度 必选参数!!!!!!  
  30.         direction:'y',//滚动方向,默认X方向  
  31.         few:1,//一次滚动几个，默认滚动1张  
  32.         showFew:2, //显示几个,就不用调css了,默认显示一个  
  33.         clearance:10, //容器之间的间隙，默认为 0  
  34.         silderMode:'linear' ,//滚动方式  
  35.         timeGap:350,//动画间隙，完成一次动画需要多长时间，默认700ms  
  36.         auto:true,//是否自动滚动   
  37.         autoTime:5, //自动滚动时，时间间隙，即多长滚动一次  
  38.         buttonPre:'.silder-button.btl',//上一个，按钮  
  39.         buttonNext:'.silder-button.btr',//下一个，按钮  
  40.         jz:true //点击时，是否等待动画完成  
  41.     });  
  42.       
  43.     $('.silder-box-3').mySilder({  
  44.         width:400, //容器的宽度 必选参数!!!!!!  
  45.         height:400, //容器的高度 必选参数!!!!!!  
  46.         direction:'x',//滚动方向,默认X方向  
  47.         few:1,//一次滚动几个，默认滚动1张  
  48.         showFew:2, //显示几个,就不用调css了,默认显示一个  
  49.         clearance:10, //容器之间的间隙，默认为 0  
  50.         silderMode:'easeInBack' ,//滚动方式  
  51.         timeGap:350,//动画间隙，完成一次动画需要多长时间，默认700ms  
  52.         auto:true,//是否自动滚动   
  53.         autoTime:5, //自动滚动时，时间间隙，即多长滚动一次  
  54.         buttonPre:'.silder-button.btl',//上一个，按钮  
  55.         buttonNext:'.silder-button.btr',//下一个，按钮  
  56.         jz:true //点击时，是否等待动画完成  
  57.     });  
  58.   
  59.     /*------------------ 
  60.     ------------------滚动方式 
  61.     linear swing jswing  
  62.     easeInQuad  easeOutQuad  easeInOutQuad  
  63.     easeInCubic  easeOutCubic  easeInOutCubic  
  64.     easeInQuart  easeOutQuart  easeInOutQuart   
  65.     easeInQuint  easeOutQuint  easeInOutQuint  
  66.     easeInSine  easeOutSine   easeInOutSine  
  67.     easeInExpo  easeOutExpo  easeInOutExpo  
  68.     easeInCirc  easeOutCirc  easeInOutCirc  
  69.     easeInElastic  easeOutElastic  easeInOutElastic   
  70.     easeInBack  easeOutBack  easeInOutBack  
  71.     easeInBounce  easeOutBounce  easeInOutBounce 
  72.     ------------------ 
  73.     -----------------*/  
  74.   
  75. });  
  76. </script>  

 


原文地址:http://www.freejs.net/article_jquerytupiantexiao_661.html