Сброс Javascript Timer для слайдера изображений

Question

Я создаю слайдер изображения и используя таймер JavaScript для перехода к следующему изображению. Когда пользователь нажимает кнопку «вперед» или «назад» (см. Рисунок ниже), время слайда значительно уменьшается. Мне нужна помощь, чтобы кнопки продвигали слайд и сбросили таймер и то же самое время. Я привязываю свой JavaScript, HTML и CSS, чтобы полностью охватить мой код.

Мои JavaScript:

var imageShown = 1; 
var total = 7; 

function autoplay() { 
    var image = document.getElementById('picture'); 
    imageShown = imageShown + 1; 
    if(imageShown > total){imageShown = 1;} 
    if(imageShown < 1){imageShown = total;} 
    picture.src = "Images/img"+ imageShown +".jpg"; 
    console.log("Pic Changed"); 
} 

window.setInterval(autoplay, 5000); 

function pic(x) { 
    var image = document.getElementById('picture'); 
    imageShown = imageShown + x; 
    if(imageShown > total){imageShown = 1;} 
    if(imageShown < 1){imageShown = total;} 
    picture.src = "Images/img"+ imageShown +".jpg"; 
    console.log("Button clicked"); 
    window.clearInterval(autoplay); 
    window.setInterval(autoplay, 5000); 
} 

Мой HTML:

<img src="Images/img1.jpg" id="picture" > 
<div class="left_div"><img onClick="pic(-1)" class="left_click" src="Images/left.png"></div> 
<div class="right_div"><img onClick="pic(+1)" class="right_click" src="Images/right.png"></div> 
</div> 

Мой CSS:

margin:0px; 
    } 
#imageslider { 
    height:700px; 
    width:1000px; 
    margin: 50px auto; 
    position:absolute; 
    border-radius:4px; 
    overflow:hidden; 
    padding-right: 5000px; 
    padding-top: 1000px; 
    } 
#picture { 
    height:750px; 
    width:1000px; 
    position:relative; 
    padding-top: 50px 
    } 
.left_div { 
    height: 750px; 
    width: 150px; 
    position: absolute; 
    top: 250px; 
    left: 0px; 
} 
.right_div { 
    height: 750px; 
    width: 150px; 
    position: absolute; 
    top: 250px; 
    right: 0px; 
} 
.left_click { 
    height:50px; 
    width:50px; 
    position:absolute; 
    top:40%; 
    left:20px; 
    opacity:0; 
    transition: all .2s ease-in-out 0s; 
    } 
.right_click { 
    height:50px; 
    width:50px; 
    position:absolute; 
    top:40%; 
    right:20px; 
    opacity:0; 
    transition: all .5s ease-in-out 0s; 
    } 
.left_div:hover .left_click { 
    opacity:0.6; 
    } 
.right_div:hover .right_click { 
    opacity:0.6; 
} 
.left:hover .left1 

Answer 1

Вы должны использовать clearInterval следующим образом:

clearInterval(autoplay); 

или

window.clearInterval(autoplay); 

Answer 2

Я думаю, что вы, возможно, пытается сбросить интервал неправильно

http://www.w3schools.com/jsref/met_win_clearinterval.asp это дает пример того, как сбросить функцию, установленную на интервал в JavaScript