如何在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