重新啓動setinterval一個新位置

Question

我有一個「setinterval」來更改我的幻燈片。用一個按鈕來改變幻燈片。但是，一旦我點擊按鈕來更換幻燈片，「setinterval」將重置爲+1。

我希望它重新啓動我的+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

我已經通過我的一個以前的答案的圖像滑塊添加按鈕，可以讓你跳到特定的幻燈片，並從那裏繼續幻燈片放映。也許它有一些代碼可以在你的解決方案中重用。

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); 
}