圖片更換在JavaScript

我試圖實現這個許多不同的方式。我已經能夠使用一個按鈕來改變形象，但是當我添加代碼的其餘部分，使之自動的，我不能讓它的工作。這裏是我的代碼：圖片更換在JavaScript

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>

我想改變幾個不同的圖像之間。爲主頁的網站。（如幻燈片放映）

來源

2015-11-11 Dakota Miller

switch後添加

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

。

然後擺脫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); 
}

來源

2015-11-11 02:07:24 Igor

仍然沒有運氣。對不起 –

作品像魅力謝謝你！爲什麼不能使用switch語句？ –

它可以被使用，但你可以看到它會導致大量的重複代碼，當你需要的只是從數組中選擇一個字符串。 – Igor

圖片更換在JavaScript

回答

相關問題