Question

我有以下代码来显示一系列图像，这些图像应该在相同的div中彼此出现然后再消失

("div#start").click(function() {
   myFunction();        
});
var myFunction = function(){

  $('#samplePhoto7').removeClass ('hide-pic');
       setTimeout(function(){
        $('#samplePhoto7').addClass('hide-pic');
      },2000)
        setTimeout(function(){
        $('#samplePhoto6').removeClass('hide-pic');
      },2000)
        setTimeout(function(){
        $('#samplePhoto6').addClass('hide-pic');
      },4000)
      setTimeout(function(){
        $('#samplePhoto4').removeClass('hide-pic');
      },4000)
        setTimeout(function(){
        $('#samplePhoto4').addClass('hide-pic');
      },6000)
      setTimeout(function(){
        $('#samplePhoto3').removeClass('hide-pic');
      },6000)
  };

我找不到添加停止按钮以暂时停止该功能运行的方法。我想应该使用.queue和.clearqueue，但我找不到实现它的正确方法。

Answer 1

您可以尝试这种方法。

首先声明要以特定顺序显示的图像列表（ queue ）。然后开始间隔并重复此列表。

请注意，有意将图像4排除在迭代之外

$otherdb = $this->load->database('seconddatabase', TRUE); // the TRUE paramater tells CI that you'd like to return the database object.

$query = $otherdb->select('column_one, column_two')->get('table');

var queue = ['1','2','3','5'];
var timer;

// Start interval
$('#btnStart').on('click', function() {
  timer = setInterval(function() {
    moveNext();
  }, 2000);
});

// Stop interval
$('#btnStop').on('click', function() {  
  clearInterval(timer);  
});

function moveNext() {
  var visible = $('.image:visible');
  var curId = visible.attr('data-id');
  visible.addClass('hide-pic');
  $('.image[data-id="' + getNextId(curId) + '"]').removeClass('hide-pic');
}

function getNextId(curId) {  
  var index = queue.indexOf(curId);
  if (index === queue.length - 1) {
    return queue[0];
  }
  return queue[index + 1];
}

.image {
  display: inline-block;
  padding: 50px;
  background-color: #ececec;
}
.hide-pic {
  display:none;
}

Answer 2

您想将timer保留为variable，以便在您要停止循环时将其清除。

您将希望以此为基础来满足您的需求，但您会明白。

$("div#start").click(function() {
    myFunction();        
});
var interval;
var myFunction = function(){
    var imgCount = 7;
    interval = setInterval(function(){
        $('#samplePhoto' + imgCount).addClass('hide-pic');
        imgCount--;
        $('#samplePhoto' + imgCount).removeClass('hide-pic');
        if(imgCount == 3){
            clearInterval(interval);
        }
    }, 2000);
};  
$('#stop_btn').on('click', function(){
    clearInterval(interval);
});

停止函数jQuery

2 个答案: