Как установить таймер для перехода к следующему элементу в списке?

Question

Я хотел бы сделать так, чтобы каждые 5 секунд следующий слайд появлялся автоматически. Также я хочу сделать так, чтобы щелчок next/prev сбросил таймер. Как мне это достичь? До сих пор у меня есть это: https://jsfiddle.net/5yL8a1av/4/

JQuery:

$(document).ready(function() { 
$(".divs > div").each(function (e) { 
    if (e != 0) $(this).hide(); 
}); 

$("#next").click(function() { 
    if ($(".divs > div:visible").next().length != 0) { 
     $(".divs > div:visible").fadeOut(1000, function(){ 
      $(this).next().fadeIn(1000) 
     }); 
    } else { 
     $(".divs > div:visible").fadeOut(1000, function() { 
      $(".divs > div:first").fadeIn(1000); 
     }); 
    } 
    return false; 
}); 

$("#prev").click(function() { 
    if ($(".divs > div:visible").prev().length != 0) { 
     $(".divs > div:visible").fadeOut(1000, function(){ 
      $(this).prev().fadeIn(1000);    
     }); 
    } else { 
     $(".divs > div:visible").fadeOut(1000, function() { 
      $(".divs > div:last").fadeIn(1000); 
     }); 

    } 
    return false; 
}); 
}); 

Answer 1

использования делают из clearTimer и глобальных переменных

Установить глобальную переменную для хранения таймера, и при загрузке страницы или когда следующая/предыдущая , снова установите таймер. Вы можете обернуть команду setTimeout в функцию и вызвать ее вместо этого.

$(document).ready(function() { 

    var autoTimer; 

    // set auto timer 
    autoTimer = setTimeout(function(){ 
     goNext(); 
    }, 5000); 

    $(".divs > div").each(function (e) { 
     if (e != 0) $(this).hide(); 
    }); 

    function goNext() { 
     if ($(".divs > div:visible").next().length != 0) { 
      $(".divs > div:visible").fadeOut(1000, function(){ 
       $(this).next().fadeIn(1000) 
      }); 
     } else { 
      $(".divs > div:visible").fadeOut(1000, function() { 
       $(".divs > div:first").fadeIn(1000); 
      }); 
     } 
     // clear timer 
     clearTimeout(autoTimer); 

     // set auto timer 
     autoTimer = setTimeout(function(){ 
      goNext(); 
     }, 5000); 
     return false; 
    } 

    $("#next").click(function() { 
     return goNext(); 
    }); 

    $("#prev").click(function() { 
     if ($(".divs > div:visible").prev().length != 0) { 
      $(".divs > div:visible").fadeOut(1000, function(){ 
       $(this).prev().fadeIn(1000);    
      }); 
     } else { 
      $(".divs > div:visible").fadeOut(1000, function() { 
       $(".divs > div:last").fadeIn(1000); 
      }); 

     } 

     // clear timer 
     clearTimeout(autoTimer); 

     // set auto timer 
     autoTimer = setTimeout(function(){ 
      goNext(); 
     }, 5000); 
     return false; 
    }); 
}); 

Answer 2

Вот как это можно сделать:

Demo

var showNext = function() { 
 
    if ($(".divs > div:visible").next().length != 0) { 
 
    $(".divs > div:visible").fadeOut(1000, function() { 
 
     $(this).next().fadeIn(1000) 
 
    }); 
 
    } else { 
 
    $(".divs > div:visible").fadeOut(1000, function() { 
 
     $(".divs > div:first").fadeIn(1000); 
 
    }); 
 
    } 
 
}; 
 
var showPrev = function() { 
 
    if ($(".divs > div:visible").prev().length != 0) { 
 
    $(".divs > div:visible").fadeOut(1000, function() { 
 
     $(this).prev().fadeIn(1000); 
 
    }); 
 
    } else { 
 
    $(".divs > div:visible").fadeOut(1000, function() { 
 
     $(".divs > div:last").fadeIn(1000); 
 
    }); 
 

 
    } 
 
}; 
 

 
$(document).ready(function() { 
 
    $(".divs > div").each(function(e) { 
 
    if (e != 0) $(this).hide(); 
 
    }); 
 

 
    $("#next").click(function() { 
 
    showNext(); 
 
    return false; 
 
    }); 
 

 
    $("#prev").click(function() { 
 
    showPrev(); 
 
    return false; 
 
    }); 
 

 
    var interval = setInterval(function() { 
 
    showNext(); 
 
    }, 1000); 
 
    $('#next, #prev').one('click', function() { 
 
    clearInterval(interval); 
 
    }); 
 
});

#one { 
 
    background: red; 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 
#two { 
 
    background: blue; 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 
#three { 
 
    background: green; 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 
#prev { 
 
    background: gray; 
 
    height: 50px; 
 
    width: 50px; 
 
} 
 
#next { 
 
    background: orange; 
 
    height: 50px; 
 
    width: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="divs"> 
 
    <div id="one"> 
 
    <div class="content-b"> 
 
     <h1>KEYS TO SUCCESS</h1> 
 

 
     <h3>Digial Design Intern</h3> 
 
     <a href="#"> 
 
     <div id="c">LEARN MORE</div> 
 
     </a> 
 

 
    </div> 
 
    </div> 
 
    <div id="two"> 
 
    <div class="content-b"> 
 
     <h1>KEYS TO FAILURE</h1> 
 

 
     <h3>Digial Design Intern</h3> 
 
     <a href="#"> 
 
     <div id="c">LEARN LESS</div> 
 
     </a> 
 

 
    </div> 
 
    </div> 
 
    <div id="three"> 
 
    <div class="content-b"> 
 
     <h1>KEYS TO FAILURE</h1> 
 

 
     <h3>Digial Design Intern</h3> 
 
     <a href="#"> 
 
     <div id="c">LEARN LESS</div> 
 
     </a> 
 

 
    </div> 
 
    </div> 
 
</div> 
 
<div id="prev">Prev</div> 
 
<div id="next">Next</div>

Answer 3

Оберните следующий код кнопки в рекурсивной функции SetTimeout.

(function loopsiloop(){ 
     setTimeout(function(){   
     if ($(".divs > div:visible").next().length != 0) { 
      $(".divs > div:visible").fadeOut(1000, function(){ 
       $(this).next().fadeIn(1000) 
      }); 
     } else { 
      $(".divs > div:visible").fadeOut(1000, function() { 
       $(".divs > div:first").fadeIn(1000); 
      }); 
     } 
      loopsiloop();  
     }, 5000); 
    })(); 

Working jsfiddle

Answer 4

Почему бы вам не попробовать Ьй ползунок? .. Вот ссылка http://bxslider.com/