javascript - onmouseover で表示可能な div 領域に要素を出し入れする (javascript 配列に問題がある)

Question

ビューに<div>収まるより多くの画像があるので、overflow: hidden;css属性を使用して残りを非表示にしました。これで、矢印画像をマウスオーバーしたときに現在非表示になっている次の画像セットに「スクロール」したいボタンがあります。しかし、どうすればこれを行うことができるかわかりません！jquery プラグインではなく、css または javascript ソリューションを探しています。これが現在、http://ec2-23-22-226-163.compute-1.amazonaws.com/のようなページを持っているもので、このhttp ://ec2-のように機能させたいと思います23-22-226-163.compute-1.amazonaws.com/home.php

不明な点がある場合は、これを行う方法についてのアドバイスやヒントを明確にしていただければ幸いです

私は、純粋にcss（理想的）またはjavascriptを使用した深いhtml dom操作でそれを行う方法があるかもしれないと考えています。

---

更新divわかり ましたので、これを理解する方法を引き続き試みましたが、私はこの Java スクリプト (以下) を持っていますdiv。div私はそれを秒に置くので、左にスクロールする<div>ときにそれらを元に戻すUncaught Error: NotFoundError: DOM Exception 8ことはできgenreNum[rownum]++ません.したがって、 aは a0 になるはずですが、そうで1はありません)なぜこれが機能しないのか完全にはわかりませんが、この myarray[0]++ のように機能しますか? http://ec2-23-22-226-163.compute-1.amazonaws.com/でこれが起こっていることを確認できます 。genreNum[rownum]+"---"rownumここで、これが問題であることを再確認するために、コード表示にアラートも追加しました

 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;
   }

}