js图片轮换效果（一）

常常在各大网站上看到如下图所示的图片轮换效果，有的是用flash做的，有的是用js做的。

我就google一下，发现用js写的图片轮换效果例子是不少，可惜要么太繁琐，要么连页面都打不开

于是自己试了试，写了一个，代码很少。

[img]http://ice-cream.iteye.com/upload/attachment/60007/3d2759cd-10d1-30e2-892c-638d58676f3e.jpg[/img]

js如下：

$(document).ready(function(){	
	$(".clickButton a").attr("href","javascript:return false;");
	$(".clickButton a").each(function(index){			
		$(this).click(function(){
			changeImage(this,index);	
		});			
	});	
	autoChangeImage();		
});

function autoChangeImage(){
	for(var i = 0; i<=10000;i++){
		window.setTimeout("clickButton("+(i%5+1)+")",i*3000);			
	}
}

function clickButton(index){
	$(".clickButton a:nth-child("+index+")").click();
}

function changeImage(element,index){
	var arryImgs = ["images/01.jpg","images/02.jpg","images/03.jpg","images/04.jpg","images/05.jpg"];
	$(".clickButton a").removeClass("active");
	$(element).addClass("active");
	$(".imgs img").attr("src",arryImgs[index]);
}

鼠标停留版（参考malk的js改写的）：

$(document).ready(function(){
	var arryImgs = ["images/01.jpg","images/02.jpg","images/03.jpg","images/04.jpg","images/05.jpg"];
	$(".clickButton a").attr("href","javascript:return false;"); 
	var times = 1;
	function changeImage(){
		if (times == 6) {
			times = 1;
		}
		$(".clickButton a").removeClass("active");
		$(".clickButton a:nth-child(" + times + ")").addClass("active");
		$(".imgs img").attr("src",arryImgs[times-1]);
		times++;
	}
	var interval = window.setInterval(function(){
		changeImage();
	}, 1500);
	$(".clickButton a").each(function(index){
		$(this).hover(
			function(){
				$(".clickButton a").removeClass("active");
				$(this).addClass("active");
				clearInterval(interval);
				$(".imgs img").attr("src",arryImgs[index]);
				times = index+1;	
			},
			function(){
				interval = window.setInterval(function(){
					changeImage();
				}, 1500);	
			}); 
	});
})