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

3okqufwl 于 2023-02-02 发布在 Java

关注(0)|答案(4)|浏览(99)

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

来源：https://stackoverflow.com/questions/75190582/i-have-an-animated-image-sequence-which-plays-in-a-loop-how-do-connect-it-to-a

4条答案

按热度按时间

b1zrtrql1#

这应该会有所帮助。有很多方法可以组织和优化它，但这应该会给予你一个开始的地方。

<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）回复(0）举报 2023-02-02

x6yk4ghg2#

更复杂的东西。

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）回复(0）举报 2023-02-02

fgw7neuy3#

<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）回复(0）举报 2023-02-02

yquaqz184#

也许这能帮你...

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>

赞(0）回复(0）举报 2023-02-02

我来回答

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

4条答案

相关问题

热门标签

最新问答