Javascript 简单的图像滑块

Question

我想要一个简单的图片滑块。该滑块应该在网站的 header 中，并且应该在一个小的延迟之间切换。我想要它简单，并将图片命名为 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

我在这里找到了一些东西：Whosebug 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>

Answer 3

// 1. images need to store in an Array
const images = [
  "img/pic-1.jpg",
  "img/pic-2.jpg",
  "img/pic-3.jpg",
  "img/pic-4.jpg",
  "img/pic-5.jpg",
  "img/pic-6.jpg",
  "img/pic-7.jpg"
];

// 7. getElementById by calling, store globally (do not call inside loop/setInterval performance will loose)
const imgElement= document.getElementById("slider-image");

// 2. set initial value for array index
let imgIndex = 0;

// 3. create setInterval()
const sliderInterval = setInterval(() => {
  // 6. check condition if length is finished then start again from 0
  if (imgIndex >= images.length) { // use >= because index start from 0 and length start from 1, if use just > then last element will be undefined
    imgIndex = 0;
  }
  // 5. testing
  // console.log(imgIndex);

  // 9. Dynamically change image src
  const imgUrl = images[imgIndex];
  imgElement.setAttribute('src', imgUrl);
  // 4. increase value by 1
  imgIndex++;
}, 1000);

Javascript 简单的图像滑块

Javascript simple image slider

html

javascript

image

slider