再起動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); 
}