无缝滚动图片

/*2013-4-10 尜尜制作 追求最简单的写法*/
$(function(){
	var time = 3000;      // 每隔多久播放一次动画  时间为毫秒
	var dhua_time = 500;  // 图片轮换的间隙时间   时间为毫秒
	var animate_pic;       // 定义动画函数
	var ul_li = ".gaga_pic ul li";      // 获取图片的父节点li
	var wid = $( ul_li ).width() + 10;     // 获取图片的宽度
	var li_len = $( ul_li ).length;         // 获取图片的数量
	var first_an = ".gaga_pic ul li:first";       // 获取第一个li
	var last_an = ".gaga_pic ul li:last";      // 获取到最后一个li
	var prev = "prev";           // 点击上一张的按钮
	var next = "next";            // 点击下一张的按钮
	var an_div_a = "#gaga a";            // 点击的元素
	var an_bof = "#gaga";              // 显示图片的框框
	var min = 4;             // 图片的数量必须大于框框所显示图片的数量才可以执行动画
	if( li_len > min ){       // 图片的数量必须大于框框所显示图片的数量才可以执行动画
		if( li_len == min+1 ){      // 防止空白 
			$( first_an ).css("margin-left",wid);               // 设置第一个图片li的margin-left
		}else{
			$( last_an ).insertBefore( first_an );      // 将最后一个li插入到第一个li的后面
		}
		function run(){              // 封装
			if ( !$( ul_li ).is(":animated") ){      // 判断是否在动画
				if( li_len == min+1 ){          // 防止空白
					$( first_an ).animate({"margin-left":0},dhua_time,function(){
						$( first_an ).insertAfter( last_an );     // 将第一个li插入到最后一个li的后面
						$( ul_li ).attr("style","");       // 把li的margin设置为0 
						$( first_an ).css("margin-left",wid);
					});
				}else{
					$( first_an ).animate({"margin-left":-wid},dhua_time,function(){
						$( first_an ).insertAfter( last_an );     // 将第一个li插入到最后一个li的后面
						$( ul_li ).attr("style","");       // 把li的margin设置为0 
					});
				};
			};
		};
		$( an_div_a ).live("click",function(){
			if( $(this).hasClass( next ) ){       // 判断是否是点击下一张 显示前面一张（前进）
				run();
				return false;            // 防止跳转
			}else if( $(this).hasClass( prev ) ){     // 显示后面一张（后退）
				if ( !$( ul_li ).is(":animated") ){          // 判断是否在动画
					function last_animte(){         // 封装
						$( last_an ).insertBefore( first_an );      // 将最后一个li插入到第一个li的后面
						$( ul_li ).attr("style","");
					};
					if( li_len == min+1 ){          // 防止空白
						last_animte();
						$( first_an ).animate({"margin-left":wid},dhua_time);
					}else{
						$( first_an ).animate({"margin-left":wid},dhua_time,function(){
							last_animte();
						});
					};
				};
				return false;            // 防止跳转
			};
		});
		// 自动播放
		$( an_bof ).hover(function(){
			clearInterval( animate_pic );             // 清除动画
		},function(){
			animate_pic = setInterval( run,time );         // 执行动画
		}).trigger("mouseleave");
	}else{
		$( first_an ).css("margin-left",wid);         // 如果当前所显示的图片少于显示框里面所需要显示的图片 不执行动画
	};
});