moviendo elementos dentro y fuera de un área div visible en onmouseover (teniendo problemas con las matrices javascript)

Tengo un

que tiene muchas más imágenes que pueden caber en la vista, así que he usado el overflow: hidden; css atributo para ocultar el rest. Ahora tengo un botón que me gustaría “desplazarme” al siguiente conjunto de imágenes que están actualmente ocultas cuando está en uso la imagen de la flecha. Sin embargo, no estoy seguro de cómo puedo hacer esto. Estoy buscando una solución css o javascript, no un plugin jquery. Esto es lo que tengo actualmente en mi página que se ve así http://ec2-23-22-226-163.compute-1.amazonaws.com/ y me gustaría que funcione de esta manera http: // ec2- 23-22-226-163.compute-1.amazonaws.com/home.php

Todo lo que quede sin aclarar me gustaría aclarar gracias por cualquier consejo o consejo sobre cómo puedo hacer esto.

Estoy pensando que puede haber una manera de hacerlo con css puramente (ideal) o profunda manipulación html dom con javascript.


Actualice bien, así que he seguido intentando cómo resolver esto, pero estoy atascado nuevamente. Tengo este script java (a continuación) lo que básicamente hago es eliminar el primer elemento en el div y ponerlo en un segundo div con una visibilidad configurada para oculto (lo estoy colocando en un segundo div así que no puedo volver a ponerlos cuando me desplazo una sola vez). Sin embargo, al mover el segundo elemento en el

obtengo un error. Uncaught Error: NotFoundError: DOM Exception 8 de lo que puedo decir esto es causado por genreNum[rownum]++ (no actualizando realmente por lo que un 0 debería convertirse en 1 pero no lo hace) completamente seguro de por qué esto no funcionaría, funciona como lo hace myarray [0] ++? cualquier ayuda sería muy apreciada, puedes verificar que esto suceda en http://ec2-23-22-226-163.compute-1.amazonaws.com/ donde también he añadido alertas al código que muestra genreNum[rownum]+"---"rownum para asegurar que este es el problema

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

Este es un método de hacerlo:

Html:

 
image1
image2
image3
image4
move left move right

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

explicación:

  1. div superior tiene desbordamiento oculto
  2. div interno contiene imagen con posición relativa
  3. javascript cambiará style.left de div interno y dará una impresión de desplazamiento de página horizontalmente