Fatal编程技术网

Javascript简单图像滑块

javascript html image

Javascript简单图像滑块,javascript,html,image,slider,Javascript,Html,Image,Slider,我想有一个简单的图片滑块。该滑块应位于网站的标题中，并应在一个小延迟之间切换。我希望它简单，并命名为图片1.jpg，2.jpg等，他们在文件夹“bilder” 我尝试了一些，以下是我的结果： <!DOCTYPE html> <html> <head> <title>Page Title</title> <script type="text/javascript"> function picture_slider()

我想有一个简单的图片滑块。该滑块应位于网站的标题中，并应在一个小延迟之间切换。我希望它简单，并命名为图片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>


页面标题
函数图片_滑块（）{
设置间隔（开关_picture（），3000）；
返回false；
}
功能开关_图片（）{
对于（var i=1；i<7；i++）{
var pfad=“bilder/”+i+”.jpg”；
document.getElementById（“bild”）.src=pfad；
i++；
};
返回false；
}
我猜我做错了什么，因为我的浏览器只显示一张图片，没有切换。

在您对所有图像进行迭代（
for
loop）的每个循环上，生成最新的一个。也只能使用
切换图片
（而不是
切换图片（）
）

注意：为该计数器创建一个
0.jpg
图像：

我在这里发现了一些东西：


页面标题
var i=0；
变量图像=[“1”、“2”、“3”、“4”、“5”、“6”、“7”]
函数图片_滑块（）{
设置间隔（开关图片，2000年）；
}
功能开关_图片（）{
i++；
如果（i>=images.length）{
i=0；
};
var bild=document.getElementById（“bild”）；
bild.src=“bilder/”+images[i]+.jpg”；
}
浏览器现在只显示图片“0”。对不起，这么晚才回答，我去了市场。如果我这样做，我会得到这个错误：“UncaughtTypeError:无法设置nulltest_2.html:16 switch_picture的属性'src'”@c00L看，我已经向您发布了您需要使用的确切代码示例，以及一个workign演示，以了解如何使用它。应该很容易设置7行JS。 
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";
}

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