остановка слайд-шоу и продолжение через 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

Вы должны присвоить setInterval ссылку на переменную, так что вы можете остановить этот интервал, используя clearInterval() , Теперь при каждом вызове 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 исчезает после того, как я вручную нажал от 1 до 6 или от 6 до 1? – 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 секунды

ответ

Смежные вопросы