Javascript图像幻灯片放映_Javascript

Javascript图像幻灯片放映

javascript

Javascript图像幻灯片放映,javascript,Javascript,我正在编写一个使用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(); im

我正在编写一个使用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>


var image1=新图像（）；
image1.src=“1.jpg”；
var image2=新图像（）；
image2.src=“1_1.jpg”；
var image3=新图像（）；
image3.src=“1_1_1.jpg”；
var阶跃=1；
函数slideit（）{
document.images.slide.src=eval（“image”+step+“.src”）；
如果（步骤<3）
台阶++
其他的
步骤=1
setTimeout（“slideit（）”，2500）；
}
slideit（）；
函数更改img（）
{
slideit（）；
}

它工作正常，但每次我点击图像时速度都会增加。。知道问题出在哪里吗？

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

var阶跃=1；
无功定时器；
函数slideit（）{
document.images.slide.src=eval（“image”+step+“.src”）；
如果（步骤<3）
台阶++
其他的
步骤=1
定时器=设置超时（“slideit（）”，2500）；
}
slideit（）；
函数更改img（）{
清除超时（计时器）
slideit（）；
}

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

类似jQuery这样的第三方库已经完成了这类工作。。。我建议你去看看。。。当然，除非您希望完成学习过程，否则您的控制台是否会输出任何错误？如果您需要帮助，您需要提供比“它不工作”更详细的信息。它是不是出错了？幻灯片放映没有显示任何内容吗？图像没有转换吗？@Pheonixblade9我已经编辑了这个问题@ElGuapo我是javascript新手，对jquery一无所知！你能分享一些链接吗？谢谢！但是每次点击图片时，幻灯片的播放速度都会增加。你必须将“setTimeout”设置为一个全局变量。。然后，当有人单击“changeimg”时，您需要调用clearTimeout（该变量）并在slideit（）中重置它。@ElGuapo感谢head的帮助up@user3788040我更新了，很抱歉最初的反应太匆忙了。没问题。。。很乐意帮忙

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();
        }