停止滾動鼠標懸停

Question

使用https://designshack.net/articles/css/infinitephotobanner/

我想停，一旦鼠標懸停在圖片滾動，並將繼續它一旦離開了圖像。

我希望我所要求的是可能的，非常感謝您可以提供的任何幫助。

Answer 1

它可以很容易地用Javascript來完成。這Stack Overflow answer描述如何暫停和恢復CSS動畫。利用這一點，我要說的是，你想要的代碼會是這個樣子：

var images = // Get all of the images in the slideshow 
var first = // Get the that has the animation defined in the CSS 

function pauseAnimation() { 
    first.style.webkitAnimationPlayState = 'paused'; 
} 

function resumeAnimation() { 
    first.style.webkitAnimationPlayState = 'running'; 
} 

for (var i = 0; i < images.length; i++) { 
    images[i].addEventListener("mouseenter", pauseAnimation); 
    images[i].addEventListener("mouseleave", resumeAnimation); 
} 

這裏是一個JSFiddle行動證明這一點。可能CSS中使用應該這樣做

Answer 2

兩個函數，

• 哈弗

• -webkit-動畫播放狀態：暫停;

  (divname):hover{ 
  webkit-animation-play-state-paused; 
  
  } 
  

  或沿着這些線的東西。