废话不多说，先上源码

1 
      
        2 
       
         3     
        
         4     
        
          5         
         
 6         
         
 7         
         
 8         
         
 9     
        
10     
       
11 12     
       
        13         
        
14         
        
15         
        
16         
        
17     
       
18     
       
        19     
       
20     
       
        21     
       
22 
      

/*index css start*/#baner{	width: 1000px;	height: 500px;	margin: 0 auto;	position: relative;}.imgc li img{	width: 1000px;}.imgc li{	position: absolute;}.next{	position: absolute;	background: url(../image/next.png) no-repeat  0 0;	background-position: 5px 17px;	width: 20px;	height: 50px;	background-color: #fff;	z-index: 2;	margin-left: 980px;	margin-top: 174px;	cursor: pointer;}.before{	position: absolute;	background: url(../image/before.png) no-repeat  0 0;	background-position: 5px 17px;	width: 20px;	height: 50px;	background-color: #fff;	z-index: 2;	margin-top: 174px;	cursor: pointer;}.imgt{	margin: 0 auto;	position: absolute;	z-index: 2;	height: auto;	margin-top: 357px;	width: 1000px;	height: 40px;	text-align: center;}.imgt ul{	margin: 0 auto;	width: 100px;	height: 40px;}.imgt ul li{	width: 10px;	height: 10px;	background-color: #000;	float: left;	border-radius: 50%;	margin-left:3px;	margin-top: 15px;	cursor: pointer;}.shadeDiv{	width: 100%;	height: 40px;	background-color: #777777;    position: absolute;    z-index: 1;}.clarity {	filter:alpha(opacity=30);       -moz-opacity:0.3;       -khtml-opacity: 0.3;       opacity: 0.3;	}

 

1     var n=0;//当前图片编号 2     var count=0;//图片数量 3     count=$(".imgc li").length; 4 //下一张图片 5     function changeimg(){ 6         $(".imgc").children().fadeOut(500);//所有图片淡出 7         $(".imgc").children().eq(n).fadeIn(1000);//第N张图淡入 8         $(".imgt li").removeClass("clarity");//移除所有编号样式 9         $(".imgt li").eq(n).addClass("clarity");//增加当前编号样式10         if(n==(count-1))11         {12             n=0;13         }14         else{15             n=n+1;16         }17     }18 19     function start(){20         //定时器，4秒更换图片21         t = setInterval("changeimg()", 4000);22 23     }24 25     //图片编号点击事件26     $(".imgt li").click(function(){27         window.clearInterval(t);28         n=parseInt($(this).attr("name")-1);29         changeimg();30         start();31     })32 33 34     //左右切换图片，点击下一张图时直接执行changeimg()35     $(".next,.before").click(function(){36         var btntext=$(this).attr("name");37         //点击上一张38         if (btntext=="before") {39             if (n==0) {
    //当n=0时当前显示的为最后一张图40                 n=count-2;//当n为0时切换倒数第二张图41             }42             else if(n==1){
    //当n=1是先前显示的第一张图43                 n=count-1;//当n=0是切换到最后一张图44             }45             else{46                 n=n-2;47             }48         }49         window.clearInterval(t);//停止计时器50         changeimg();51         start();52     })53     start();

第一次自己写轮播效果，有很多不足的地方请多多批评教育