Question

我正在寻找一个与goo.gl/o1GWFr

完全相同的滑块

如果您注意到，则会播放多个视频。然而，正在跟踪的特定鼠标移动＆amp;因此，当我们的鼠标移动到达特定位置时，仅播放下一个视频。同样，同一个循环会继续播放同一个滑块中的更多视频。

任何人都可以指导我这是怎么做到的？是否有可用于执行相同滑块的库或教程？

我试过检查＆amp;检查代码，但仍然无法理解它是如何执行的。

非常感谢，希望获得惊人的支持！

Answer 1

Here's a fiddle I made。它实现了类似的（基本）效果，您可以将其用作构建的基础，但是您要求的是相当多的工作。做一些研究，看看延迟某些视频播放，计算动画的迭代次数，然后使用该信息来确定播放哪些视频。

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

守则： HTML：

<div class="wrapper">
  <div class="hoverPanel"></div>
  <div id="b">
    <img src="http://vtdavy.com/wp-content/uploads/2015/02/life_in_space.jpg">
    <img src="http://www.thespaceshow.com/sites/default/files/shows/styles/front_page_three_blocks/public/Deep-Space-Cloud3_0.jpg?itok=QBRCnvLL">
    <img src="http://vtdavy.com/wp-content/uploads/2015/02/life_in_space.jpg">
    <img src="http://www.thespaceshow.com/sites/default/files/shows/styles/front_page_three_blocks/public/Deep-Space-Cloud3_0.jpg?itok=QBRCnvLL">
    <video muted loop id="v1" class="vidz" width="100px" height="auto">
      <source src="http://mazwai.com/system/posts/videos/000/000/208/original/white-lilies.mp4" type="video/mp4">
    </video>
    <video muted loop id="v2" class="vidz" width="100px" height="auto">
      <source src="http://mazwai.com/system/posts/videos/000/000/208/original/white-lilies.mp4" type="video/mp4">
    </video>
    <div class="clearfix"></div>
  </div>
</div>

CSS：

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;
}

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
});

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

1 个答案: