很炫的图片循环效果(jquery改写版)

以前我在博客中发表过这个图片循环效果,是用javascript写的

http://ice-cream.iteye.com/admin/blogs/183237

最近在研究jquery,就用jquery改写了一下,发现代码要简单很多

jquery代码:

$(document).ready(function(){
	$("img:not(:first)").hide();
	$("span:first").addClass("highlight");
	var time = 1;
	function changeAuto(){
		if(time == 3){
			time = 0;
		}
		$("img:visible").slideUp("slow").parent().children("span").removeClass("highlight");			
		$("img:eq("+time+")").slideDown("slow").parent().children("span").addClass("highlight");
		time++;
	}
	var interval = window.setInterval(function(){  
		changeAuto();  
	}, 3000);
	$("span").click(function(){		
		if($(this).attr("class")!="highlight"){		
			clearInterval(interval);
			$("img:visible").slideUp("slow").parent().children("span").removeClass("highlight");
			$(this).addClass("highlight").parent().children("img").slideDown("slow");
		}
	});
	$("img").each(function(index){  
		$(this).hover(  
			function(){   
				clearInterval(interval);       
			},  
			function(){  
				interval = window.setInterval(function(){  
					changeAuto();  
				}, 3000);     
			}
		);   
	});  
});

你可能感兴趣的:(JavaScript,jquery)