new image on page load?

new image on page load?

Hey guys,

I am new to jquery and having problems with a part of my code. I need to shuffle the images in a particular div, once with each page load. (one of six images) the images fades in and then fades out....all of which I have working beautifully. my link is here:  http://dev.redefinedfitness.caracdennis.com/

the HTML:  <div id="intro"><img src="bin/images/intro0.jpg" alt="" title="" /></div>
    <div class="homeBg">
         ........
         </div>

the WORKING js:
            /*background fade in*/
$(document).ready(function(){
$("#intro").hide().fadeIn(1200).delay(2000).fadeOut(1200);
});
$(document).ready(function(){
$('.homeBg').hide().delay(3600).fadeIn(1200);
});

and the js that I am having problems with. it breaks all of the jquery in my page:

$(function()
  {var images=["intro0.jpg"
              ,"intro1.jpg"
              ,"intro2.jpg"
              ,"intro3.jpg"
              ,"intro4.jpg"
              ,"intro5.jpg"];
  var image = images[Math.floor(Math.random() * 6)];
 
  $("#intro")[0].src=bin/images/;
  });

Can anyone tell me what I am doing wrong? I;ve been working on this for a couple of days now, and I'm really confused

Thanks,

Cara