Question

我正在研究使用javascript创建图像幻灯片的代码。我希望图像在一定的时间间隔后以及点击时连续变化。这就是我做的 -

<html>
<head>


<script type="text/javascript">
var image1 = new Image();
image1.src="1.jpg";
var image2 = new Image();
image2.src="1_1.jpg";
var image3 = new Image();
image3.src="1_1_1.jpg";
</script>



<img src="1.jpg" name="slide" width="200" height="200" onclick="changeimg()">
<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();

    function changeimg()
        {
            slideit();
        }
    </script>

    </head>

    </html>

它工作正常，但每次点击图片时速度都会提高..有什么问题在哪里？

Answer 1

更改图像只需要调用slideit函数，需要清除超时。（编辑：最初忘记加倍超时）

var step = 1;
var timer;

    function slideit() {
        document.images.slide.src = eval("image" + step + ".src");

        if (step < 3)
            step++
        else 
            step = 1

        timer = setTimeout("slideit()", 2500);
    }


    slideit();

    function changeimg(){
            clearTimeout(timer)
            slideit();
        }

为了将来的可重用性，更好的方法是创建一个图像数组，然后使用类似的逻辑来循环。

Javascript幻灯片放映图像

1 个答案: