I have this simple script which fades images in and out. As you can see i repeated it multiple times so it works for a couple of divs (fade1, fade 2, fade 3 etc.)


Is there a way to put it all in one function instead of me copy and pasting the script? as you can see i have no JS background at all, i just wnat to put together a simple website for me..

Code:

<style>
.fadein { position:relative; height:335px; width:436px; }
.fadein img { position:absolute; left:0; top:0; }

.fadein2 { position:relative; height:335px; width:486px; }
.fadein2 img { position:absolute; left:0; top:0; }

.fadein3 { position:relative; height:335px; width:436px; }
.fadein3 img { position:absolute; left:0; top:0; }


.fadein4 { position:relative; height:335px; width:486px; }
.fadein4 img { position:absolute; left:0; top:0; }
</style>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>

$(function(){
	$('.fadein img:gt(0)').hide();
	setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 2000);
});


$(function(){
	$('.fadein2 img:gt(0)').hide();
	setInterval(function(){$('.fadein2 :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein2');}, 1700);
});

$(function(){
	$('.fadein3 img:gt(0)').hide();
	setInterval(function(){$('.fadein3 :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein3');}, 1700);
});


$(function(){
	$('.fadein4 img:gt(0)').hide();
	setInterval(function(){$('.fadein4 :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein4');}, 1700);
});


</script>