Javascript 如何使此幻灯片不是自动播放，而是单击以更改图像_Javascript_Html

Javascript 如何使此幻灯片不是自动播放，而是单击以更改图像

javascript html

Javascript 如何使此幻灯片不是自动播放，而是单击以更改图像,javascript,html,Javascript,Html,这段代码是一个自动幻灯片，我想让它这样当你点击下一步，它会转到下一个图像和返回到上一个图像我当前的代码： <head> <script type="text/javascript"> var image1 = new Image() image1.src = "http://www.adactushousing.co.uk/images/upload/coverImage/Local%20Offer%20CCH.jpg" var image2 = new Image()

这段代码是一个自动幻灯片，我想让它这样当你点击下一步，它会转到下一个图像和返回到上一个图像

我当前的代码：

<head>
<script type="text/javascript">
var image1 = new Image()
image1.src = "http://www.adactushousing.co.uk/images/upload/coverImage/Local%20Offer%20CCH.jpg"
var image2 = new Image()
image2.src = "http://www.northantspfg.co.uk/resources/uploads/news/wordal13-021142.JPG"
var image3 = new Image()
image3.src = "http://hmstack.files.wordpress.com/2011/07/swimming-for-the-disabled.jpg"
var image4 = new Image()
image4.src = "http://www.northantspfg.co.uk/resources/uploads/news/HiResLocalOffer13-041205.jpg"
</script>
</head>


    <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<4)
            step++;
        else
            step=1;
        setTimeout(\"slideit()\",2500);
    }
    slideit();
    </script>

您在页面加载时调用函数slideit，这是该函数自动工作的原因，如果这样做，它应该工作：

<button onclick="slideit()">Next image</button>

<script type=\"text/javascript\">
var step=1;
function slideit()
{
    document.images.slide.src = eval(\"image\"+step+\".src\");
    if(step<4)
        step++;
    else
        step=1;
}
</script>

永远不要使用。eval。如果您需要它，这意味着您的代码有问题。我要将其更改为什么？您知道如何增加/减少步骤，那么在单击事件处理程序上执行此操作而不是使用超时有什么困难？另外，为什么要转义标记中的所有引号？您可以将所有图像放入一个数组中，并按索引返回内容。