Оптимизация простой карусели изображений jQuery

Question

Мне нужно выполнить 4 изображения на моем сайте, я не хотел добавлять еще один плагин на сайт, поэтому я создал свою собственную простую карусель (html, css и js ниже)

Вопрос в том, что, посмотрев на этот код, есть очевидный более простой/лучший способ сделать это?

HTML:

<section id="carousel"> 
    <img src="images/image_00.jpg" width="202" height="162" /> 
</section> 

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

Answer 1

Вот мой оптимизированная версия ...

HTML

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

CSS

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

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']); 
});