javascript中的图像转换器_Javascript_Javascript Events

javascript中的图像转换器

javascript

javascript中的图像转换器,javascript,javascript-events,Javascript,Javascript Events,我尝试了许多不同的方法来实现这一点。我已经能够使用一个按钮来更改图像，但是当我添加其余的代码使其自动时，我无法让它工作。这是我的密码： window.onload = function start() { console.log("started"); slide(); } function slide() { console.log("Slide started"); var picNum = 1; contStyle = document.getElementById('imgTr

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

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);
 }

这就是JavaScript。以下是html：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="JS/JS.js"></script>

</head>
<body>
<header>
<h1>Title</h1>
</header>
<nav>
<ul>
<li></li>
</ul>
</nav>
<div>
<h1>My Web Page</h1>

<p id="demo">A Paragraph</p>
<section>
<button type="button" onclick="myFunction()">Try it</button>
<img onchange="changeImage()"id="imgTrans" src="images/cake.jpg">
</section>
 </div>

<footer>
<h6></h6>
</footer>
</body>
</html>


标题



我的网页
段落
试试看

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

添加

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

在

开关之后

然后去掉

开关

：

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);
}

很有魅力谢谢！为什么不能使用switch语句呢？它可以使用，但您可以看到，当您只需要从数组中选择字符串时，它会导致大量重复代码。再次感谢您。很抱歉，使用JavaScript还是个新手。@DakotaMiller-很高兴它很有用。快乐编码。