Question

我正在使用此HTML代码来获取选框效果，但第一张图像和最后一张图像之间存在差距。如何使用javascript删除此空白区域以获得连续的选框效果。

＆＃13;

var Obj = null;
var animate ;
function init(){
  Obj = document.getElementById('mover');
  Obj.style.position= 'relative'; 
  Obj.style.left = '-600px';
}
function moveRight(){
  Obj.style.left = parseInt(Obj.style.left) + 1 + 'px';
  animate = setTimeout(moveRight,20); 
  if(parseInt(Obj.style.left)>800)
    Obj.style.left = '-600px';
}
function stop(){
  clearTimeout(animate);
  Obj.style.left = '-600px'; 
}
window.onload =init;

＆＃13;

#wrapper { 
  width:800px; 
  overflow: hidden; 
}
#mover{
  width:10000px;
  overflow: hidden;
}
img{
  padding: 0px;
  margin: -2px;
  display: inline;
}

＆＃13;

<html>
  <head>
    <title>JavaScript Animation</title>       
  </head>
  <body>
    <form>
      <div id="wrapper">
        <div id="mover">
          <img id="myImage" src="http://lorempixel.com/g/200/150/cats/1" width="200" height="150" />
          <img id="myImage" src="http://lorempixel.com/g/200/150/cats/2" width="200" height="150" />
          <img id="myImage" src="http://lorempixel.com/g/200/150/cats/3" width="200" height="150" />
        </div>
      </div>
      <p>Click the buttons below to handle animation</p>
      <input type="button" value="Start" onclick="moveRight();" />
      <input type="button" value="Stop" onclick="stop();" />
    </form>
  </body>
</html>

＆＃13;

此外，如果还有其他方法可以更有效地执行此任务，请告诉您。

Answer 1

这是对您的图片使用display: inline的结果 - 所有空白都变得可见，包括图片之间的换行符。

有三个好的解决方案。第一种是删除HTML中图像之间的换行符，尽管这可能不太理想或不实用：

<div id="mover"><img id="myImage" src="images/building3.jpg" width="330" height="150"><img id="myImage" src="images/building5.jpg" width="330" height="150"><img id="myImage" src="images/building2.jpg" width="330" height="150"></div>

其次，由于您只是查看图像，因此可以添加：

#mover { font-size: 0; }

通过将空白展平为零来消除空白。但是，如果你可以在以后添加文字和图像，它也会被展平为零，你必须再次明确地将它设置为更大的字体。

或者第三，你可以使用浮点数：

#mover { overflow: auto; }
#mover img { float: left; }

如何在javascript中获得连续图像选框效果？

1 个答案: