Question

在我的幻灯片中，图像是随机显示的，最好是在FULLSCREEN中。由于[大多数抽象]图像的纵横比不同，我想在图像之间插入[无图像]黑色空间，让眼睛适应像插入空白之间的空白，使文本更具可读性。我认为黑色空间的长度应该是十分之一秒，只是一眨眼，可以这么说。到目前为止，我已尝试使用setTimeout来延迟节目中图像的连接，但没有成功。当然，必须在当前和下一个位置之间重复插入黑色空间。在运动图像相机中，这种[模拟]技术被称为Maltese Cross Mechanism，当曝光的胶片负片被传送到下一帧时，它阻挡入射光。由于我不想使用fadein / fadeout，我需要总黑色空间。我被告知浏览器[它的图形引擎]有几毫秒的延迟，但这太短了。感谢任何建议和帮助。我的javascript中的相关代码：

var currand=0

function rotateImage(){
   var nextrand = Math.floor(Math.random()*(rimages.length));
     // compare current image with next image0.
   if (currand > rimages.length -12) {

      if (nextrand > rimages.length -12) {
        currand = nextrand - 12;
        document.images[0].src = rimages[currand];
      }
      else {
      currand = nextrand;
          document.images[0].src = rimages[currand];    
      }
  ...etc.


var paused = false;

document.onkeydown = function(evt) {
   evt = evt || window.event;
   if (evt.ctrlKey && evt.keyCode == 32) {
     paused = !paused;
   }
};

(function loop() {
   var rantime = Math.round(Math.random() * 7000) + 1000;
   setTimeout(function() {
      if (!paused) {
        rotateImage();
      }
      loop();
   }, rantime);
})();

Answer 1

我对此进行了一些实验。由于图像在全屏幕中一对一显示，因此除了节目（文本）的演职员表外，它们不会被拍摄。 CSS：

#blackit { display: none; } 

<body>

<script>

var timeoutID = setTimeout(function() { document.getElementById('blackit').style.display        ='block'; }, 2000); 

(function loop() { 
    timeoutID; 
    setTimeout(function() { 
    if (!paused) { 
        rotateImage(); }
    ...

现在，这只在循环开始时只工作一次，而不是在循环重复时。图像仍然连接在一起。为什么？再次感谢！

如何在两个连续图像之间插入黑色空格

1 个答案: