Jquery Background image simple fade effect auto slide

Background image simple fade effect auto slide

<style>

.main_visual{

background:url("/include/main/main_inc01/img/visual_01.jpg") no-repeat center top;

height:640px;

width:100%;

}

</style>

<script language="JavaScript" type="text/javascript">

/**/

 $(document).ready(function(){

 

 var imgArr = new Array( // relative paths of images

 '<?=$g4[path]?>/include/main/main_inc01/img/visual_01.jpg',

 '<?=$g4[path]?>/include/main/main_inc01/img/visual_02.jpg',

 '<?=$g4[path]?>/include/main/main_inc01/img/visual_03.jpg',

 '<?=$g4[path]?>/include/main/main_inc01/img/visual_04.jpg',

 '<?=$g4[path]?>/include/main/main_inc01/img/visual_05.jpg',

 '<?=$g4[path]?>/include/main/main_inc01/img/visual_06.jpg',

 '<?=$g4[path]?>/include/main/main_inc01/img/visual_07.jpg',

 '<?=$g4[path]?>/include/main/main_inc01/img/visual_08.jpg'

 );

 

 var preloadArr = new Array();

 var i;

 

// preload images

 for(i=0; i < imgArr.length; i++){

 preloadArr[i] = new Image();

 preloadArr[i].src = imgArr[i];

 }

 

 var currImg = 1;

 var intID = setInterval(changeImg, 5000);

 

 // image rotator 

 function changeImg(){

 $('.main_visual').animate({opacity: 0}, 300, function(){

 $(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +') top center no-repeat');

 }).animate({opacity: 1}, 300);

 }

 });

</script>

<div id="" class="main_visual"></div>