JQuery 画像の切り替え

<script type="text/javascript">
var headerArea_img_index = 0;
$(document).ready(function(){
   setInterval(function(){
       $(".headerArea img:visible").hide();
       $(".headerArea img:eq(" + headerArea_img_index + ")").show();
       headerArea_img_index = (headerArea_img_index+1) % $(".headerArea img").size();
   }, 3000);
   $(".headerArea img:eq(" + headerArea_img_index + ")").show();
});
</script>
<header class="headerArea">
   <img src="header01.png" />
   <img src="header02.png" />
   <img src="header03.png" />
   <img src="header04.png" />
</header>