首先声明一下：

    本例子的那个小园点和实际的图片顺序不对应，是因为我每张图滚动过后，又把第一张图的内容自动通过 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"，容器的宽,容器的高)

就可以了。