html - moving elements in and out of a viewable div area on onmouseover (having problems with javascript arrays)

Question

I have a <div> that has a bunch more images then can fit into the view so i've used the overflow: hidden; css attribute to hide the rest. Now I have a button that i would like to "scroll" to the next set of images which are currently hidden when onmouseover of arrow image. However I am unsure of how I can go about doing this! Im looking for css or javascript solution not a jquery plugin. Here is what i currently have my page which looks like this http://ec2-23-22-226-163.compute-1.amazonaws.com/ and i would like to have it function like this http://ec2-23-22-226-163.compute-1.amazonaws.com/home.php

Anything I have left unclear i'd be glad to clarrify thanks for any advice or tips on how i can get this done

Im thinking there may be a way to do it with css purely (ideal) or deep html dom manipulation with javascript.

---

Update Okay so i've continued attempting how to figure this out, But im stuck again I have this java script (below) what im basically doing is removing the first element in the div and putting it into a second div with a visibilty set to hidden (im placing it into a second div so I don't i can put them back in when scrollingleft once i figure this out)however on moving the second element in the <div> i get an error Uncaught Error: NotFoundError: DOM Exception 8 from what i can tell this is caused by genreNum[rownum]++ (not actually updating so a 0 should become a 1 but does not) entirely sure why this would not work it works as this myarray[0]++ does? any help would be greatly be appreciated you can verify this happening at http://ec2-23-22-226-163.compute-1.amazonaws.com/ where ive also added alert's to code displaying genreNum[rownum]+"---"rownum to reasure this is the problem

 var timer_on=0;
 var t;
 var genreNum;

function scrollright(genre, id, rownum){
 var seriesID = genre + "_" + genreNum[rownum];
 var moveTo = "invisible" +genre;
 var series = document.getElementById(seriesID);
 var hideTo = document.getElementById(moveTo);
 var row = document.getElementById(rownum);
 series.style.visibility = "hidden";
 hideTo.appendChild(series);
 row.removeChild(series);
 genreNum[rownum]++;
 if (genreNum[rownum] == id){
   num=0;
 }
 t=setTimeout(function() {scrollright(genre,id,rownum)},1000); // move one element evry    1 second
}

function makescroll(genre, id, rownum){
  if(!timer_on){
    timer_on=1;
    scrollright(genre, id, rownum); // move one element evry 1 second
  }
 }

function stopscroll(genre, id){
  clearTimeout(t);
  timer_on=0;
 }
 function arrayStartup(){
  var rows =  document.getElementsByClassName("series_row");
  genreNum = new Array();
  for (i=0; i<rows.length ; i++){
      genreNum[i]=0;
   }

}

Answer 1

This is one method of doing it:

Html:

<div style="height:100px;width:250px;overflow:hidden;border:1px solid black;">
    <div id="inner" style="left:0;height:100px;width:500px;position:relative;">
        <div style="width:100px;height:100px;float:left;border:1px solid red">image1</div>
        <div style="width:100px;height:100px;float:left;border:1px solid red">image2</div>
        <div style="width:100px;height:100px;float:left;border:1px solid red">image3</div>
        <div style="width:100px;height:100px;float:left;border:1px solid red">image4</div>
    </div>
</div>
<a href="javascript:;" onclick="doMove(200)">move left</a>
<a href="javascript:;" onclick="doMove(-200)">move right</a>

javascript:

function doMove(pix){
    var inner = document.getElementById("inner");
    var currentLeft = parseInt(inner.style.left);
    var newLeft = currentLeft+pix;
    inner.style.left = newLeft+"px";
}

jsfiddle : jsfiddle

explanation:

1. top div has overflow hidden
2. inner div contains image with position relative
3. javascript will change style.left of inner div and it will give an impression of scrolling page horizontally