图片全部放在本地，只贴代码。   自己拷贝到html页面，需要一个jquery-1.4.3.js 文件    图片自己来5张就行   当鼠标离开div区域，图片自动上下轮播以次/10s速度；可以将他 改为横向轮播 

<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" 
	      content="text/html; charset=utf-8" />
	      
	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
		}
		#d1 {
			border: 2px solid #E98C36;
			width:550px; 
			height:260px;
			margin-left:25%;
			margin-top:10%;
			/*重要！表明该父元素的position不是static 
			    目的:所包含的子元素可以根据它相对定位  */
			position:relative;
			/* 使图片溢出层块的部分不显现  */
			overflow:hidden; 
		}
		
	
		#adv, #num {
			/*图片列表相对于父元素div的绝对定位(例如距离div上边框的移动)，
			    每次绝对定位的调整，导致图片的滚动 */
			position:absolute; 
		}
		
		#num {
		    /*数字列表相对于父元素的位置，要求父元素是relative(非static)*/
			right:5px;
			bottom:5px;
		}
		ul li {
			/*ul样式的综合设定: outside 图片 disc*/
			list-style:none;/*去掉图标  */
		}
		ul img {
			/* 通过指定图片的宽度和高度，将图片
			      刚好嵌入到div层块中  */
			width:550px;
			height:260px;
			display:block; 
		}
		#num li {
			/* 列表项如果是横向排列的话，需要设定float属性  */
			float:left; /* 使列表项左浮动 */ 
			color:#FF7300;
			margin: 3px 1px;
			border:1px solid #FF7300;
			width:16px;
			height:16px;
			text-align:center;
			font-family: Arial;
			font-size:12px;
			line-height:16px;
			cursor: pointer; /* 鼠标的形状:小手 */
		}
		.on {/* 页面执行时，由jquery对象动态添加的样式  */
			background-color:red;
			font-weight:bold;
		}
	</style>
		
	<script type="text/javascript" 
	      src="../js/jquery-1.4.3.js"></script>
	
	<script type="text/javascript">
		var currentIndex=0;//当前图片的下标
		$(function(){
			//功能Ⅰ:通过鼠标指示数字，显示对应的图片
    		$("#num li").mouseover(function(){
				//鼠标指定图片下标
				currentIndex=$("#num li").index(this);
				//显示鼠标指定图片
				showImage(currentIndex);
			});
    		/*程序产生事件，但只能显示第一张图片*/
			/* 当载入页面时，数字列表中的第一项产生mouseover事件，
			      导致数字列表中的第一项呈现选中状态 */
			$("#num li").eq(0).mouseover();//注意：不能放在事件处理方法之前
			
			/* 功能Ⅱ:鼠标悬停在图片上，图片静止显示；
			                  鼠标离开图片时，图片开始自动显示；*/
			var taskId;
			/* hover的两个匿名函数，一个对应mouseover事件，
			      一个对应mouseleave事件 */
    	    $("#d1").hover(function(){
				clearInterval(taskId)
			},function(){
			  taskId=setInterval(function(){
			       //自动显示当前图片
			       showImage(currentIndex);
			       //自动维护图片下标，共显示5张图片（下标0-4）
			       currentIndex++;
			       if(currentIndex==5) currentIndex=0;
			  },2000);
			});
			//触发hover方法中的第二个匿名函数的执行,导致程序自动执行!
			$("#d1").mouseout();//注意：不能放在事件处理方法之前
			//$("#d1").mouseleave();
			
			//显示当前图片（显示指定下标的图片）
			function showImage(index){//index:0,1,2,3,4
				
				/*var height=$("#d1").height();*/
				var width=$("#d1").width();
				
				/* 通过animate方法对图片显示实施动画 
				      图片从当前位置向上移动（注意：y坐标正值向下，负值向上）*/
				      
				/*$("#adv").animate({"top":-height*index},1000);*/S
				$("#adv").animate({"left":-width*index},1000);
				
				/* 当前显示的图片所对应的列表项，需要动态施加样式，而去除非当前列表项的样式 */
				$("#num li").eq(index).addClass("on").siblings().removeClass("on");
			}
		});
    </script>
    
</head>
<body>
	<div id="d1">
		<!--图片列表  -->
		<ul id="adv">
			<li><img src="../images/1.jpg" /></li>
			<li><img src="../images/2.jpg" /></li>
			<li><img src="../images/3.jpg" /></li>
			<li><img src="../images/4.jpg" /></li>
			<li><img src="../images/5.jpg" /></li>
		</ul>
		<!--数字列表  -->
		<ul id="num">
		    <li>1</li>
		    <li>2</li>
		    <li>3</li>
		    <li>4</li>
		    <li>5</li>
		</ul>
	</div>
</body>
</html>