Change image on mouse x

by Marius Jopen

HTML

<div id="log"></div>
<div id="log2"></div>

<div id="container">
  <img id="image" src="http://mariusjopen.com/files/images/image-1.gif" />
</div>

<div id="images">
  <img class="images" id="img-1" src="http://mariusjopen.com/files/images/image-1.gif" />
  <img class="images" id="img-2" src="http://mariusjopen.com/files/images/image-2.gif" />
  <img class="images" id="img-3" src="http://mariusjopen.com/files/images/image-3.gif" />
  <img class="images" id="img-4" src="http://mariusjopen.com/files/images/image-4.gif" />
  <img class="images" id="img-5" src="http://mariusjopen.com/files/images/image-5.gif" />
  <img class="images" id="img-6" src="http://mariusjopen.com/files/images/image-6.gif" />
</div>

CSS

#container img {
  position: fixed;
  height: 100%;
  width: auto;
  top: 50px;
}

#images {
  display: none;
}

JavaScript

$(document).on("mousemove", function(event) {

  $(".images").each(function(i) {

    var i = ++i;
    var imagestotal = i - 1;
    var mousepos = event.pageX;
    var widthwindow = $(document).width();
    var currentimage = Math.round(mousepos / widthwindow * imagestotal + 1);

    $("#log").text(
      " imagestotal: " + imagestotal +
      " mousepos: " + mousepos +
      " widthwindow: " + widthwindow +
      " currentimage: " + currentimage
    );

    var img = "http://mariusjopen.com/files/images/image-"+currentimage+".gif";
    $('#image').attr("src", img);

  })


});