Javascript 如何在html中创建图像幻灯片？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13860671/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create image slideshow in html?
提问by greenthunder
I wanna make image slideshow on my web, here's my code
我想在我的网站上制作图片幻灯片，这是我的代码
<head>
<script type="text/javascript">
var image1 = new Image()
image1.src = "images/pentagg.jpg"
var image2 = new Image()
image2.src = "images/promo.jpg"
</script>
</head>
<body>
<p><img src="images/pentagg.jpg" width="500" height="300" name="slide" /></p>
<script type="text/javascript">
function slideit()
{
var step=1;
document.images.slide.src = eval("image"+step+".src")
if(step<2)
step++
else
step=1
setTimeout("slideit()",2500)
}
slideit()
</script>
</body>
Why it's not working? I've put image I want in images folder
为什么它不起作用？我已经把我想要的图像放在图像文件夹中
回答by Jem
- Set var step=1 as global variable by putting it above the function call
- put semicolons
- 将 var step=1 设置为全局变量，将其放在函数调用上方
- 放分号
It will look like this
它看起来像这样
<head>
<script type="text/javascript">
var image1 = new Image()
image1.src = "images/pentagg.jpg"
var image2 = new Image()
image2.src = "images/promo.jpg"
</script>
</head>
<body>
<p><img src="images/pentagg.jpg" width="500" height="300" name="slide" /></p>
<script type="text/javascript">
var step=1;
function slideit()
{
document.images.slide.src = eval("image"+step+".src");
if(step<2)
step++;
else
step=1;
setTimeout("slideit()",2500);
}
slideit();
</script>
</body>
回答by maximus ツ
Instead of writing the code from the scratch you can use jquery plug in. Such plug in can provide many configuration option as well.
您可以使用 jquery 插件，而不是从头开始编写代码。这样的插件还可以提供许多配置选项。
Here is the one I most liked.
这是我最喜欢的一个。
