javascript - 单击幻灯片图像以强制执行一步

Question

<div id="divR">
<img class="imgT" src="imgT/01.jpg" alt="img">
<img class="imgT" src="imgT/02.jpg" alt="img">
<img class="imgT" src="imgT/03.jpg" alt="img">
<img class="imgT" src="imgT/04.jpg" alt="img">
<img class="imgT" src="imgT/05.jpg" alt="img">
</div>

CSS

.imgT{
    position:absolute;
    width:100%;
    left:0;
    top:0;
    cursor:pointer;
}

所以我有一个简单的幻灯片:

$(function(){
    $('#divR img:gt(0)').hide();
    setInterval(function(){
      $('#divR :first-child').fadeOut(1000)
         .next('img').fadeIn(1000)
         .end().appendTo('#divR');}, 
      5000);
});

它可以工作，但我需要通过单击 imgT 来强制执行此代码，而无需等待五秒钟。

换句话说 - 如果没有点击，幻灯片应该按原样工作，但如果有点击，它应该只执行一个步骤，即仅用下一张更改实际图片，然后等待下一次点击(如果存在)等等...

请问有什么想法吗？

Answer 1

我想这就是你要找的

$(function(){
    $('#divR img:gt(0)').hide();

    function next() {
        $('#divR :first-child').fadeOut(1000)
            .next('img').fadeIn(1000)
            .end().appendTo('#divR');
    };

    var interval;
    function start() {
        clearInterval(interval);
        interval = setInterval(next, 5000); 
    };
    start();
    $('img').click(function() {
        start();
        next();
    });
});