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

Question

I am using this HTML code to get marquee effect, but there is gap between first and last image. 我正在使用此HTML代码来获得字幕效果，但是第一个和最后一个图像之间存在间隙。 How can i remove this white space to get continuous marquee effect using javascript. 我如何使用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>

Also, if there is any other method for doing this task more efficiently, please do tell. 另外，如果还有其他方法可以更有效地完成此任务，请告知。

Answer 1

This is a consequence of using display: inline with your images -- all whitespace becomes visible, including the newlines between your images. 这是使用display: inline的结果display: inline图像display: inline -所有空白都可见，包括图像之间的换行符。

There are three good solutions. 有三个好的解决方案。 The first is to remove the newlines between your images in the HTML, although this may not be desirable or practical: 第一个方法是删除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>

Second, since you're just viewing images, you can add: 其次，由于您只是查看图像，因此可以添加：

#mover { font-size: 0; }

Which will eliminate the whitespace by flattening it to nothing. 通过将其展平为零将消除空白。 But if you might add text along with the images later, it will also be flattened to nothing, and you'll have to explicitly set it to a larger font again. 但是，如果您以后可能会在文本和图像中添加文本，则文本也将被展平为零，并且您必须再次将其显式设置为更大的字体。

Or third, you can use floats instead: 第三，您可以改用浮点数：

#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