Question

我想要一个简单的图片滑块。该滑块应位于网站的标题中，并应在较小的延迟之间切换。我想要它简单并将图片命名为1.jpg，2.jpg等等，它们位于“bilder”文件夹中。

我尝试了一下，这是我的结果：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script type="text/javascript">

    function picture_slider(){
        setInterval( switch_picture(), 3000 );
        return false;
    }

    function switch_picture() {
        for ( var i = 1; i < 7 ; i++ ) {     
            var pfad = "bilder/" + i + ".jpg";
            document.getElementById("bild").src = pfad; 

            i++;
        };
        return false;
    }
</script>
</head>
<body onload="picture_slider();">
    <img id="bild" src="" />
</body>
</html>

我想，我做错了，因为我的浏览器只显示一张图片而且没有切换。

Answer 1

<强> jsBin demo

在每个循环中，您将对所有图像进行迭代（for循环），从而生成最新的图像。也只能使用switch_picture（而不是switch_picture()）。

_{P.S：为此计数器创建一个0.jpg图像：}

function picture_slider(){
    setInterval( switch_picture, 2000 ); // corrected removing "()"
}

var bild = document.getElementById("bild")
var i = 0; // Start from image 0.jpg

function switch_picture() { // don't iterate a loop in here!
  bild.src = "bilder/"+ (i++ % 7) +".jpg";
}

Answer 2

我在这里找到了一些东西：Stackoverflow Link

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script type="text/javascript">

var i = 0;


var images = [ "1", "2", "3", "4", "5", "6", "7"]

function picture_slider(){
    setInterval( switch_picture, 2000 );
}

function switch_picture() {

    i++;

    if ( i >= images.length ) {

        i = 0;
    };

    var bild = document.getElementById("bild");
    bild.src = "bilder/" + images[i] + ".jpg"; 

}

</script>
</head>
<body onload="picture_slider();">
<img id="bild" src="" />
</body>
</html>

Javascript简单图像滑块

2 个答案: