Question

此代码是一个自动幻灯片显示，我想这样做，当你点击下一个它转到下一个图像然后回到上一个图像

我目前的代码：

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

Answer 1

你在页面加载时调用函数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>

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

1 个答案: