我有一个循环播放的动画图像序列。如何将其连接到在播放和暂停之间切换的按钮？

I have an animated image sequence which plays in a loop. How do connect it to a button that toggles between play and pause?

提问人：Ammon 提问时间：1/21/2023 最后编辑：Mister JojoAmmon 更新时间：2/3/2023 访问量：202

问： 

var images = new Array()
images = [
 'images/1.svg',
 'images/2.svg',
 'images/3.svg',
 'images/4.svg',
 'images/5.svg',
 'images/6.svg',
 'images/7.svg',
 'images/8.svg',
 'images/9.svg',
 'images/10.svg',
 'images/11.svg',
 'images/12.svg',
 'images/13.svg',
 'images/14.svg',
 'images/15.svg',
 'images/16.svg',
 'images/17.svg',
 'images/18.svg',
 ];

setInterval("Animate()", 100);

var x = 0;

function Animate() {
  document.getElementById("img").src = images[x]
  x++;
  if (images.length == x) {
    x = 0;
  }
}
JavaScript 图像 序列 暂停

评论

答：

0赞 TechDan 1/21/2023 #1

这应该会有所帮助。有很多方法可以组织和优化它，但这应该给你一个起点。

<body>
    
<img src="images/1.svg">

<button onclick="toggle()">Play / Pause</button>

<script type="">

let
    loop,
    index = 0,
    images = [
    "images/1.svg", "images/2.svg", "images/3.svg", "images/4.svg", "images/5.svg", "images/6.svg", "images/7.svg", "images/8.svg", 
    "images/9.svg", "images/10.svg", "images/11.svg", "images/12.svg", "images/13.svg", "images/14.svg", "images/15.svg", "images/16.svg", 
    "images/17.svg", "images/18.svg"
];

function startLoop() {
    loop = setInterval(() => {
        document.querySelector('img').src = images[index];
        index++;
        // Loop images array
        if (index % images.length === 0) {
            index = 0;
        }
    }, 100);
}

function toggle() {
    if (loop) {
        clearInterval(loop);
        loop = null;
    } else {
        startLoop();
    }
}

startLoop();

</script>

</body>

评论

0赞 Ammon 1/27/2023
这太棒了！我将如何与它同步音频文件，以便当您单击同一按钮时，它会暂停并播放与图像序列同步的声音文件，逐帧或数组中图像的确切长度？
0赞 Ammon 1/27/2023
此外，我希望图像序列和音频以暂停状态开始。声音需要像图像序列一样循环。
0赞 Mister Jojo 1/21/2023 #2

更精致的东西......

const
  imgElm  = document.getElementById('img-id')
, btOnOff = document.getElementById('bt-start-stop')
, images  = [ 14, 15, 16, 17, 18, 19, 21, 22 ]
  ;
 
images.next       = 1;
images.refintv    = 0;
images.delay      = 1000;

btOnOff.onclick   = startLoop;

function startLoop()
  {
  newImage();    // immediate changing on click

  btOnOff.textContent = 'stop';
  btOnOff.onclick     = stopLoop;
  
  images.refintv = setInterval( newImage, images.delay);
  
  function newImage()
    {
    imgElm.src  = `https://picsum.photos/id/${images[images.next]}/300/200`;
    images.next = ++images.next % images.length;
    }
  }

function stopLoop()
  {
  clearInterval(images.refintv);
  btOnOff.textContent = 'start';
  btOnOff.onclick     = startLoop;
  }
<button id="bt-start-stop">start</button>
<br><br>
<img id="img-id" src="https://picsum.photos/id/14/300/200" >

使用您的实际代码，它应该是：

完整的 JS 代码

const
  imgElm  = document.getElementById('img-id')
, btOnOff = document.getElementById('bt-start-stop')
, images  = 
  [ 'images/1.svg',  'images/2.svg',  'images/3.svg',  'images/4.svg'
  , 'images/5.svg',  'images/6.svg',  'images/7.svg',  'images/8.svg'
  , 'images/9.svg',  'images/10.svg', 'images/11.svg', 'images/12.svg'
  , 'images/13.svg', 'images/14.svg', 'images/15.svg', 'images/16.svg'
  , 'images/17.svg', 'images/18.svg'
  ];
images.next       = 1;
images.refintv    = 0;
images.delay      = 1000;

btOnOff.onclick   = startLoop;

function startLoop()
  {
  newImage();    // immediate changing on click

  btOnOff.textContent = 'stop';
  btOnOff.onclick     = stopLoop;
  
  images.refintv = setInterval( newImage, images.delay);
  
  function newImage()
    {
    imgElm.src  = images[images.next];
    images.next = ++images.next % images.length;
    }
  }

function stopLoop()
  {
  clearInterval(images.refintv);
  btOnOff.textContent = 'start';
  btOnOff.onclick     = startLoop;
  }

完整的 HTML 代码

<button id="bt-start-stop">start</button>
<br><br>
<img id="img-id" src="images/1.svg" >

评论

0赞 Ammon 1/25/2023
我无法让它与我的图片一起使用，因为我不知道如何正确添加 src 链接。
0赞 Ammon 1/25/2023
imgElm.src =https://picsum.photos/id/${images[images.next]}/300/200;
0赞 Ammon 1/25/2023
如何对内部文件夹文件执行此操作？
0赞 Mister Jojo 1/25/2023
@Ammon这是一个 模板文字 ，带有 backQuotes 而不是引号，其中 xx 是一个 js 变量。查看 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...${ xx }
0赞 Ammon 1/25/2023
现在，当您按下按钮时，它一次只能播放一张图像。
0赞 Ammon 2/1/2023 #3 
     <div class="main">
   
  <div class="main vid1">
      <img id="img1" src="cat2/1.svg">
      </div>
  
       <div class="main vid2">
      <img id="img2" src="cat2/1.svg">
      </div>
    
 
      
</div>

     
    <div class="navfooter"> 
    
    
    <button id="bt1"></button>
    <button id="bt2"></button>
    
           
        </div>

  

     <div class="hidden-images">
    <img src="cat/1.svg" />
    <img src="cat/2.svg" />
    <img src="cat/3.svg" />
    <img src="cat/4.svg" />
    <img src="cat/5.svg" />
    <img src="cat/6.svg" />
    <img src="cat/7.svg" />
    <img src="cat/8.svg" />
    <img src="cat/9.svg" />
    <img src="cat/10.svg" />
    <img src="cat/11.svg" />
    <img src="cat/12.svg" />
    <img src="cat/13.svg" />
    <img src="cat/14.svg" />
    <img src="cat/15.svg" />
    <img src="cat/16.svg" />
    <img src="cat/17.svg" />
    <img src="cat/18.svg" />
    
</div>  
    

 </div>
<script>




const
  imgElm  = document.getElementById('img1')
, btOnOff = document.getElementById('bt1')
, images  = 
  [ 'cat/1.svg',  'cat/2.svg',  'cat/3.svg',  'cat/4.svg'
  , 'cat/5.svg',  'cat/6.svg',  'cat/7.svg',  'cat/8.svg'
  , 'cat/9.svg',  'cat/10.svg', 'cat/11.svg', 'cat/12.svg'
  , 'cat/13.svg', 'cat/14.svg', 'cat/15.svg', 'cat/16.svg'
  , 'cat/17.svg', 'cat/18.svg'
  ];



images.next       = 1;
images.refintv    = 0;
images.delay      = 100;

btOnOff.onclick   = startLoop;

function startLoop()
  {
  newImage();    // immediate changing on click

  
  btOnOff.onclick     = stopLoop;
  
  images.refintv = setInterval( newImage, images.delay);
  
  function newImage()
    {
    imgElm.src  = images[images.next];
    images.next = ++images.next % images.length;
    }
  }

function stopLoop()
  {
  clearInterval(images.refintv);
  btOnOff.onclick     = startLoop;
  }

var button = document.getElementById("bt1");
var audio = document.getElementById("player");

button.addEventListener("click", function(){
  if(audio.paused){
    audio.play();
    audio.loop= true;
  
  } else {
    audio.pause();
   
  }
   
  
});
 
  
</script>

评论

0赞 Ammon 2/1/2023
现在唯一的问题是我想有 2 个图像序列，每个图像序列有 2 个按钮，但我试图将代码加倍，但没有用。
0赞 Daedalus 2/1/2023
上面的代码是这里所提问题的解决方案吗？
0赞 Mister Jojo 2/1/2023 #4

也许这会对你有所帮助......

document.querySelectorAll('div.LoopImgs ')
  .forEach( div =>
  {
  let btOnOff = div.querySelector('button')
    , images  = div.querySelectorAll('img')
    , showed  = 0
    , refintv = 0
    , nextImg =()=> {
      images[showed].classList.remove('show');
      showed = ++showed % images.length;
      images[showed].classList.add('show');
      };
  btOnOff.onclick = (e) =>
    {
    if (btOnOff.classList.toggle('stop'))
      {
      nextImg();
      refintv = setInterval( nextImg, 1700 );
      }
    else
      {
      clearInterval(refintv);
      }
    }
  })
div.LoopImgs                       { display: block; margin:1rem;         }
div.LoopImgs > button              { width: 4rem; margin: 0 0 .5rem 1rem; }
div.LoopImgs > button::before      { content: 'start'; }
div.LoopImgs > button.stop::before { content: 'stop';  }
div.LoopImgs > img                 { display : none;   }
div.LoopImgs > img.show            { display : block;  }    
<div class="LoopImgs">
  <button></button> 
  <img src="https://picsum.photos/id/14/300/200" class="show" >
  <img src="https://picsum.photos/id/15/300/200" >
  <img src="https://picsum.photos/id/16/300/200" >
  <img src="https://picsum.photos/id/17/300/200" >
  <img src="https://picsum.photos/id/18/300/200" >
  <img src="https://picsum.photos/id/19/300/200" >
  <img src="https://picsum.photos/id/21/300/200" >
  <img src="https://picsum.photos/id/22/300/200" >
</div>

<div class="LoopImgs">
  <button></button>
  <img src="https://picsum.photos/id/30/300/200" class="show" >
  <img src="https://picsum.photos/id/31/300/200" >
  <img src="https://picsum.photos/id/32/300/200" >
  <img src="https://picsum.photos/id/33/300/200" >
  <img src="https://picsum.photos/id/34/300/200" >
  <img src="https://picsum.photos/id/35/300/200" >
  <img src="https://picsum.photos/id/37/300/200" >
</div>

上一个：如何使数据表行可拖动并维护列号的顺序

下一个：可以创建n个元素的ulam序列的快速算法