Changing background

by Ivan Gerasimenko

HTML

<div id="headbar" onload="photoA()">

<div class="headbar-title">THE ALL NEW 14 RANGE</div>

<div class="button">FIND OUT MORE</div>
    <input type='button' value='stop interval' id='stopInterval' />

CSS

#headbar {
  height: 50vh;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin-top: 60px;
  display: flex;
  -webkit-flex-flow: column wrap;
  justify-content: center; 
  align-items: center;
  color: #eee;
}

JavaScript

var imageCount = 1;
var total = 6;
console.log('load');
var intervalId = window.setInterval(function photoA() {
    console.log('change img');  
    var headbar = document.getElementById('headbar');
    imageCount = imageCount + 2;
    if(imageCount > total){imageCount = 1;}   
    /*headbar.style.backgroundImage = "url('..img/img"+ imageCount +".JPG') no-repeat center center";*/
    headbar.style.background = "#f3" + imageCount + "3f3";
},1000);

$('#stopInterval').on('click', function() { clearInterval(intervalId); });