js轮播图

html：

<div id="container">
					<div id="focus-container">
						<ul id="focus-image">
							<li><img src="images/1.jpg" alt="" /></li>
							<li><img src="images/2.jpg" alt="" /></li>					
							<li><img src="images/5.jpg" alt="" /></li>
							<li><img src="images/6.jpg" alt="" /></li>
							<li><img src="images/7.jpg" alt="" /></li>
							<li><img src="images/8.jpg" alt="" /></li>
						</ul>
						
						<ul id="focus-text" class="clear">					
						</ul>
					</div>
				</div>

css：

<style>
			body,p,div,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd{
				margin: 0;
				padding: 0;
			}
			ul,ol{
				list-style: none;
			}
			a{
				color: #000;
				text-decoration: none;
			}
			body{
				font: 12px/150% arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif;
			}
			table{
				width: 100%;
				border-collapse: collapse;
				border-spacing: 0;
			}
			.clear:after{
				display: block;
				height: 0;
				content: '.';
				visibility: hidden;
				clear: both;
			}
			.clear{
				zoom:1;
			}
			#container{
				width: 90%;
				margin: 0 auto;
			}
			#focus-container{
				position:relative;
				width: 590px;
				height: 340px;
				margin:0 auto;
				overflow: hidden;
			}
			#focus-text{
				position: absolute;
				right: 10px;
				bottom: 10px;
			}
			#focus-text li{
				float:left;
				padding:5px 9px;
				margin-right:3px;			
				background:#fff;
				color: #900;
				cursor: pointer;
				border-radius: 50%;
				font-family: Helvetica;
				font-weight: bold;
			}
			#focus-text li.active{
				background-color:#900 ;
				color:#fff;
			}
		</style>

JS：

<script src="scripts/jquery-1.10.0.min.js"></script>
		<script>
			$(function(){						
				//根据#focus-image中li的数量,决定#focus-text中的li数量及内容
				for(var n=1;n<=$('#focus-image>li').size();n++){
					$('#focus-text').append('<li>' + n +'</li>');//	<li>' + n +'</li>添加到	#focus-text	中		
				}
				$('#focus-image>li:not(:first)').hide();
				$('#focus-text>li:first').addClass('active');//默认原点在第一个#focus-text>li 上
				$('#focus-text>li').mouseover(function(){					
					$('#focus-image>li:visible').fadeOut(200);
					$('#focus-image>li:eq('+ $(this).index() + ')').fadeIn(500);
					$(this).addClass('active').siblings().removeClass('active');					
				});
			
				
			});
		</script>