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

最新推荐文章于 2024-09-06 23:20:39 发布

最新推荐文章于 2024-09-06 23:20:39 发布 · 143 阅读

文章标签：

#jQuery #JavaScript #ViewUI

jquery 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一个使用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);     
			}
		);   
	});  
});