0

我有一个<div>有更多图像然后可以放入视图中，所以我使用overflow: hidden;css 属性来隐藏其余部分。现在我有一个按钮，我想“滚动”到下一组图像，当鼠标悬停在箭头图像上时这些图像当前隐藏。但是我不确定我该怎么做！我正在寻找 css 或 javascript 解决方案，而不是 jquery 插件。这是我目前的页面，看起来像这样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 操作。

更新 好的，所以我继续尝试如何解决这个问题，但是我再次卡住了我有这个java脚本（如下）我基本上做的是删除第一个元素div并将其放入第二个元素，并将其div设置为隐藏（我把它放在一秒钟div内，所以一旦我弄清楚这一点，我就不能在向左滚动时把它们放回去）但是在移动第二个元素时，<div>我得到一个错误Uncaught Error: NotFoundError: DOM Exception 8，我可以告诉这是由genreNum[rownum]++（实际上不是更新）引起的所以 a0 应该变成 a1但不）完全确定为什么这不起作用它像 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;
   }

}
4

1 回答 1

1

这是一种方法：

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

解释：

  1. 顶部 div 已隐藏溢出
  2. 内部 div 包含具有相对位置的图像
  3. javascript 将改变内部 div 的 style.left 并且它会给人一个水平滚动页面的印象
于 2013-04-14T17:16:25.943 回答