title: Setting up an image array using splice
body: <p>I have set up a simple image array and want to ensure that each image from the array is used only once.  I am new to javascript and am not sure how to implement the splice element.</p>
  
  <p>A link to the full site: <a href="http://p3.katecooperuk.com" rel="nofollow">http://p3.katecooperuk.com</a></p>
  
  <p>Here is my javascript array:</p>
  
  <pre><code>var calendarImg = [
      "url(/images/tree.jpg)", 
      "url(/images/santa.jpg)", 
      "url(/images/stockings.jpg)",
      "url(/images/snoopy.jpg)",
      "url(/images/stockings2.jpg)",
      "url(/images/bear.jpg)",
      "url(/images/penguins.jpg)",
      "url(/images/baubles.jpg)",
      "url(/images/polarbear.jpg)",
      "url(/images/village.jpg)",
      "url(/images/village2.jpg)",
      "url(/images/nativity.jpg)",
      "url(/images/santa2.jpg)",
      "url(/images/snowman.jpg)",
      "url(/images/snow.jpg)",
      ]
  
      function imgRandom(imgArr) {
          return imgArr[Math.floor(Math.random() * imgArr.length)];
      }
  
  $('.doors').click(function(){ 
  
      // Select Random Image
      var doorImage = imgRandom(calendarImg); 
  
      // Change background image of door that was clicked
      $(this).css('background-image', doorImage); 
  
  });
  </code></pre>