如何在JavaScript中获得连续的图像字幕效果？

Question

我正在使用此HTML代码来获得字幕效果，但是第一个和最后一个图像之间存在间隙。 我如何使用JavaScript删除此空白区域以获得连续字幕效果。

 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;

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

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

另外，如果还有其他方法可以更有效地完成此任务，请告知。

Answer 1

这是使用display: inline的结果display: inline图像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 个解决方案

解决方案1
0 已采纳 2015-01-27 19:25:49

如何在JavaScript中获得连续的图像字幕效果？

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-01-27 19:25:49

解决方案1
0 已采纳 2015-01-27 19:25:49