수동으로 슬라이드 쇼 진행

Question

프로그래밍에 익숙하지 않고 현재 개발중인 웹 사이트에서 슬라이드 쇼에 어려움을 겪고 있습니다. 5 초마다 진행되는 슬라이드 쇼를 만들었지 만 사용자가 직접 쇼를 진행 (또는 리버스) 할 수있게하고 싶습니다.

나는 앞으로 이동 버튼을 만들었고 나는 onclick 기능을 사용하고 있습니다. 나는 하나의 사진으로 쇼를 진행시키기 위해 onclick 작업을 할 수 있었지만, 일단 새로운 이미지가 나타나면 5 초 후에 자동으로 다음 이미지가 나타날 때까지 onclick이 작동하지 않습니다. 그런 다음 onclick이 다시 작동하는 것 같습니다. 이것은 연속적인 사이클입니다.

예 : - 바로 사전 버튼을 클릭 3 이미지가 바로 나타납니다 - - 2 이미지가 나타납니다 3 이미지를 클릭하고 아무 일도 발생하지 않습니다 (5 초 후 자동 4 이미지 진보) ​​ 이 - 4 이미지가 나타나고 오른쪽 클릭 버튼을 클릭하면 바로 5 번째 이미지가 나타나지만 새로운 이미지를 클릭하면 아무런 문제가없는 동일한 문제가 발생합니다. 대신에 대신 수있는 onclick 정의,

이

var myImage = document.getElementById("mainImage"); 
var navLeft = document.getElementById("navLeft"); 
var navRight = document.getElementById("navRight"); 

var imageArray = ["images/ss_img001.jpg","images/ss_img002.jpg","images/ss_img003.jpg","images/ss_img004.jpg", 
        "images/ss_img005.jpg","images/ss_img006.jpg","images/ss_img007.jpg","images/ss_img008.jpg"]; 
var imageIndex = 0; 


navRight.onclick = function() { 
    myImage.setAttribute("src",imageArray[imageIndex]); 
    image++; 
    if (imageIndex >= imageArray.length) { 
     imageIndex = 0; 
    } 
} 

function changeImage() { 
    myImage.setAttribute("src",imageArray[imageIndex]); 
    imageIndex++; 
    if (imageIndex >= imageArray.length) { 
     imageIndex = 0; 
    } 
} 

setInterval(changeImage,5000); 

Answer 1

라인이

image++; 

이

imageIndex++; 

더 이상 이와 같은 문제를 방지하려면해야합니다 : 여기

내 코드입니다 :

navRight.onclick = changeImage;