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

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

1 个答案: