论坛首页 Web前端技术论坛

JQuery 简单小例子 图片幻灯

浏览 2713 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (7) :: 隐藏帖 (0)
作者 正文
   发表时间:2009-07-16   最后修改:2009-07-26

今天用JQuery做了个图片幻灯,功能简单实用

 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery Test</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/custom.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/custom.css" />
</head>

<body>
    <div id="a">
        <img src="image/01.jpg" />
        <img src="image/02.jpg" />
        <img src="image/03.jpg" />
        <img src="image/04.jpg" />
    </div>
</body>

 

$(function(){
	$.picSwitch("#a",3);	
	//有两个参数: arg1,arg2
	//arg1: #a代表图片的容器
	//arg2: 3代表从第四张图片开始
});

//扩展JQuery,加入自己的函数
$.extend({
	picSwitch:function(div,i){
		if(i!=0)  $(div+">img").eq(i-1).hide();
		else  $(div+">img:last").hide();
		$(div+">img").eq(i).fadeIn("slow",function(){
			i=i==$(div+">img").size()-1?0:i-0+1;
			setTimeout("$.picSwitch('"+div+"','"+i+"')", "1000");
		});		
	}
});   

 

  

论坛首页 Web前端技术版

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