재시작 setinterval 새 위치

Question

슬라이드를 바꾸기위한 "setinterval"이 있습니다. 슬라이드를 변경하는 버튼이 있습니다. 하지만 일단 슬라이드를 변경하려면 버튼을 클릭하면 "setinterval"이 +1 된 위치로 재설정됩니다.

가 나는

https://jsfiddle.net/8s6r3qay/

<section class="testimony"> 
<div class="testimony__content"> 

    <article class="testimony__content--pers"> 
    <div class="pers"></div> 
    <p class="comment"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p> 
    <p class="name">Gabrielle, 35 ans</p> 
    </article> 

    <aside class="aside hide-xs"> 
    <div class="bulletOrange pers1" onclick="stopSliderPers(0)"></div> 
    <div class="bulletGrey pers2" onclick="stopSliderPers(1)"></div> 
    <div class="bulletGrey pers3" onclick="stopSliderPers(2)"></div> 
    </aside> 

</div> 

Answer 1

난 당신이 이동하게됩니다 버튼을 추가 할 수있는 이미지 슬라이더에 대한 내 이전 대답을 채택했습니다 내 +1 버튼을 다시 시작하겠습니다 특정 슬라이드로 이동하고 거기에서 슬라이드 쇼를 계속하십시오. 아마도 솔루션에서 재사용 할 수있는 코드가있을 것입니다.

const 
 
    delayBetweenPictures = 2000, 
 
    numberOfPictures = 4, 
 
    initialPicture = 1, 
 
    image = document.getElementById('slideshow'), 
 
    slideControl = document.getElementById('slide-control'); 
 
    
 
let 
 
    timeoutId; 
 
    
 
function moveHighlight(pictureIndex) { 
 
    const 
 
    oldButton = slideControl.querySelector('.highlight'), 
 
    newButton = slideControl.querySelector(`[data-index="${pictureIndex}"]`); 
 
    
 
    if (oldButton !== null) { 
 
    oldButton.classList.remove('highlight'); 
 
    } 
 
    
 
    if (newButton !== null) { 
 
    newButton.classList.add('highlight'); 
 
    } 
 
} 
 
    
 
function changeToPicture(pictureIndex) { 
 
    // console.log(`Changing picture to index ${pictureIndex}`); 
 
    // Change the image 
 
    image.src = `http://lorempixel.com/320/200/cats/${pictureIndex}`; 
 
    moveHighlight(pictureIndex); 
 
    
 
    // Use a modulo operator to turn 4 (number of pictures) back to 0 and add 1 so the range becomes 1...number of pictures. 
 
    pictureIndex = (pictureIndex % numberOfPictures) + 1; 
 
    
 
    // Set a timeout of X ms after which the changeToPicture method is called again, this time with the new value of pictureIndex. 
 
    timeoutId = setTimeout((newIndex) => changeToPicture(newIndex), delayBetweenPictures, [pictureIndex]); 
 
} 
 

 

 
function onSlideControlClicked(event) { 
 
    const 
 
    button = event.target, 
 
    index = parseInt(button.getAttribute('data-index')); 
 
    
 
    // Clear the timeout or else we will be starting another timeout loop. 
 
    clearTimeout(timeoutId); 
 
    // Change to the picture for which the user clicked the button. 
 
    changeToPicture(index); 
 
} 
 

 
slideControl.addEventListener('click', onSlideControlClicked); 
 
changeToPicture(initialPicture);

button { 
 
    font: inherit; 
 
} 
 

 
ul { 
 
    display: flex; 
 
    list-style:none; 
 
} 
 

 
li + li { 
 
    margin-left: 1em; 
 
} 
 

 
.highlight { 
 
    box-shadow: 0 0 1em #000; 
 
}

<img id="slideshow"> 
 

 
<p>Jump to slide:</p> 
 
<ul id="slide-control"> 
 
    <li><button type="button" data-index="1">1</button></li> 
 
    <li><button type="button" data-index="2">2</button></li> 
 
    <li><button type="button" data-index="3">3</button></li> 
 
    <li><button type="button" data-index="4">4</button></li> 
 
</ul>

Answer 2

나의 새로운 코드가 작동 :

HTML :

<section class="testimony"> 
    <div class="testimony__content"> 

     <article class="testimony__content--pers"> 
     <div class="pers"></div> 
     <p class="comment"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. </p> 
     <p class="name">Gabrielle, 35 ans</p> 
     </article> 

     <aside class="aside hide-xs"> 
     <div class="bulletOrange pers1" onclick="stopSliderPers(0)"></div> 
     <div class="bulletGrey pers2" onclick="stopSliderPers(1)"></div> 
     <div class="bulletGrey pers3" onclick="stopSliderPers(2)"></div> 
     </aside> 
    </div> 

    </section> 

JS :

var persData = [{ 
    src: "./assets/img/pers-1.png", 
    comment: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. ", 
    name: "Gabrielle, 35 ans" 
    }, 
    { 
    src: "./assets/img/pers-2.jpg", 
    comment: "Suspendisse leo neque, egestas vitae dapibus sit amet, lacinia sed lorem. Aliquam quam odio, eleifend sed lectus. ", 
    name: "Bernard, 28 ans" 
    }, 
    { 
    src: "./assets/img/pers-3.jpg", 
    comment: "Maecenas posuere velit in suscipit lobortis. Nam luctus justo quis aliquam molestie. Suspendisse sit amet blandit leo. ", 
    name: "Julie, 22 ans" 
    } 
]; 


var intervalPers; 
index = 1; 

function changePers(index) { 
    var indexUse = index + 1; 

    var pers = persData[index]; 


    $(".testimony__content--pers .pers").fadeOut(1000, function() { 
    $(this).css("background-image", "url(" + pers.src + ")").fadeIn(1000); 
    }); 
    $(".testimony__content--pers .comment").fadeOut(1000, function() { 
    $(this).text(pers.comment).fadeIn(1000); 
    }); 
    $(".testimony__content--pers .name").fadeOut(1000, function() { 
    $(this).text(pers.name).fadeIn(1000); 
    }); 

    for (var i = 1; i <= 3; i++) { 
    if (i === indexUse) { 
     $(".testimony .aside .pers" + i).removeClass("bulletGrey"); 
     $(".testimony .aside .pers" + i).addClass("bulletOrange"); 
    } else { 
     $(".testimony .aside .pers" + i).removeClass("bulletOrange"); 
     $(".testimony .aside .pers" + i).addClass("bulletGrey"); 
    } 
    } 
} 

function startSliderPers(index) { 
    intervalPers = setInterval(function(){ 
    if (index > 2) { 
     index = 0; 
    } else if(index < 0){ 
     index = 2; 
    } 
    changePers(index); 
    index++; 
    }, 5000); 
} 
startSliderPers(index); 

function stopSliderPers(index) { 
    clearInterval(intervalPers); 
    changePers(index); 

    setTimeout(function(){ 
    index++; 
     startSliderPers(index); 
    },5000); 
}