经验分享程序开发文档资料数据资源其它资源

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

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 支持平滑抖动切换jQuery轮播图代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

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

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>支持平滑抖动切换jQuery轮播图代码</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 引用css -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- 引用js -->
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/mySystem.js"></script>

<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>
</head>
<body>
<p>默认1：<span>横向滚动，显示2张，滚动1张，间隙50,回调函数</span></p>
<!--默认1-->
<h1 class='cj'>回调函数使用例子（这里是计数）：已完成<em>0</em>次动画(针对默认1)</h1>
<div class='silder-box silder-box-1'>
	<div class='silder'>
		<ul>
			<li>
				<img src="img/01.jpg">
			</li>
			<li>
				<img src="img/02.jpg">
			</li>
			<li>
				<img src="img/03.jpg">
			</li>
			<li>
				<img src="img/04.jpg">
			</li>
			<li>
				<img src="img/05.jpg">
			</li>
			<li>
				<img src="img/06.jpg">
			</li>
			<li>
				<img src="img/07.jpg">
			</li>
		</ul>
	</div>
	<div class='silder-button btl'></div>
	<div class='silder-button btr'></div>
</div>

<p>默认2：<span>垂直滚动，显示2张，滚动1张，间隙10</span></p>
<!--默认1-->
<div class='silder-box silder-box-2'>
	<div class='silder'>
		<ul>
			<li>
				<img src="img/01.jpg">
			</li>
			<li>
				<img src="img/02.jpg">
			</li>
			<li>
				<img src="img/03.jpg">
			</li>
			<li>
				<img src="img/04.jpg">
			</li>
			<li>
				<img src="img/05.jpg">
			</li>
			<li>
				<img src="img/06.jpg">
			</li>
			<li>
				<img src="img/07.jpg">
			</li>
		</ul>
	</div>
	<div class='silder-button btl'></div>
	<div class='silder-button btr'></div>
</div>

<p>默认3：<span>滚动方式</span></p>

<!--默认1-->
<div class='silder-box silder-box-3'>
	<div class='silder'>
		<ul>
			<li>
				<img src="img/01.jpg">
			</li>
			<li>
				<img src="img/02.jpg">
			</li>
			<li>
				<img src="img/03.jpg">
			</li>
			<li>
				<img src="img/04.jpg">
			</li>
			<li>
				<img src="img/05.jpg">
			</li>
			<li>
				<img src="img/06.jpg">
			</li>
			<li>
				<img src="img/07.jpg">
			</li>
		</ul>
	</div>
	<div class='silder-button btl'></div>
	<div class='silder-button btr'></div>
</div>
</body>
</html>

JS代码(mySystem.js):

jQuery.easing['jswing'] = jQuery.easing['swing'];
	jQuery.extend(jQuery.easing,{
	def:'easeOutQuad',swing:function(x,t,b,c,d){
	return jQuery.easing[jQuery.easing.def](x,t,b,c,d)}
,easeInQuad:function(x,t,b,c,d){
	return c * (t /= d) * t + b}
,easeOutQuad:function(x,t,b,c,d){
	return -c * (t /= d) * (t - 2) + b}
,easeInOutQuad:function(x,t,b,c,d){
	if ((t /= d / 2) < 1) return c / 2 * t * t + b;
	return -c / 2 * ((--t) * (t - 2) - 1) + b}
,easeInCubic:function(x,t,b,c,d){
	return c * (t /= d) * t * t + b}
,easeOutCubic:function(x,t,b,c,d){
	return c * ((t = t / d - 1) * t * t + 1) + b}
,easeInOutCubic:function(x,t,b,c,d){
	if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
	return c / 2 * ((t -= 2) * t * t + 2) + b}
,easeInQuart:function(x,t,b,c,d){
	return c * (t /= d) * t * t * t + b}
,easeOutQuart:function(x,t,b,c,d){
	return -c * ((t = t / d - 1) * t * t * t - 1) + b}
,easeInOutQuart:function(x,t,b,c,d){
	if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
	return -c / 2 * ((t -= 2) * t * t * t - 2) + b}
,easeInQuint:function(x,t,b,c,d){
	return c * (t /= d) * t * t * t * t + b}
,easeOutQuint:function(x,t,b,c,d){
	return c * ((t = t / d - 1) * t * t * t * t + 1) + b}
,easeInOutQuint:function(x,t,b,c,d){
	if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
	return c / 2 * ((t -= 2) * t * t * t * t + 2) + b}
,easeInSine:function(x,t,b,c,d){
	return -c * Math.cos(t / d * (Math.PI / 2)) + c + b}
,easeOutSine:function(x,t,b,c,d){
	return c * Math.sin(t / d * (Math.PI / 2)) + b}
,easeInOutSine:function(x,t,b,c,d){
	return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b}
,easeInExpo:function(x,t,b,c,d){
	return (t == 0) ? b:c * Math.pow(2,10 * (t / d - 1)) + b}
,easeOutExpo:function(x,t,b,c,d){
	return (t == d) ? b + c:c * (-Math.pow(2,-10 * t / d) + 1) + b}
,easeInOutExpo:function(x,t,b,c,d){
	if (t == 0) return b;
	if (t == d) return b + c;
	if ((t /= d / 2) < 1) return c / 2 * Math.pow(2,10 * (t - 1)) + b;
	return c / 2 * (-Math.pow(2,-10 * --t) + 2) + b}
,easeInCirc:function(x,t,b,c,d){
	return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b}
,easeOutCirc:function(x,t,b,c,d){
	return c * Math.sqrt(1 - (t = t / d - 1) * t) + b}
,easeInOutCirc:function(x,t,b,c,d){
	if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
	return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b}
,easeInElastic:function(x,t,b,c,d){
	var s = 1.70158;
	var p = 0;
	var a = c;
	if (t == 0) return b;
	if ((t /= d) == 1) return b + c;
	if (!p) p = d * .3;
	if (a < Math.abs(c)){
	a = c;
	var s = p / 4}
else var s = p / (2 * Math.PI) * Math.asin(c / a);
	return -(a * Math.pow(2,10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b}
,easeOutElastic:function(x,t,b,c,d){
	var s = 1.70158;
	var p = 0;
	var a = c;
	if (t == 0) return b;
	if ((t /= d) == 1) return b + c;
	if (!p) p = d * .3;
	if (a < Math.abs(c)){
	a = c;
	var s = p / 4}
else var s = p / (2 * Math.PI) * Math.asin(c / a);
	return a * Math.pow(2,-10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b}
,easeInOutElastic:function(x,t,b,c,d){
	var s = 1.70158;
	var p = 0;
	var a = c;
	if (t == 0) return b;
	if ((t /= d / 2) == 2) return b + c;
	if (!p) p = d * (.3 * 1.5);
	if (a < Math.abs(c)){
	a = c;
	var s = p / 4}
else var s = p / (2 * Math.PI) * Math.asin(c / a);
	if (t < 1) return -.5 * (a * Math.pow(2,10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
	return a * Math.pow(2,-10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b}
,easeInBack:function(x,t,b,c,d,s){
	if (s == undefined) s = 1.70158;
	return c * (t /= d) * t * ((s + 1) * t - s) + b}
,easeOutBack:function(x,t,b,c,d,s){
	if (s == undefined) s = 1.70158;
	return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b}
,easeInOutBack:function(x,t,b,c,d,s){
	if (s == undefined) s = 1.70158;
	if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
	return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b}
,easeInBounce:function(x,t,b,c,d){
	return c - jQuery.easing.easeOutBounce(x,d - t,0,c,d) + b}
,easeOutBounce:function(x,t,b,c,d){
	if ((t /= d) < (1 / 2.75)){
	return c * (7.5625 * t * t) + b}
else if (t < (2 / 2.75)){
	return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b}
else if (t < (2.5 / 2.75)){
	return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b}
else{
	return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b}
}
,easeInOutBounce:function(x,t,b,c,d){
	if (t < d / 2) return jQuery.easing.easeInBounce(x,t * 2,0,c,d) * .5 + b;
	return jQuery.easing.easeOutBounce(x,t * 2 - d,0,c,d) * .5 + c * .5 + b}
}
);
	//by zyp;
	(function($,window,document,undefined){
	var Silder=function(ele,opt){
	this.$element=ele,this.defaults={
	width:0,height:0,direction:'x',few:1,showFew:1,clearance:0,silderMode:'linear',timeGap:600,auto:true,autoType:'left',autoTime:5,buttonPre:'.silder-button.btl',buttonNext:'.silder-button.btr',jz:true,runEnd:function(){
}
}
,this.options=$.extend({
}
,this.defaults,opt);
}
Silder.prototype={
	runTypeOne:function(){
	var $this=this.$element;
	var btl=$this.find(this.options.buttonPre);
	var btr=$this.find(this.options.buttonNext);
	var direction=this.options.direction.toLowerCase();
	var showFew=this.options.showFew;
	var width=this.options.width;
	var height=this.options.height;
	var clearance=this.options.clearance;
	var silderMode=this.options.silderMode;
	var few=this.options.few;
	if(few>showFew){
	few=showFew;
}
var moveLength=few*width+(few)*clearance;
	var timeGap=this.options.timeGap;
	var jz=this.options.jz;
	var auto=this.options.auto;
	var autoType=this.options.autoType.toLowerCase();
	var autoTime=this.options.autoTime*1000;
	var ul=$this.find('ul').eq(0);
	var box=ul.parent();
	var runEnd=this.options;
	init();
	btr.click(function(){
	if(jz==true){
	if(ul.is(":animated")){
	return;
}
}
if(direction=='x'){
	ul.stop().animate({
	left:-moveLength}
,{
	easing:silderMode,duration:timeGap,complete:function(){
	for(var i=0;
	i<few;
	i++){
	var f=ul.find('li').eq(0);
	var l=ul.find('li').last();
	$(l).after(f);
}
ul.css({
	left:0}
);
	runEnd.runEnd();
}
}
);
}
else if(direction=='y'){
	ul.stop().animate({
	top:-moveLength}
,{
	easing:silderMode,duration:timeGap,complete:function(){
	for(var i=0;
	i<few;
	i++){
	var f=ul.find('li').eq(0);
	var l=ul.find('li').last();
	$(l).after(f);
}
ul.css({
	top:0}
);
	runEnd.runEnd();
}
}
);
}
}
);
	btl.click(function(){
	if(jz==true){
	if(ul.is(":animated")){
	return;
}
}
if(direction=='x'){
	for(var i=0;
	i<few;
	i++){
	var f=ul.find('li').eq(0);
	var l=ul.find('li').last();
	$(f).before(l);
}
ul.css({
	left:-moveLength}
);
	ul.stop().animate({
	left:0}
,{
	easing:silderMode,duration:timeGap,complete:function(){
	runEnd.runEnd();
}
}
);
}
else if(direction=='y'){
	for(var i=0;
	i<few;
	i++){
	var f=ul.find('li').eq(0);
	var l=ul.find('li').last();
	$(f).before(l);
}
ul.css({
	top:-moveLength}
);
	ul.stop().animate({
	top:0}
,{
	easing:silderMode,duration:timeGap,complete:function(){
	runEnd.runEnd();
}
}
);
}
}
);
	function init(){
	$this.css({
	position:'relative'}
);
	box.css({
	position:'relative',overflow:'hidden'}
);
	ul.css({
	position:'absolute',top:0,left:0}
);
	if(direction=='x'){
	box.css({
	width:width*showFew+(showFew-1)*clearance,height:height}
);
	ul.css({
	width:999999}
);
	ul.children().css({
	float:'left'}
);
	if(clearance!=0){
	ul.children().css({
	marginRight:clearance}
);
}
}
else if(direction=='y'){
	box.css({
	width:width,height:height*showFew+(showFew-1)*clearance}
);
	ul.css({
	width:width}
);
	ul.children().css({
	float:'none'}
);
	if(clearance!=0){
	ul.children().css({
	marginBottom:clearance}
);
}
}
}
var stop;
	if(auto){
	if(autoType=='left'&&direction=='x'){
	stop=setInterval(autoRunningTypeOne,autoTime);
}
if(autoType=='right'&&direction=='x'){
	stop=setInterval(autoRunningTypeTwo,autoTime);
}
if(autoType=='up'&&direction=='y'){
	stop=setInterval(autoRunningTypeOne,autoTime);
}
if(autoType=='down'&&direction=='y'){
	stop=setInterval(autoRunningTypeTwo,autoTime);
}
}
function autoRunningTypeOne(){
	if(ul.is(":animated")){
	return;
}
if(direction=='x'){
	ul.stop().animate({
	left:-moveLength}
,{
	easing:silderMode,duration:timeGap,complete:function(){
	for(var i=0;
	i<few;
	i++){
	var f=ul.find('li').eq(0);
	var l=ul.find('li').last();
	$(l).after(f);
}
ul.css({
	left:0}
);
	runEnd.runEnd();
}
}
);
}
else if(direction=='y'){
	ul.stop().animate({
	top:-moveLength}
,{
	easing:silderMode,duration:timeGap,complete:function(){
	for(var i=0;
	i<few;
	i++){
	var f=ul.find('li').eq(0);
	var l=ul.find('li').last();
	$(l).after(f);
}
ul.css({
	top:0}
);
	runEnd.runEnd();
}
}
);
}
}
function autoRunningTypeTwo(){
	if(ul.is(":animated")){
	return;
}
if(direction=='x'){
	for(var i=0;
	i<few;
	i++){
	var f=ul.find('li').eq(0);
	var l=ul.find('li').last();
	$(f).before(l);
}
ul.css({
	left:-moveLength}
);
	ul.stop().animate({
	left:0}
,{
	easing:silderMode,duration:timeGap,complete:function(){
	runEnd.runEnd();
}
}
);
}
else if(direction=='y'){
	for(var i=0;
	i<few;
	i++){
	var f=ul.find('li').eq(0);
	var l=ul.find('li').last();
	$(f).before(l);
}
ul.css({
	top:-moveLength}
);
	ul.stop().animate({
	top:0}
,{
	easing:silderMode,duration:timeGap,complete:function(){
	runEnd.runEnd();
}
}
);
}
}
}
}
$.fn.mySilder=function(options){
	var nSilder=new Silder(this,options);
	nSilder.runTypeOne();
	return this;
}
}
)(jQuery,window,document);

CSS代码(style.css):

*{margin:0;padding:0;}
li{list-style:none outside none;}
body{background:url(../images/rbg.jpg) repeat scroll 0 0 #aaa;font-family:"宋体";padding:50px 0 0;}
/* .silder-box{width:600px;height:400px;margin:0 auto 0;position:relative;}
.silder{position:relative;overflow:hidden;width:400px;height:400px;margin:0 auto 0;}
.silder li{width:400px;height:400px;}
*/
.silder-box{position:relative;margin:50px auto;}
.silder{margin:0 auto 0;}
.silder li{width:400px;height:400px;}
.silder li img{width:100%;height:100%;}
.silder-button{top:173px;width:25px;height:54px;position:absolute;cursor:pointer;}
.silder-button.btl{left:10px;background:url(../images/bl.png);}
.silder-button.btr{right:10px;background:url(../images/br.png);}
.silder-box-1{width:1000px;}
.silder-box-2{width:500px;}
.silder-box-2 .silder li{width:200px;height:200px;}
.silder-box-3{width:1000px;}
p{font-size:20px;line-height:20px;text-align:center;color:#333;}
p span{color:#CB0000;}
h1{font-size:20px;line-height:50px;text-align:center;color:#333;}
h1 em{font-size:30px;color:#CB0000;padding:0 10px;}
textarea{display:block;text-indent:0;width:500px;margin:0 auto 20px;background:#ccc;border:0 none;resize:;font-size:12px;min-height:120px;}
textarea.t1{height:340px;margin:20px auto;}
.small-navs{position:absolute;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
330.82 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
330.82 KB
立即下载
翁芝梦
了解
打赏作者 鼓励作者
Html Js 图片切换触摸3
最新结算
股权转让协议意向书模板
类型: .docx 金额: CNY 2.23￥ 状态: 待结算 详细>
股权转让协议意向书模板
类型: .docx 金额: CNY 0.28￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 2.39￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 0.3￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章