슬라이드 쇼를 멈추고 3 초 후에 계속

HTML/CSS/JS로이 슬라이드 쇼를 만들었습니다. 자동 스크롤이 멈추는 화살표 키를 누른 후 수동으로 사진을 변경할 수 있습니다. 3 초 후 다시 오토 슬라이드로 돌아 간다. 그러나 이것이 어떻게 작동하는지 알 수 없다. 어떤 도움을 주셔서 감사합니다. 미리 감사드립니다.슬라이드 쇼를 멈추고 3 초 후에 계속

JS :

var imagecount = 1; 
var total = 6; 
var uniqueRandoms = []; 

function makeUniqueRandom() { 
    if (!uniqueRandoms.length) { 
    for (var i = imagecount; i <= total; i++) { 
     uniqueRandoms.push(i); 
    } 
    } 
    var index = Math.floor(Math.random() * uniqueRandoms.length); 
    var val = uniqueRandoms[index]; 

    uniqueRandoms.splice(index, 1); 

    return val; 
} 

function slide(x) { 
    var Image = document.getElementById('img'); 
    imagecount = imagecount + x; 
    if (imagecount > total) { 
    imagecount = 1; 
    } 
    if (imagecount < 1) { 
    imagecount = total; 
    } 
    Image.src = "images/img" + imagecount + ".jpg"; 
    ChangeText(imagecount); 
} 



window.setInterval(function slideA(x) { 
    var Image = document.getElementById('img'); 
    imagescount = makeUniqueRandom(); 
    console.log(imagescount); 
    Image.src = "images/img" + imagescount + ".jpg"; 
    ChangeText(imagescount); 
}, 3000); 


function ChangeText(imgNum) { 
    var allImagesAndText = { 
    1: "Seltene römische Goldmünze", 
    2: "Römische Funde", 
    3: "Römische Wandmalerei", 
    4: "Tutanchamun", 
    5: "Cheops Pyramide", 
    6: "Ägyptische Malerei" 
    }; 
    document.getElementById("text1").innerHTML = allImagesAndText[imgNum]; 
}

CSS :

#container { 
    height: 450px; 
    width: 650px; 
    margin: 20px auto; 
    position: relative; 
    z-index: 1; 
    border: 10px solid #000; 
    border-radius: 10px; 
} 
#img { 
    height: 450px; 
    width: 650px; 
} 
#left_holder { 
    height: 450px; 
    width: 100px; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
} 
#right_holder { 
    height: 450px; 
    width: 100px; 
    position: absolute; 
    right: 0px; 
    top: 0px; 
} 
.left { 
    height: 50px; 
    width: 50px; 
    position: absolute; 
    top: 40%; 
    left: 0px; 
} 
.right { 
    height: 50px; 
    width: 50px; 
    position: absolute; 
    top: 40%; 
    right: 0px; 
} 
#text1 { 
    position: absolute; 
    color: #fff; 
    font-size: 32px; 
    background-color: #000; 
    opacity: 0.5; 
    left: 37%; 
    z-index: 2; 
}

HTML :

<div id="container"> 
    <div id="text1">Text</div> 
    <img src="images/img1.jpg" id="img" /> 
    <div id="left_holder"> 
    <img onClick="slide(-1)" class="left" src="images/arrow_left.png" /> 
    </div> 
    <div id="right_holder"> 
    <img onClick="slide(1)" class="right" src="images/arrow_right.png" /> 
    </div> 
</div>

출처

2016-07-18 CuttingTheAces

당신이 clearInterval()를 사용하여 해당 간격을 중지 할 수 있습니다, 그래서 당신은 변수에 setInterval을 참조를 할당해야 . 이제 화살표 클릭 핸들러로 사용하는 slide()을 호출 할 때마다 함수 시작시 간격을 지우고 함수의 끝에서 다시 설정해야합니다. 변수

function slide(x) { 
    clearInterval(sliderInterval); 
    var Image = document.getElementById('img'); 
    imagecount = imagecount + x; 
    if (imagecount > total) { 
    imagecount = 1; 
    } 
    if (imagecount < 1) { 
    imagecount = total; 
    } 
    Image.src = "images/img" + imagecount + ".jpg"; 
    ChangeText(imagecount); 

    sliderInterval = window.setInterval(slideA, 3000); 
} 



sliderInterval = window.setInterval(slideA, 3000); 

function slideA() { 
    var Image = document.getElementById('img'); 
    imagescount = makeUniqueRandom(); 
    console.log(imagescount); 
    Image.src = "images/img" + imagescount + ".jpg"; 
    ChangeText(imagescount); 
}

출처

2016-07-18 14:00:13

이 나를 위해 일한 감사합니다. 내가 수동으로 1에서 6 또는 6에서 1로 클릭 한 후에 어떻게 그림 1의 왼쪽 화살표와 그림 6의 오른쪽 화살표를 사라지게 할 수 있습니까? – CuttingTheAces

@CuttingTheAces 현재 슬라이드의 값을 가진 카운터를 유지할 수 있습니다. 그런 다음,'slide() '를 호출 할 때마다이 슬라이드가 첫 슬라이드인지 (원하는대로 0 또는 1) 또는 마지막 슬라이드 (예 :'if (counter == total)')인지 확인할 수 있습니다. 그 상태를 바탕으로 그 화살을 숨길 수 있습니다. –

할당하여 setInterval : 다음

var silderTimerID = window.setInterval(function slideA(x) { 
var Image = document.getElementById('img'); 
imagescount = makeUniqueRandom(); 
console.log(imagescount); 
Image.src = "images/img" + imagescount + ".jpg"; 
ChangeText(imagescount); 
}, 3000);

및

가 키 누름 이벤트 핸들러 추가

window.addEventListener("keypress", function(e){ 
console.log(e); 
// write your key condition code 
clearInterval(silderTimerID)

을});

타이머 반복을 지우려면 clearInterval()을 사용하십시오.

데모를 참조하십시오

https://jsfiddle.net/sxzety3e/1/

출처

2016-07-18 14:09:17

슬라이드 쇼를 멈추고 3 초 후에 계속

답변

관련 문제