居中 Javascript 幻灯片放映？

Question

我是编码方面的初学者，我遇到的大多数答案都让我一头雾水。我必须使我的幻灯片工作（它正在工作）的唯一代码是：

<script type="text/javascript">
<!-->
var image1=new Image()
image1.src="congo.jpg"
var image2=new Image()
image2.src="snow.jpg"
var image3=new Image()
image3.src="mekong.jpg"
//-->
</script>

在正文部分：

<img src="congo.jpg" name="slide" width="400" height="300">
<script type="text/javascript">
<!--
var step=1
function slideit(){
document.images.slide.src=eval("image"+step+".src")
if(step<3)
step++
else
step=1
setTimeout("slideit()",2500)
}
slideit()
//-->
</script>

我不知道如何居中或放置边距。我尝试将它放在一个 table 中，这样我就可以操纵它的位置，但这是行不通的（假设它不是那么容易），并尝试用一个标签来居中，但我只是在拉弦！添加 margin/center 的正确方法是什么？谢谢。

Answer 1

您只需将 <div> 放在幻灯片周围，然后将 text-align:center 应用到 div。

<div style="text-align:center;">
    <img src="congo.jpg" name="slide" width="400" height="300">
</div>

快速粗略的示例：https://jsfiddle.net/pbsz9spu/

Answer 2

/*css*/

.slideshowContainer {
position:relative;
width:400px;
height:300px;
margin:0 auto;
clear:both;
}



<!-- HTML -->


<div class="slideshowContainer">
<img src="congo.jpg" name="slide" width="400" height="300">
</div>

始终尝试使用 css 样式表或在页面头部设置您的 div 样式。尽量避免像 div style="" 这样的内联样式。这是不好的做法。

居中 Javascript 幻灯片放映？

Center Javascript Slideshow?

html

javascript

css

slideshow