Jquery实现图片轮播效果

 1 <div id="baner">
 2 <div  class="imgt">
 3     <div class="shadeDiv clarity"></div><!-- 透明层 -->
 4     <ul>
 5         <li name="1"></li>
 6         <li name="2"></li>
 7         <li name="3"></li>
 8         <li class="clarity" name="4"></li>
 9     </ul>
10     </div>
11 
12     <ul class="imgc">
13         <li id="img_1"><img src="image/baner.jpg" alt=""></li>
14         <li id="img_2"><img src="image/baner.jpg" alt=""></li>
15         <li id="img_3"><img src="image/baner.jpg" alt=""></li>
16         <li id="img_4"><img src="image/baner.jpg" alt=""></li>
17     </ul>
18     <div class="next" name="next">
19     </div>
20     <div class="before" name="before">
21     </div>
22 </div>

 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();