relekang/images.html

## images.html
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        var id,
          image = $("#image"),
          current = 0,
          urls = [
            "http://upload.wikimedia.org/wikipedia/commons/4/45/Toronto_skyline_sailboat-modified.jpg",
            "http://www.charterworld.com/news/wp-content/uploads/2011/05/Sailing-Yacht-R%C3%A1n-IV-Audi-2011-TP52-Med-Cup-Challenge.jpg",
            "http://www.mrwallpaper.com/wallpapers/Sailboat-Draw.jpg",
            "http://www.mrwallpaper.com/wallpapers/sailboat-lake-sunset.jpg",
          ],
          changeImage = function () {
            image.css('background-image', 'url(' + urls[current] + ')');
            if (current === urls.length - 1){
              current = 0;
            } else {
              current += 1;
            }
          };

        image.css({ "height": document.height });

        id = setInterval(changeImage, 4000);
     });
    </script>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
            background: black;
        }
        #image {
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background-position: 50% 50%;
            background-size: cover;
        }
  </style>
  </head>
  <body>
  	<div id="image"></div>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
	var id,
	image = $("#image"),
	current = 0,
	urls = [
	"http://upload.wikimedia.org/wikipedia/commons/4/45/Toronto_skyline_sailboat-modified.jpg",
	"http://www.charterworld.com/news/wp-content/uploads/2011/05/Sailing-Yacht-R%C3%A1n-IV-Audi-2011-TP52-Med-Cup-Challenge.jpg",
	"http://www.mrwallpaper.com/wallpapers/Sailboat-Draw.jpg",
	"http://www.mrwallpaper.com/wallpapers/sailboat-lake-sunset.jpg",
	],
	changeImage = function () {
	image.css('background-image', 'url(' + urls[current] + ')');
	if (current === urls.length - 1){
	current = 0;
	} else {
	current += 1;
	}
	};

	image.css({ "height": document.height });

	id = setInterval(changeImage, 4000);
	});
	</script>
	<style type="text/css">
	body{
	margin: 0;
	padding: 0;
	background: black;
	}
	#image {
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	}
	</style>
	</head>
	<body>
	<div id="image"></div>
	</body>
	</html>