나는 html, js 및 css 만 알고 있습니다. 슬라이드 쇼 에서처럼 몇 초마다 이미지를 변경하려고합니다.
<script type="text/javascript">
var temp=1;
function slider(){
document.getElementById("pic1").style.display = 'none';
document.getElementById("pic2").style.display = 'none';
document.getElementById("pic3").style.display = 'none';
if(temp==1){
document.getElementById("pic1").style.display = 'block';
}
else if(temp==2){
document.getElementById("pic2").style.display = 'block';
}
else if (temp==3){
document.getElementById("pic3").style.display = 'block';
temp=1;
}
temp++;
setTimeout(slider(),25000);
}
</script>
머리는 위에 있고 몸은 아래에 있습니다.
<div id="rightside" onload="slider()">
<a id="pic1"><img src="photos/hamilton/candyshop.jpg" style="display:block"></a>
<a id="pic2"><img src="photos/hamilton/hamiltonboat.jpg" style="display:none"></a>
<a id="pic3"><img src="photos/hamilton/waterduel.jpg" style="display:none"></a>
</div>
작동하려면 모두 수정해야하는 여러 오류가 있습니다.
setTimeout(slider(), 25000)전달해야 합니다. 그런 다음 모든 것을 시작하기 위해 정의한 후 한 번 호출해야합니다 . 을 사용하여 HTML 대신 JavaScript에서이를 수행하여 HTML을 자체 포함 할 수 있습니다.sliderslider()slider()document.addEventListeneronloadimg에 display:noneHTML에서, 그리고 당신은 ID와 요소를 설정 pic1에 display: block. 그러나이 요소는 아니다 img는이다, a. 따라서를 display: block <a>포함하는 것으로 끝나 display: none <img>므로 결국 아무것도 표시되지 않습니다.temp = 1하면 바로 실행 한 직후에을 실행 temp++하므로 사진 # 1은 다시는 보이지 않습니다. temp = 0그 줄에서이 문제를 고칠 수 있지만 temp"0, 1, 2" %를 통해 루프를 만들고 너무 높으면 숫자를 루프 하는 모듈로 연산자 를 사용하는 것이 좋습니다.또한 alt각 이미지를 설명하는 속성을 추가 하여 이미지로드없이 데모가 작동하도록했습니다. 어떤 이유로 든 이미지를 볼 수없는 경우 사용자에게도 도움이됩니다.
작동 버전 :
document.addEventListener("DOMContentLoaded", function(event) {
var temp = 0;
function slider() {
document.getElementById("pic1").style.display = 'none';
document.getElementById("pic2").style.display = 'none';
document.getElementById("pic3").style.display = 'none';
if (temp == 0) {
document.getElementById("pic1").style.display = 'block';
} else if (temp == 1) {
document.getElementById("pic2").style.display = 'block';
} else if (temp == 2) {
document.getElementById("pic3").style.display = 'block';
}
temp = (temp + 1) % 3;
setTimeout(slider, 1500); // decreased delay for demo purposes
}
slider();
});<div id="rightside">
<a id="pic1" style="display:block">
<img alt="candy shop" src="photos/hamilton/candyshop.jpg">
</a>
<a id="pic2" style="display:none">
<img alt="Hamilton boat" src="photos/hamilton/hamiltonboat.jpg">
</a>
<a id="pic3" style="display:none">
<img alt="water duel" src="photos/hamilton/waterduel.jpg">
</a>
</div>위와 같이 코드를 작동시킨 후 루프와 함수를 사용하여 반복을 줄일 수도 있습니다. 다음 버전에서는 그림을 더 추가하면 코드의 여러 부분을 복사하여 붙여 넣는 대신 한 줄의 코드 만 변경하면됩니다. 코드를 각각 간단한 함수로 분할하면 코드를 더 쉽게 이해하고 오류를 확인하는 추가 이점이 있습니다.
document.addEventListener("DOMContentLoaded", function(event) {
var currentIndex = 0;
var numPictures = 3;
function slideshow() {
hideAllPictures();
showPicture(currentIndex);
currentIndex = (currentIndex + 1) % numPictures;
setTimeout(slideshow, 1500);
}
function hideAllPictures() {
for (var i = 0; i < numPictures; i++) {
hidePicture(i);
}
}
function hidePicture(index) {
getPictureElement(index).style.display = 'none';
}
function showPicture(index) {
getPictureElement(index).style.display = 'block';
}
function getPictureElement(index) {
var id = "pic" + (index + 1);
return document.getElementById(id);
}
slideshow();
});<div id="rightside">
<a id="pic1" style="display:block">
<img alt="candy shop" src="photos/hamilton/candyshop.jpg">
</a>
<a id="pic2" style="display:none">
<img alt="Hamilton boat" src="photos/hamilton/hamiltonboat.jpg">
</a>
<a id="pic3" style="display:none">
<img alt="water duel" src="photos/hamilton/waterduel.jpg">
</a>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다