Question

我正在做一个项目，该项目需要显示灰色屏幕才能显示数组中的图像。如何使用javascript完成此操作？

我尝试像这样使用setinterval：


document.getElementById("startStimulation").addEventListener("click", startStimulation);
var images = [];
images[0] = 'resources/mentalImg/img/carretera.jpeg';
images[1] = 'resources/mentalImg/img/ciudad.jpg';
images[2] = 'resources/mentalImg/img/ciudad.jpg';
images[3] = 'resources/mentalImg/img/construccion.jpeg';
images[4] = 'resources/mentalImg/img/fabrica.jpg';
images[5] = 'resources/mentalImg/img/terreno.jpg';

function startStimulation() {
    var current = 0;
    var interval = setInterval(function () {
        var firstInnerInterval = setInterval(function () {
            $('#text').text('');
            $('#flip').hide();
            $('#text').show();
        }, 4000);
        var secondInnerInterval = setInterval(function () {
            $('#text').hide();
            $('#flip').attr('src', images[current]);
            $('#flip').show();
        }, 1400);
        var thirdInnerInterval = setInterval(function () {
            $('#flip').hide();
            $('#text').text(someVariable);
            $('#text').show();
        }, 4000);
        if (current < images.length - 1) {
            current = current + 1;
        } else {
            clearInterval(interval);
        }
    }, 9400);

}

但是输出不是所需的。我如何使用jQuery实现此目的？

Answer 1

这是您想要的吗？

document.getElementById("startStimulation").addEventListener("click", startStimulation);
var images = [];
images[0] = 'resources/mentalImg/img/carretera.jpeg';
images[1] = 'resources/mentalImg/img/ciudad.jpg';
images[2] = 'resources/mentalImg/img/ciudad.jpg';
images[3] = 'resources/mentalImg/img/construccion.jpeg';
images[4] = 'resources/mentalImg/img/fabrica.jpg';
images[5] = 'resources/mentalImg/img/terreno.jpg';

var current = 0;

var text = $('#text');
var flip = $('#flip');
var both = text.add(flip);

function startStimulation() {

  text.text('');
  flip.hide();

  setTimeout(function() {
    both.toggle();
    flip.attr('src', images[current]);
  }, 4000);

  setTimeout(function() {
    both.toggle();
    text.text("Some randowm text");
  }, 5400);

  setTimeout(function() {
    if (current < images.length - 1) {
      current++;
      startStimulation();
    }
  }, 9400)
}

#text {
  height: 100px;
  width: 100px;
  border: 1px solid red;
}

#flip {
  height: 100px;
  width: 100px;
  border: 1px solid #0f0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="text"></div>
<img id="flip">

<button id="startStimulation">Start</button>

jQuery显示div 4秒钟，然后将其隐藏并显示另一个1.4秒钟，最后是第一个带有一些文本的循环

1 个答案: