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

click on slideshow image to force just one step

本文关键字：一步 强制执行 幻灯片 图像 单击      更新时间：2023-09-26
<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 ，而无需等待五秒钟。

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

任何想法，请？

我认为这就是你要找的

$(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();
    });
});
相关文章：