首先声明一下：
本例子的那个小园点和实际的图片顺序不对应，是因为我每张图滚动过后，又把第一张图的内容自动通过 appentTo加到了图片的最后面。所以，更新了他们的索引编号。
如果是淡入淡出效果的，或者是通过两个div来滚动的那种设计就不会有问题。如果有需要的，可以联系我，更改成那种方式。
效果如下：
第一步：样式表
<style>
body{}
#box{height:200px;border:1px #C00 solid; position:relative;overflow:hidden}
#box #list{width:8000px;z-index:1;position:absolute}
#box #list li{margin-right:1px;width:600px;height:200px;float:left;background-color:pink; list-style-type:none; display:inline;}
.btn{opacity:0;width:50px;padding:10px;background-color:#999;border-radius:5px;z-index:3; position:absolute;}
.btn:hover{opacity:0.5;}
#xyd{bottom:10px; position:absolute;left:50%;margin-left:-40px;text-align:auto;z-index:2}
#xyd li{display:inline;padding:2px 6px;border-radius:50%;}
.xyd{background-color:#ccc;}
.xyd2{background-color:#FFF;}
#btnleft{margin-left:10px;float:left}
#btnright{float:right;right:10px;}
</style>第二步，bannar的代码结构：
<div id="box"> <div id="list"> <li><img src="images/1.jpg" width="100%"/></li> <li><img src="images/2.jpg" width="100%"/></li> <li><img src="images/3.jpg" width="100%"/></li> <li><img src="images/4.jpg" width="100%"/></li> <li><img src="images/5.jpg" width="100%"/></li> </div> <div id="xyd"> <li class="xyd">1</li> <li class="xyd">2</li> <li class="xyd">3</li> <li class="xyd">4</li> <li class="xyd">5</li> </div> <div id="btnleft" class="btn"> 上一张 </div> <div id="btnright" class="btn">下一张</div> </div>
第三步：JQUERY代码：
<script>
function bannar($boxid,$boxw,$boxh){
$($boxid).css({'width':$boxw,'height':$boxh,'overflow':'hidden'});
var $bw = parseInt($($boxid).css('width'));
var $boxh = parseInt($boxh);
var $count = $("#list").children().length;//获取列表的个数
var $list = $($boxid "#list");
var $xyd = $($boxid "#xyd li")
var $listli = $("#list li");
var index = 0;
//先设置一下list容器向左移一个box的宽度
$($boxid).css({'width':$bw,'height':$boxh,'overflow':'hidden'});
$($list).css('margin-left',-$bw);
$($listli).css({'width':$bw,'height':$boxh,'overflow':'hidden'});
$(".btn").css('top',$boxh/2);
//右键点击理件
$("#btnright").click(rightclick);
//左键点击事件
$("#btnleft").click(leftclick);
//把右键的点击行为封装成一个函数
function leftclick(){
//防止用户多次点击，叠加太多的动画，进行防流氓点击
if($list.is(":animated")){ //如果当前的list正在位移中,则忽略掉新的操作。
return;
}else{
//点击左键的时候，list原来的基础上，再向左位移一个盒子的宽。
$list.animate({'margin-left':-$bw*2},500,function(){
//位移后的回调函数：把list里面的第一个子元素移动到list盒子的最后面，再更改list的盒子左边距为起始
$("#list li").eq(0).appendTo("#list").parent().css('margin-left',-$bw);
});
//获取信号源
index--;
if(index < 0){
index = $count - 1;
}
$($xyd).eq(index).addClass("xyd2").siblings().removeClass("xyd2");
}
}
//右键点击事件
function rightclick(){
//同样的先加入防流氓点击
if($list.is(":animated")){
return
}else{
//点击右键的时候，list原来的基础上，再向右位移一个盒子的宽，回到零。
$list.animate({'margin-left':0},500,function(){
//位移后的回调函数：把list里面的第一个子元素移动到list盒子的最后面，再更改list的盒子左边距为起始
$("#list li").eq($count-1).prependTo("#list").parent().css('margin-left',-$bw);
});
//小园点
index++ ;
if(index > $count-1){
index = 0;
}
$($xyd).eq(index).addClass("xyd2").siblings().removeClass("xyd2");
}
}
//自动播放
var timer = setInterval(rightclick,3000);
//鼠标事件
$($boxid).mouseenter(function(){
clearInterval(timer);
$(".btn").animate({'opacity':0.5});
})
$($boxid).mouseleave(function(){
clearInterval(timer);
timer = setInterval(rightclick,3000);
$(".btn").animate({'opacity':0});
});
}
//调用函数bannary让他网页打开后就自动运行。
bannar("#box",900,300);//自动播放 函数说明：bannar("bannar容器的ID"，容器的宽,容器的高)
</script>这是我第一次写的JQUERY轮播图代码，有很多不完善的地方。希望大家相互交流，以后一定会更加的完善的。大神请绕过。匆喷。
你可以根据你的需要，自己修改里面的代码。
使用的时候只要调用
bannar("bannar容器的ID"，容器的宽,容器的高)就可以了。
