Javascript 滑块上的多个视频以特定的鼠标移动播放

我正在寻找一个与goo.gl/o1GWFr完全相同的滑块

如果您注意到，正在播放多个视频。然而，有一些特定的鼠标移动正在被跟踪&因此，只有当鼠标移动到特定位置时，才会播放下一个视频。同样，相同的循环将继续在同一滑块中播放更多视频

有人能告诉我这是怎么做到的吗？是否有库或教程可用于执行相同的滑块

我试着检查和检查代码，但是仍然无法理解它是如何执行的

提前非常感谢，希望能得到大家的支持

。它实现了类似的（基本）效果，您可以使用它作为基础进行构建，但是您要求的是相当大的工作量。做一些研究，看看延迟播放某些视频，计算动画的迭代次数，然后使用这些信息确定播放哪些视频

我的示例是如何工作的：当您将鼠标悬停在滑块右侧的透明div上时，jQuery会启动CSS动画并播放视频。当您将鼠标从该div上取下时，它会暂停CSS动画并暂停其中一个视频，但会留下一个视频播放

守则： HTML:

jQuery：

var vid = document.getElementById("v1"); 
var vid2 = document.getElementById("v2"); 

function playVid() { 
    vid.play(); //plays #v1
    vid2.play(); //plays #v2
} 

function pauseVid() { 
    vid.pause(); 
}
$(".hoverPanel").on("mouseover", function(){
  playVid(); // run playVid function
  if ($("#b").hasClass("run")){
  $(".run").css({"-webkit-animation-play-state": "running", "animation-play-state": "running"}); //plays slider
  }
  else {
  $("#b").addClass("run"); //Adds animation class
  }
});
$(".hoverPanel").on("mouseleave", function(){
    $(".run").css({"-webkit-animation-play-state": "paused", "animation-play-state": "paused"}); //pauses slider
  pauseVid(); // run pauseVid function
});

div.wrapper {
  overflow: hidden;
  width: 800px;
  height: 210px;
  position: relative;
}
#b {
  position:relative;
  width: 1600px; // Width of four images
}
.run {
  animation: moveSlideshow 12s linear infinite;
}
#b > img {
  float: left;
  width: 400px;
}
@keyframes moveSlideshow {
  100% { 
    transform: translateX(-800px);  
  }
}
.vidz{ 
  position: absolute;
}
#v1 {
  bottom: 0;
  left: 500px;
}
#v2 {
  top: 0;
  left: 850px;
}
.hoverPanel {
  position: absolute;
  width: 100px;
  right: 0;
  top: 0;
  bottom: 0;
  cursor: pointer;
  z-index: 2;
}
.clearfix {
  clear: both;
}

var vid = document.getElementById("v1"); 
var vid2 = document.getElementById("v2"); 

function playVid() { 
    vid.play(); //plays #v1
    vid2.play(); //plays #v2
} 

function pauseVid() { 
    vid.pause(); 
}
$(".hoverPanel").on("mouseover", function(){
  playVid(); // run playVid function
  if ($("#b").hasClass("run")){
  $(".run").css({"-webkit-animation-play-state": "running", "animation-play-state": "running"}); //plays slider
  }
  else {
  $("#b").addClass("run"); //Adds animation class
  }
});
$(".hoverPanel").on("mouseleave", function(){
    $(".run").css({"-webkit-animation-play-state": "paused", "animation-play-state": "paused"}); //pauses slider
  pauseVid(); // run pauseVid function
});