jquery大图左右按钮点击切换特效代码

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

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

以下是 jquery大图左右按钮点击切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

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>
<link href="css/zzsc.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-1.4.1.min.js" type=text/javascript></script>
<script src="js/zzsc.js" type=text/javascript></script>
</head>
<body>
<div class="uldiv">
	<div class="btndiv">
		<strong>先给美女打个招呼吧~</strong>
		<a class="abtn aleft" href="#left">左移</a>
		<a class="abtn aright" href="#right">右移</a>
	</div>
	<div class="scrollcontainer">
		<ul>
			<li><img src="images/img01.jpg" /></li>
			<li><img src="images/img02.jpg" /></li>
			<li><img src="images/img03.jpg" /></li>
			<li><img src="images/img04.jpg" /></li>
		</ul>
	</div>
	 
</div>
<script type="text/javascript">
$(function(){
	$(".uldiv").Xslider({
		unitdisplayed:1,
		numtoMove:1,
		speed:300,
		scrollobjSize:Math.ceil($(".uldiv").find("li").length/1)*690
	})
})
</script>
</body>
</html>

JS代码(zzsc.js):

/*Demo:$(".productshow").Xslider({
	//.productshow是要移动对象的外框,页面上所有绑定了类.productshow的对象都会有切换效果;
	unitdisplayed:3,//可视的单位个数 必需项;
	numtoMove:1,//要移动的单位个数 必需项;
	viewedSize:120,//可视宽度或高度 不传入则查找要移动对象外层的宽或高度;
	scrollobj:".vscrollobj",//要移动的对象 不传入则查找productshow下的ul;
	unitlen:20,//移动的单位宽或高度 不传入则查找li的尺寸;
	scrollobjSize:$(".vscrollobj").height(),//移动最长宽或高（要移动对象的宽度或高度） 不传入则由li个数乘以unitlen计算;
	dir:"V",//水平移动还是垂直移动 默认H为水平移动，传入V则表示垂直移动（注意是大写字母）;
	loop:"cycle",//循环滚动 不传入则不循环滚动;
	speed:500,//滚动速度 默认为500;
	autoscroll:2000//自动移动间隔时间（毫秒） 不传入则不会自动移动;
}
);
	*/
(function($){
	$.extend($.easing,{
	easeInSine:function (x,t,b,c,d){
	return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
}
}
);
	$.fn.Xslider=function(settings){
	settings=$.extend({
}
,$.fn.Xslider.sn.defaults,settings);
	this.each(function(){
	var scrollobj=settings.scrollobj ? $(this).find(settings.scrollobj):$(this).find("ul"),viewedSize=settings.viewedSize || (settings.dir=="H" ? scrollobj.parent().width():scrollobj.parent().height()),//length of the wrapper visible;
	scrollunits=scrollobj.find("li"),//units to move;
	unitlen=settings.unitlen || (settings.dir=="H" ? scrollunits.eq(0).outerWidth():scrollunits.eq(0).outerHeight()),unitdisplayed=settings.unitdisplayed,//units num displayed;
	numtoMove=settings.numtoMove > unitdisplayed ? unitdisplayed:settings.numtoMove,scrollobjSize=settings.scrollobjSize || scrollunits.length*unitlen,//length of the scrollobj;
	offset=0,//max width to move;
	offsetnow=0,//scrollobj now offset;
	movelength=unitlen*numtoMove,pos=settings.dir=="H" ? "left":"top",moving=false,//moving now?;
	btnright=$(this).find("a.aright"),btnleft=$(this).find("a.aleft");
	btnright.unbind("click");
	btnleft.unbind("click");
	settings.dir=="H" ? scrollobj.css("left","0px"):scrollobj.css("top","0px");
	if(scrollobjSize>viewedSize){
	if(settings.loop=="cycle"){
	btnleft.removeClass("agrayleft");
	if(scrollunits.length<2*numtoMove+unitdisplayed-numtoMove){
	scrollobj.find("li").clone().appendTo(scrollobj);
}
}
else{
	btnleft.addClass("agrayleft");
	offset=scrollobjSize-viewedSize;
}
btnright.removeClass("agrayright");
}
else{
	btnleft.addClass("agrayleft");
	btnright.addClass("agrayright");
}
btnleft.click(function(){
	if($(this).is("[class*='agrayleft']")){
	return false;
}
if(!moving){
	moving=true;
	if(settings.loop=="cycle"){
	scrollobj.find("li:gt("+(scrollunits.length-numtoMove-1)+")").prependTo(scrollobj);
	scrollobj.css(pos,"-"+movelength+"px");
	$.fn.Xslider.sn.animate(scrollobj,0,settings.dir,settings.speed,function(){
	moving=false;
}
);
}
else{
	offsetnow-=movelength;
	if(offsetnow>unitlen*unitdisplayed-viewedSize){
	$.fn.Xslider.sn.animate(scrollobj,-offsetnow,settings.dir,settings.speed,function(){
	moving=false;
}
);
}
else{
	$.fn.Xslider.sn.animate(scrollobj,0,settings.dir,settings.speed,function(){
	moving=false;
}
);
	offsetnow=0;
	$(this).addClass("agrayleft");
}
btnright.removeClass("agrayright");
}
}
return false;
}
);
	btnright.click(function(){
	if($(this).is("[class*='agrayright']")){
	return false;
}
if(!moving){
	moving=true;
	if(settings.loop=="cycle"){
	var callback=function(){
	scrollobj.find("li:lt("+numtoMove+")").appendTo(scrollobj);
	scrollobj.css(pos,"0px");
	moving=false;
}
$.fn.Xslider.sn.animate(scrollobj,-movelength,settings.dir,settings.speed,callback);
}
else{
	offsetnow+=movelength;
	if(offsetnow<offset-(unitlen*unitdisplayed-viewedSize)){
	$.fn.Xslider.sn.animate(scrollobj,-offsetnow,settings.dir,settings.speed,function(){
	moving=false;
}
);
}
else{
	$.fn.Xslider.sn.animate(scrollobj,-offset,settings.dir,settings.speed,function(){
	moving=false;
}
);
	//滚动到最后一个位置;
	offsetnow=offset;
	$(this).addClass("agrayright");
}
btnleft.removeClass("agrayleft");
}
}
return false;
}
);
	if(settings.autoscroll){
	$.fn.Xslider.sn.autoscroll($(this),settings.autoscroll);
}
}
)}
$.fn.Xslider.sn={
	defaults:{
	dir:"H",speed:500}
,animate:function(obj,w,dir,speed,callback){
	if(dir=="H"){
	obj.animate({
	left:w}
,speed,"easeInSine",callback);
}
else if(dir=="V"){
	obj.animate({
	top:w}
,speed,"easeInSine",callback);
}
}
,autoscroll:function(obj,time){
	var vane="right";
	function autoscrolling(){
	if(vane=="right"){
	if(!obj.find("a.agrayright").length){
	obj.find("a.aright").trigger("click");
}
else{
	vane="left";
}
}
if(vane=="left"){
	if(!obj.find("a.agrayleft").length){
	obj.find("a.aleft").trigger("click");
}
else{
	vane="right";
}
}
}
var scrollTimmer=setInterval(autoscrolling,time);
	obj.hover(function(){
	clearInterval(scrollTimmer);
}
,function(){
	scrollTimmer=setInterval(autoscrolling,time);
}
);
}
}
}
)(jQuery);

CSS代码(zzsc.css):

body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial,Helvetica,sans-serif;color:#333;margin:0 auto;}
table{border-collapse:collapse;border-spacing:0;}
a{color:#333;text-decoration:none;}
a:hover{color:#c00;text-decoration:underline;}
.btndiv{width:100%;float:left;height:28px;position:relative;}
.btndiv strong{float:left;padding-left:10px;padding-top:4px;}
a.abtn{display:block;height:22px;width:24px;position:absolute;overflow:hidden;background:url(../images/btn.gif) no-repeat;text-indent:-999em;outline:none;}
a.aleft{right:40px;background-position:0 -32px;}
a.agrayleft{cursor:default;background-position:0 0;}
a.aright{right:10px;background-position:-34px 0;}
a.agrayright{cursor:default;background-position:-34px -32px;}
.uldiv{width:700px;padding:8px;margin:20px auto;position:relative;text-align:center;border:3px solid #f60;border-radius:5px;}
.scrollcontainer{width:690px;height:460px;overflow:hidden;position:relative;margin:0 auto;}
.scrollcontainer ul{width:20000px;position:absolute;left:0px;top:0px;}
.scrollcontainer li{width:690px;height:460px;float:left;}
.gzbtn{background:url(../images/btngz.gif) no-repeat;margin:0 auto;width:100px;height:30px;display:block;border:none;text-indent:-999em;}

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