gpt4 book ai didi

javascript - 使用javascript在html中幻灯片放映..图像发生变化但无法正确显示

转载 作者:行者123 更新时间:2023-11-28 19:33:15 27 4
gpt4 key购买 nike

我尝试了这段代码..但是当图像更改时它无法正确显示..替代图像(显示一个小的破损图像)..

我尝试将 var step=1;在函数作为全局变量之前..但它仍然不起作用..我什至尝试了 document.images.slide.src = "images/pentagg.jpg";

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

最佳答案

你做错了什么。只需将 step 变量声明为局部变量,即可在 slideit() 函数中使用它。因此,每次使用 setTimeOut 调用该函数时,都会创建一个新的 step 变量。这会导致永远不会改变您的初始图像。

我更喜欢这是使用 setTimeOut 调用 slideit 函数的适当方法

setTimeout(function(){slideit()},2500);

就是这样。这是完整的代码:

HTML:

<img src="http://picpuddle.com/wp-content/uploads/2014/06/cute-cartoons-21.jpg" width="500" height="300" name="slide" />

javaScript:

var step=1;
var image1 = new Image();
image1.src = "http://picpuddle.com/wp-content/uploads/2014/06/cute-cartoons-21.jpg";
var image2 = new Image();
image2.src = "http://www.hdwallpapers-3d.com/wp-content/uploads/2014/03/Cartoon-6.jpg";

function slideit()
{
//This looks better though
//document.getElementsByName("slide")[0].src = eval("image"+step+".src");
document.images.slide.src = eval("image"+step+".src");

if(step<2)
step++;
else
step=1;
setTimeout(function(){slideit()},2500);
}
slideit();

jsFiddle

关于javascript - 使用javascript在html中幻灯片放映..图像发生变化但无法正确显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26358411/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com