Question

我试过这段代码..但是当图像发生变化时，它显示不正确.. alt图像（显示一个小的破碎图像）..

我试过把var step = 1;在函数之前作为全局变量..但它仍然不起作用..我甚至尝试过document.images.slide.src =＆＃34; images / pentagg.jpg＆＃34 ;;

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

Answer 1

你做错了什么。您只能通过将步骤变量声明为局部变量来使步骤变量在 slideit（）函数中可用。因此，每次使用 setTimeOut 调用函数时，都会创建一个新的步骤变量。这导致永远不会改变你的初始形象。

我更喜欢使用 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

Answer 2

你不能将图像变量作为参数传递出去。它带了一个名为＆＃34; image1.src＆＃34;。

的字符串

尝试将它们放入数组中，然后使用步骤变量获取索引。

使用javascript中的幻灯片显示..图像更改但未正确显示

2 个答案: