很简单的jQuery图片淡入切换

做东西时偶尔弄出来的一个小图片切换，感觉比较轻量（其实原理很坑）打算发上来，然后去修饰了一下，加上无限循环以后结果变臃肿了....

html：

<ul>
    <li class="active"><img src="image/1.jpg" /></li>
    <li><img src="image/2.jpg" /></li>
    <li><img src="image/3.jpg" /></li>
    <li><img src="image/4.jpg" /></li>
    <li><img src="image/5.jpg" /></li>
</ul>

css：

* {
    padding: 0px;
    margin: 0px;
    list-style: none;
}
ul {
    position: relative; 
    width: 1200px; 
    height: 500px;
    margin: 0px auto;
    overflow: hidden;
    border: 1px solid #06c; 
}    

js：

$(function() { 
　　image();
   function image() {
   　　setTimeout(function() {
      　　$('.active').fadeOut(500);
         if($('.active').index() == $('.active').parent().children(':last').index()) {
         　　$('.active').fadeOut(500, function() {
            　　$(this).removeClass('active').parent().children().show().eq(0).addClass('active');
            })
         }else {
         　　$('.active').removeClass('active').next().show().addClass('active');
         }    
         image();
      }, 3000)
　　}
});

如果有童鞋感兴趣直接拷走改一下image的src，把ul的width和height改成你用的图片的尺寸并引入jquery就可以用了。