html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片滚动</title>
<link href="css/style.css" rel="stylesheet" />
<script src="js/jquery-1.7.1.js" ></script>
</head>
<body>
<div class="box">
<div id="pics">
<ul>
<li id="lambo1"><a href="" title="" target="_blank"><img src="images/l (1).jpg" /></a></li>
<li id="lambo2"><a href="" title="" target="_blank"><img src="images/l (2).jpg" /></a></li>
<li id="lambo3"><a href="" title="" target="_blank"><img src="images/l (3).jpg" /></a></li>
<li id="lam"><a href="" title="" target="_blank"><img src="images/l (1).jpg" /></a></li>
</ul>
</div>
<div id="nums">
<ul>
<li><a href="#lambo1" title="" target="_blank" class="active"></a></li>
<li><a href="#lambo2" title="" target="_blank"></a></li>
<li><a href="#lambo3" title="" target="_blank"></a></li>
</ul>
</div>
</div>
</body>
<script src="js/tab.js"></script>
</html>
css
/*基本设置*/
body{margin:0;padding:0;font-size:12px;font-family:Arial,"宋体";backgorund:#fff;}/*文档清零,字体,字号,背景设置.*/
div,ul,li,p,form,h1,h2,h3,h4,h5,input,dl,dt,dd,fieldset,table,tr,td{margin:0;padding:0;}/*边界元素清零*/
ul,li,ol{list-style:none;}/*去除列表符号*/
img{border:none;}/*去除图片按钮边框*/
a{text-decoration:none;}/*去除超链接下划线*/
img,input,textarea{vertical-align:middle;}
.box{ 600px; height:398px; box-shadow: 0px 0px 30px #000;
-moz-box-shadow: 0px 0px 30px #000;
-webkit-box-shadow: 0px 0px 30px #000;
background:#F99;
margin:20px auto;
position:relative;
}
#pics{ 600px; height:398px; overflow:hidden;}
#pics ul{2400px;}
#pics ul li{ float:left;}
#nums{ 65px; height:15px; position:absolute; bottom:5px; right:0;}
#nums ul li a{display:block; 15px; height:15px; float:left; background:#900; margin-right:5px; border-radius:15px;-moz-border-radius:15px; -webkit-border-radius:15px;}
#nums ul li a:hover,#nums ul li a.active{ background:#FC3;}
js
var index = 1;
setInterval(function () {
$("#pics").animate({
scrollLeft: 600*index
}, 1000, function () {
if (index == 4) {
index = 1;
$("#pics").scrollLeft(0);
}
});
$("#nums li a").removeClass("active");
$("#nums li:eq(" + index % 3 + ") a").addClass("active")
index++;
}, 2000)