`
ice-cream
  • 浏览: 320677 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

很炫的图片循环效果(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);     
			}
		);   
	});  
});
  • 大小: 73.9 KB
分享到:
评论
6 楼 Relucent 2009-03-19  
对比了一下,发现JQuery的确简化了不少东西,而且更容易理解。
5 楼 ice-cream 2009-03-17  
yxbbing 写道
为什么给图片加个超连接就不行了???

加链接也可以的,不知道你是怎么加的,要不把代码发来看看
4 楼 yxbbing 2009-03-16  
为什么给图片加个超连接就不行了???
3 楼 yangylsky 2009-02-13  
确实不错!赞一个。
2 楼 thebye85 2009-02-12  
学习了。。。。
1 楼 elementstorm 2009-02-09  
先去看了没用JQUERY的版本,代码太吓人了。。。

相关推荐

Global site tag (gtag.js) - Google Analytics