做了一下午+一晚上，终于成功了。。。在网上搜了很多，好像都很复杂，所以还是自己弄了一个

javascrpt部分

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js” type=”text/javascript”></script>

<script type=”text/javascript”>
node=0;
function imgchange()                //函数要写在 $(document).ready外面，不然调用不了
    {
$(“#page page”).eq(node).removeClass(“on”);
$(“#image_list a”).eq(node).fadeOut();
if(node>=3){
node=0;
}else{
node++;
}
$(“#page page”).eq(node).addClass(“on”);
$(“#image_list a”).eq(node).fadeIn();

}
$(document).ready(function(e) {

//图片轮播 js部分
$(“#image_list a”).fadeOut(); //所有图片fadeOut()
$(“#page page”).eq(node).addClass(“on”);
// $(“#image_list a:not(:first-child”).fadeOut(); 谷歌浏览器出问题，IE正常
$(“#image_list a”).eq(node).fadeIn();  //fadeIn()第一张图片
count=$(“#image_list a”).length;
timerID=setInterval(“imgchange()”,3000);            //设置定时器
$(“#image”).hover(function(){  //鼠标停留在图片上，停止定时器
clearInterval(timerID);},
function(){
timerID=setInterval(“imgchange()”,3000);
});
//点击翻页功能
$(“#page > page”).click(function(){
$(“#page page”).eq(node).removeClass(“on”);
$(“#image_list a”).eq(node).fadeOut();
node=$(this).attr(“page”);
//$(this).addClass(“on”);
$(“#page page”).eq(node).addClass(“on”);
$(“#image_list a”).eq(node).fadeIn();
});
});
</script>

css部分

#image
{
position:relative;
overflow:hidden;
height:227px;
width:670px;
left: 17px;
}
#image_list a
{
position:relative;
}
#page
{
position:absolute;
z-index:1005;
right:17px;
bottom:5px;
}
page
{
background:#333333;
font-size:16px;
font-weight: bold;
color: #FFFFFF;
}
.on
{
background:#990000;
}
#image_list img
{
border:none;
}

html部分

<div id=”image”>
<div id=”page”>
<page page=0>&nbsp;1&nbsp;</page>
<page page=1>&nbsp;2&nbsp;</page>
<page page=2>&nbsp;3&nbsp;</page>
<page page=3>&nbsp;4&nbsp;</page>
</div>

<div id=”image_list”>
<a href=”#”><img src=”../Public/img/1-675×220.jpg” width=”650″ height=”227″ alt=”1″ /></a>
<a href=”#”><img src=”../Public/img/2-675×220.jpg” width=”650″ height=”227″ alt=”2″ /></a>
<a href=”#”><img src=”../Public/img/3-675×220.jpg” width=”650″ height=”227″ alt=”3″ /></a>
<a href=”#”><img src=”../Public/img/5-675×220.jpg” width=”650″ height=”227″ alt=”4″ /></a>
</div>
</div>