changing background

by omj1

HTML

<a href="#" id="slide">Paintings</a>
		<a href="#" class="one">About</a>
		<a href="#" class="two" id="slide">Contact</a>
    
      <div class="content hide" id="one">
			 <h1>Lorem Impsum 1</h1>
		  </div>
		   <div class="content hide" id="two">
			   <p>lorem 2
				 </p> 
		  </div>
      
      <div class="div1">
sdcsdf
		</div>

CSS

.div1 {
	position: absolute;
	width: 200px;
	height: 200px;
  	background-repeat: no-repeat;
  	background-position: center;
  	background-size: cover;
    border: 1px solid black;
}
.hide {
  visibility: hidden;
}

JavaScript

$(window).load(function() {
  var i =0;
  var images = ['http://katet.eu/images/koles-3-ok.png', 'http://katet.eu/images/koles-3.png'];
  var image = $('.div1');
  var ImgPath = "" //The file path to your images
                //Initial Background image setup
  image.css('background-image', 'url(http://katet.eu/images/koles-3.png)');
	 
                //Change image at regular intervals
  setInterval(function(){  
   image.fadeOut(1000, function () {
   image.css('background-image', 'url('+ images [i++] +')');
   image.fadeIn(1000);
   });
   if(i == images.length)
    i = 0;
  }, 5000); 
 });
 
  $(document).ready(function(){

        // Optional code to hide all divs
        $(".content").hide();
          // Show chosen div, and hide all others
        $("a").click(function (e) {
            $("#" + $(this).attr("class")).removeClass("hide").fadeIn("slow").siblings('.content').hide();
        });

    });