Как я могу сделать Javascript код совмещать автоматический слайдер с ручным слайдером?

Question

Я ищу кого-то, чтобы помочь мне объединить автоматическое скольжение с ручным скольжением, сейчас я просто делаю автоматическое скольжение или ручное скольжение, но я не имею ни малейшего представления о том, как это можно объединить, здесья просто делаю авто авто слайд.

var element=document.getElementById("slider");
var myImgs = [ 
    "../banner4.jpg",
    "../bannerdc.jpg",
    "../bannerknot.jpg",
    "../mr7banner.jpg",
    "../kornbanner.jpg"
];
function mySlide(element, myImgs){

    setInterval(function(){
    var Random = Math.floor(Math.random()*myImgs.length);
    element.src=myImgs[Random];
     },3000);
}

mySlide(element, myImgs);

Answer 1

Сохраните переменную SetInterval, чтобы позже можно было сбросить время ожидания, а затем использовать события для обработки «ручного ползунка».

Пример кода:

var interval;
var element=document.getElementById("slider");
var myImgs = [ 
    "../banner4.jpg",
    "../bannerdc.jpg",
    "../bannerknot.jpg",
    "../mr7banner.jpg",
    "../kornbanner.jpg"
];
function mySlide(element, myImgs){

    interval=setInterval(function(){
    var Random = Math.floor(Math.random()*myImgs.length);
    element.src=myImgs[Random];
     },3000);
}

mySlide(element, myImgs);
//a button you create for manual changing the slider
$("#arrow-right").click(function(){
    clearInterval(interval) //Stop the "auto slider"
    var index=myImgs.indexOf(element.src);
    element.src=myImgs[index+1];
    mySlide(element, myImgs); //Restart the "auto slider" can also do this in another button
})
//a button you create for manual changing the slider
$("#arrow-left").click(function(){
    clearInterval(interval) //Stop the "auto slider"
    var index=myImgs.indexOf(element.src);
    element.src=myImgs[index-1];
    mySlide(element, myImgs); //Restart the "auto slider" can also do this in another button
})

ПРИМЕЧАНИЕ: Обратите внимание, что вы также должны проверить условия ограничения - когда вы находитесь на последнем изображении и пытаетесь идти направо, и когда вы находитесь на левом изображении и пытаетесь идти налево!

Что-то вроде:

//For right
if(index==myImgs.length-1)
  element.src=myImgs[0];
//For left
if(index==0)
  element.src=myImgs[myImgs.length-1];