论坛首页 Web前端技术论坛

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

浏览 8383 次
精华帖 (0) :: 良好帖 (6) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2009-02-08   最后修改:2009-02-09

以前我在博客中发表过这个图片循环效果,是用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
   发表时间:2009-02-09  
先去看了没用JQUERY的版本,代码太吓人了。。。
0 请登录后投票
   发表时间:2009-03-16  
为什么给图片加个超连接就不行了???
0 请登录后投票
   发表时间:2009-03-17  
yxbbing 写道
为什么给图片加个超连接就不行了???

加链接也可以的,不知道你是怎么加的,要不把代码发来看看
0 请登录后投票
   发表时间:2009-03-19  
对比了一下,发现JQuery的确简化了不少东西,而且更容易理解。
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics