在幻灯片放映中添加next和prev按钮

Question

HTML

<img id="myImg"src="slide/2.jpg" name="img" width="1000" height="250"/>

JS

var image1 = new Image();
image1.src = "slide/23.jpg";

var image2 = new Image();
image2.src = "slide/7.jpg";

var image3 = new Image();
image3.src = "slide/4.jpg";

var image4 = new Image();
image4.src = "slide/5.jpg";

var image5 = new Image();
image5.src = "slide/6.jpg";



var step = 1;

function slideImages() {
    if (!document.images) {
        return
        document.images.img.src = eval("image" + step + ".src");
    }
    if (step < 5) {
        step++;
    } else {
        step = 1;
        setTimeout("slideImages()", 3000);
    }
}

slideImages();

Answer 1

此行永远不会执行。

setTimeout("slideImages()", 3000);

因为您只使用slideImages调用step = 1函数一次，因此它不会通过其他情况。

试试这个。

var image1 = new Image();
image1.src = "slide/23.jpg";

var image2 = new Image();
image2.src = "slide/7.jpg";

var image3 = new Image();
image3.src = "slide/4.jpg";

var image4 = new Image();
image4.src = "slide/5.jpg";

var image5 = new Image();
image5.src = "slide/6.jpg";



var step = 1;

function slideImages() {
    console.log('here' + step);
    if (!document.images) {
        return
    }
    document.images.img.src = eval("image" + step + ".src");
    if (step < 5) {
        step++;
    } else {
        step = 1;
    }
    setTimeout(slideImages, 3000);
}

slideImages();