이를 구현하기 위해 여러 가지 방법을 시도했습니다. 버튼을 사용하여 이미지를 변경할 수 있었지만 나머지 코드를 추가하여 자동으로 만들면 작동하지 않습니다. 내 코드는 다음과 같습니다.
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;
후 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);
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다