Jquery鼠标控制图片轮播，animate（）动画队列，stop（）清除队列

Jquery实现图片轮播，轮播思路如下

.box {
	width: 200px;
	height: 200px;
	overflow: hidden;
	position: relative;
	border: 1px solid blue;
}
.imgList {
	display: block;
	width:1400px;
	position: relative;
	left: -200px;//默认图片列表的left:-200px
}
.imgList li {
	display: block;
	float: left;
	width: 198px;
	height: 198px;
	border: 1px solid red;
}
.imgList li img{
	width: 198px;
	height: 198px;
}

(function TurnImage(boxId, imgListId, picBtnListId, btnPId, btnNId, isPlay, direction) {
		var box = $("#" + boxId);
		var imgList = $("#" + imgListId);
		var picBtnList = $("#" + picBtnListId);
		var btnP = $("#" + btnPId);
		var btnN = $("#" + btnNId);
		var w = $(imgList).css("left");
		var num = ["1","2","3","4","5","6","7","8"];
		var i = j = 0;

		$(imgList).children().each(function(){
			$(this).attr({name:num[i]});
			i++;
		});
		$(picBtnList).children().each(function(){
			$(this).attr({name:num[j]});
			j++;
		});

		function changeState(){			
		  $(imgList).children().removeClass();
		  $(picBtnList).children().removeClass();
		  $(imgList).children(":eq(1)").addClass("active");
		  $(picBtnList).children().each(function(){
		  	var picBtnListLiName = $(this).attr("name");
		  	var imgListLiName = $(imgList).children(":eq(1)").attr("name");
		  	if(picBtnListLiName==imgListLiName){
		  		$(this).addClass("now");
		  	}
		  });
		}
		function nextImg(step) {
		  step = arguments[0] ? arguments[0] : 1;
		  var f = $(imgList).children(":lt("+step+")").detach();
		  $(imgList).append(f);
		  $(imgList).css("left", "0");
		  $(imgList).stop(true, false).animate({left: w}, "slow");
		  changeState();		  
		}
		function preImg(step){
		  step = arguments[0] ? arguments[0] : 1;
		  step = $(imgList).children().length-step-1;			
		  var l = $(imgList).children(":gt("+step+")").detach();
		  $(imgList).prepend(l);
		  $(imgList).css("left", parseInt(w)*2+"px");
		  $(imgList).stop(true, false).animate({left: w}, "slow");
		  changeState();
		}
		$(btnN).click(function(){
			nextImg(1);
		});
		$(btnP).click(function(){
			preImg(1);
		});
		if (isPlay) {
			if(direction=="left"){
				funDe=nextImg;
			}
			else{
				funDe=preImg;
			}
			autoPlay = setInterval(funDe, 2000);
			$(box).hover(
				function () {
					clearInterval(autoPlay);
				},
				function () {
					autoPlay = setInterval(funDe, 2000);
				}
			);
			$(btnN).hover(
				function () {
					clearInterval(autoPlay);
				},
				function () {
					autoPlay = setInterval(funDe, 2000);
				}
			);
			$(btnP).hover(
				function () {
					clearInterval(autoPlay);
				},
				function () {
					autoPlay = setInterval(funDe, 2000);
				}
			);
		}
		// 鼠标焦点

		$("#picBtn ul li").hover(
			function () {
				clearInterval(autoPlay);
				var btnNum = $(this).attr("name");//鼠标选择的数字2
				var actNum = $(".active").attr("name");
				if(btnNum!=actNum){
					var d_value = btnNum>actNum ? btnNum-actNum : actNum-btnNum;

					if(btnNum>actNum){						
						var d_value = btnNum-actNum;
						nextImg(d_value); 
					}
					else{
						var d_value = actNum-btnNum;//获取鼠标与当前图片的差值,差几就上一张几次
						preImg(d_value);
					}
				}
			},
			function () {
				autoPlay = setInterval(funDe, 2000);
			}
		);
	})("box", "imgList", "picBtnList", "btnP", "btnN", true, "left");
	$(document).ready(function(){
		
	});

说明：开始没有考略到用stop()清除animate的动画队列，所以在写代码的时候一直很纠结那个让人看起来很别扭的动画效果，

之后查找资料，颇有收获：

Jquery定义了一些动画和队列相关的方法，stop()方法：它是用来停止选中元素上的当前正在执行的任何动画。stop()方法接受两个布尔参数。如果第一个参数为true，会清除该选中元素上的动画队列:除了停止当前动画，还会取消任何等待执行的动画。第一个参数的默认值为false：如果忽略该参数，等待执行的动画不会被取消。第二个参数用来指定正在连续变化的CSS属性是否保留当前值，还是应该变化到最终目标值。传入true可以让它们变化到最终值。传入false（或者省略该参数）会让它们保持为当前值。

这样就解决了当我们快速的触发animate时产生的奇怪特效。

源码见：源码 github benbenye