中心Javascript幻灯片？

问题描述：

我在编码方面很初学，而且我遇到的大部分答案都直接超出了我的头。我必须让我的幻灯片工作（这是工作）的唯一代码：中心Javascript幻灯片？

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

我不知道如何中心这或将在保证金。我试着把它放在一张桌子里，这样我就可以操纵它的位置，这不起作用（假设它不那么容易），并试着用标签来中心化，但我只是扯着绳子！什么是添加保证金/中心的正确方法？谢谢。

你可以尝试添加文本对齐中心到图像标记的父元素。 –

答

你只需要把<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/

这很有道理。我认为这是我的想法，但是我现在还没有结束尝试。像魅力一样工作！谢谢吨！ – Jessica

您还应该在这里阅读其他答案。避免内联样式。我只用它作为例子。如果有的话，将样式放入你的CSS样式表中。 – PaddyMack

答

/*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幻灯片？

相关推荐