javascript中的图像转换器

Question

我尝试了很多不同的方法来实现它。我已经能够使用按钮来更改图像，但是当我添加其余代码以使其自动化时，我无法使其工作。这是我的代码：

build_all

那就是JavaScript。这是html：

window.onload = function start() {
console.log("started");
slide();
}

function slide() {
console.log("Slide started");
var picNum = 1;
    contStyle = document.getElementById('imgTrans').src;
setInterval(function() {
        if(picNum === 4){
        picNum = 1;
    }
    else{
    switch(picNum){
case 1:
contStyle="images/mints.jpg";
picNum++;
break;
case 2:
contStyle="images/cookies.jpg";
picNum++;
break;
case 3:
contStyle="images/candy.jpg";
picNum++;
break;
case 4:
contStyle="images/cake.jpg";
picNum++;
break;
default:
contStyle="images/cake.jpg";
 }
    }
}, 3000);
 }

我试图在几个不同的图像之间进行切换。用于网站的主页。（如幻灯片放映）

Answer 1

添加

document.getElementById('imgTrans').src = contStyle;

在switch之后。

然后摆脱switch：

function slide() {
  var pictures = [
    "images/mints.jpg", 
    "images/cookies.jpg",
    "images/candy.jpg",
    "images/cake.jpg"
  ];
  var picNum = 0;
  setInterval(function() {
    if (picNum > pictures.length - 1) {
      picNum = 0;
    }

    document.getElementById('imgTrans').src = pictures[picNum];

    picNum++;
  }, 3000);
}