素材网 素材网

jQuery平滑抖动切换轮播图代码

下载资源()次

阅读次数()次

发布时间:2017-09-06

jQuery平滑抖动切换轮播图代码
分享到:

用法简介:

来源:xw素材网

jQuery平滑抖动切换轮播图代码。
文件引用:

<script>

$(function(){

//回调函数计数

var callbackIndex = 0;

$('.silder-box-1').mySilder({

width:400, //容器的宽度 必选参数!!!!!!

height:400, //容器的高度 必选参数!!!!!!

auto:true,//是否自动滚动

autoTime:5, //自动滚动时,时间间隙,即多长滚动一次,单位(秒)

direction:'x',//滚动方向,默认X方向

autoType:'left', //滚动方向,auto为true时生效

few:1,//一次滚动几个,默认滚动1张

showFew:2, //显示几个,就不用调css了,默认显示一个

clearance:50, //容器之间的间隙,默认为 0

silderMode:'linear' ,//滚动方式

timeGap:650,//动画间隙,完成一次动画需要多长时间,默认700ms

buttonPre:'.silder-button.btl',//上一个,按钮

buttonNext:'.silder-button.btr',//下一个,按钮

jz:true, //点击时,是否等待动画完成

runEnd:function(){//回调函数

callbackIndex ++ ;

$('.cj em').text(callbackIndex);

}

});

$('.silder-box-2').mySilder({

width:200, //容器的宽度 必选参数!!!!!!

height:200, //容器的高度 必选参数!!!!!!

direction:'y',//滚动方向,默认X方向

few:1,//一次滚动几个,默认滚动1张

showFew:2, //显示几个,就不用调css了,默认显示一个

clearance:10, //容器之间的间隙,默认为 0

silderMode:'linear' ,//滚动方式

timeGap:650,//动画间隙,完成一次动画需要多长时间,默认700ms

auto:true,//是否自动滚动 

autoTime:5, //自动滚动时,时间间隙,即多长滚动一次

buttonPre:'.silder-button.btl',//上一个,按钮

buttonNext:'.silder-button.btr',//下一个,按钮

jz:true //点击时,是否等待动画完成

});

$('.silder-box-3').mySilder({

width:400, //容器的宽度 必选参数!!!!!!

height:400, //容器的高度 必选参数!!!!!!

direction:'x',//滚动方向,默认X方向

few:1,//一次滚动几个,默认滚动1张

showFew:2, //显示几个,就不用调css了,默认显示一个

clearance:10, //容器之间的间隙,默认为 0

silderMode:'easeInBack' ,//滚动方式

timeGap:650,//动画间隙,完成一次动画需要多长时间,默认700ms

auto:true,//是否自动滚动 

autoTime:5, //自动滚动时,时间间隙,即多长滚动一次

buttonPre:'.silder-button.btl',//上一个,按钮

buttonNext:'.silder-button.btr',//下一个,按钮

jz:true //点击时,是否等待动画完成

});


/*------------------

------------------滚动方式

linear swing jswing 

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

------------------

-----------------*/


});

</script>



   
上一篇:jQuery响应式幻灯片插件 下一篇:已经是最后一篇数据

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。