优化一个简单的jQuery图像旋转木马

我需要在我的站点上循环浏览4张图片，我不想在站点上添加其他插件，所以我创建了自己的简单旋转木马（下面是html、css和js）

我的问题是，仅仅从这段代码来看，是否有一种明显的更简单/更好的方法

html:

js:

---

这是我的优化版本

HTML

Javascript

function carousel(el, base, images, i){
    //Made the "i" parameter optional
    if (i == images.length || i == null) i = 0;
    //Put the variables in a better order
    var el2 = $(el).clone();
    el2.attr('src', base + images[i]);
    el2.css('z-index', '0');
    $(el).css('z-index', '1');
    $(el).after(el2);
    //One line...
    $(el).fadeOut('slow', function(){$(this).remove();});
    i++;
    //The function doesn't have to be in a variable
    window.timer = setTimeout(function(){return carousel(el, base, images, i);}, 4000);
}

$(function($){
    //Didn't include "i" variable
    carousel('#carousel img:first',
             'images/', 
             ['01.jpg',
              '02.jpg',
              '03.jpg',
              '04.jpg']);
});

---

为什么不在你的图像宽度和高度上使用CSS呢？它只是一个复制粘贴。不相关的谢谢，但是除了删除“我”之外，你什么都没有优化。好吧，这是我能做的最好的了，我认为它已经尽可能地优化了

#carousel{text-align:center;position:relative;}
#carousel img{top:0;left:0;z-index:1;position:absolute;}

function carousel(el, base_url, images, i){
    if (i == images.length ) i = 0;
    var el2 = $(el).clone();
    $(el).css('z-index', '1');
    el2.css('z-index', '0');
    el2.attr('src', base_url + images[i]);
    $(el).after(el2);
    $(el).fadeOut('slow', function(){
        $(this).remove();
    });
    i++;
    var func = function(){return carousel(el, base_url, images, i);};
    window.timer = setTimeout(func, 4000);
}
$(document).ready(function(){
    carousel('#carousel img:first',
             'images/', 
             ['image_00.jpg',
              'image_01.jpg',
              'image_02.jpg',
              'image_03.jpg'], 
             0);
});

<!-- "section" is not valid HTML -->
<div id="carousel">
         <img src="images/01.jpg" width="202" height="162" />
</div>

/* Same as before */
#carousel{text-align:center;position:relative;}
#carousel img{top:0;left:0;z-index:1;position:absolute;}

function carousel(el, base, images, i){
    //Made the "i" parameter optional
    if (i == images.length || i == null) i = 0;
    //Put the variables in a better order
    var el2 = $(el).clone();
    el2.attr('src', base + images[i]);
    el2.css('z-index', '0');
    $(el).css('z-index', '1');
    $(el).after(el2);
    //One line...
    $(el).fadeOut('slow', function(){$(this).remove();});
    i++;
    //The function doesn't have to be in a variable
    window.timer = setTimeout(function(){return carousel(el, base, images, i);}, 4000);
}

$(function($){
    //Didn't include "i" variable
    carousel('#carousel img:first',
             'images/', 
             ['01.jpg',
              '02.jpg',
              '03.jpg',
              '04.jpg']);
});