找了很多看了很多例子，而且也有很多种方法，都看晕了。都觉得挺麻烦的，索性自己做一个。刚开始觉得挺难的，做了后还是比较顺利嘿嘿。
<script type="text/javascript">
//--------------------首页图片轮滚--------------
var length = 1; //一共有四张图
var item = 0;
//js----------------------------
function LeftClick() {
if (item != 0) {
item--;
} else if (item == 0) {
item = length - 1;
}
Roll();
}
function RigthClick() {
if (item != length - 1) {
item++;
} else if (item == length - 1) {
item = 0;
}
Roll();
}
function init() {
var timer = setInterval('RigthClick()', 5000);
}
function Roll() {
$('#roll a').css('background', '#000');
$('#roll a').eq(item).css('background', 'red');
$('#ca>li').hide();
$('#ca li').eq(item).fadeIn(100);
}
init();
//Jquery------------------------------
$(document).ready(function () {
length = $('#ca li').length;
$("#left").click(function () {
LeftClick();
});
$('#rigth').click(function () {
RigthClick();
});
//滚动小图标---------------------------------------------
$('#roll a').click(function () {
if (item != $(this).index()) {
item = $(this).index();
$('#roll a').css('background', '#000');
$(this).css('background', 'red');
$('#ca>li').hide();
$('#ca li').eq(item).fadeIn(100);
}
});
});
</script>
<style>
#ca
{
list-style:none;
margin:0;
padding:0;
}
h1
{
color:White;
display:inline;
background-color:#888888;
opacity:0.3;
text-align:center;
font-weight:900;
}
h1:hover
{
cursor:pointer;
}
.circle {
13px;
height: 13px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
display:block;
float:left;
margin-right:20px;
}
#list li
{
display:inline;
}
#roll a
{
cursor:pointer;
background:#000;
opacity:0.5;
}
</style>
<body>
<form id="form1" runat="server">
<ul id='ca'>
<li><a href='#'><img src="images/0.jpg" /></a></li>
<li id='nima1' style='display:none;'><a href='#'><img src="images/1.jpg" /></a></li>
<li style='display:none;'><a href='#'><img src="images/2.jpg" /></a></li>
<li style='display:none;'><a href='#'><img src="images/3.jpg" /></a></li>
</ul>
<div style='position:relative; margin:0; padding:0; top: -165px; text-align:right; left: 0px; 586px;'>
<h1 id='left' style=' 33px; border:0; height:40px; float:left;'><</h1>
<h1 id='rigth' style=' 33px; border:0; height:40px; float:right;'>></h1>
</div>
<div id='roll'
style='position:relative; top: -36px; left: 210px; 171px;'>
<a class='circle' style='background:red;' ></a>
<a class='circle'></a>
<a class='circle'></a>
<a class='circle'></a>
</div>
</form>
</body>