JQuery实例：多图片轮显效果

#div_imglist img{
width:300px;
}
#imglist_number li{
float: left;
border:3px #ffffff double;
padding:0px 5px 0px 5px;
margin-left:5px;
list-style:none;
line-}
.imglist_number_li{

background:#ff0000;
color:#ffffff;}

以下是内容：

 <div style="border:3px double #dddddd; position:relative; width:300px; overflow:hidden; line- text-align:center; margin-top:300px;" id="div_imglist">

<img  src="images/01.jpg"/>

<img  src="images/02.jpg"/>

<img  src="images/03.jpg"/>

 <img  src="images/04.jpg"/>
     <ul  id="imglist_number" style="position:absolute; bottom:0px ; right:0px;">
     </ul>
</div>

以下是Jquery代码：

 <script>
 var imglist=$("#div_imglist>img");
var imglist_number=$("#imglist_number");
imglist.each(
 function(i){
  imglist_number.append("<li>"+(i+1)+"</li>");
 } 
)
imglist.hide();

var imglist_number_li=$("#imglist_number>li");
imglist_number_li.each(
 function(i){
  imglist_number_li.eq(i).hover(
   function()
   {
    imglist.hide();
 imglist.eq(i).fadeIn(500);
 imglist_number_li.removeClass("imglist_number_li");
 imglist_number_li.eq(i).addClass("imglist_number_li");
 currno=i+1;
   }
  )
 }
)
var currno=0;
if(imglist_number_li.length>0)
{
 showimg(currno);
 
}

function showimg(i)
{  
 imglist.hide();
 imglist.eq(i).fadeIn(500);
 imglist_number_li.removeClass("imglist_number_li");
 imglist_number_li.eq(i).addClass("imglist_number_li");
 currno=i+1;
 if(currno==imglist_number_li.length)
 {
  currno=0;
 }
 window.setTimeout("showimg("+(currno)+")",2000);
}
 </script>