Question

我有一个Slider，我修改了代码，所以它在鼠标悬停时停止。到现在为止还挺好。但是..正如你在html中看到的，我有一个带嵌入式视频的滑块。

我的问题是，即使滑块暂停，我也希望它在播放嵌入视频时停止。优选地，但不是必须的，在视频结束时恢复滑块。

Javascript：

    var VSliderHome = true;
$("#SliderHome").hover(function() {
VSliderHome = false;
}, function() {
   VSliderHome = true;
});

function autoplaySlider(length) {
    if (VSliderHome) {
        if (visibleSlidePosition < length - 1) {
        nextSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, visibleSlidePosition + 1);
        visibleSlidePosition += 1;
    } else {
        prevSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, 0);
        visibleSlidePosition = 0;
    }
    updateNavigationMarker(navigationMarker, visibleSlidePosition + 1);
    updateSliderNavigation(sliderNav, visibleSlidePosition);
}
}

HTML：

<slider.body>
<section class="cd-hero">
   <ul id="SliderHome" class="cd-hero-slider autoplay">
   <li class="selected">
      <div class="cd-full-width" style="background-image: url(img/fileupload/zlide.jpg)">
         <div class="textcont-left">
            <h2>text</h2>
            <p>text</p>
            <a href="#" class="cd-btn">Köp Nu</a>
         </div>
      </div>
   </li>
   <li style="background-image: url(img/fileupload/smatrphones.jpg)">
      <div class="cd-half-width cd-img-container">
         <iframe width="560" height="315" src="https://www.youtube.com/embed/fXu2fWz" frameborder="0" allowfullscreen></iframe>
      </div>

      <div class="cd-half-width">
         <div class="textcont-right">
            <h2>text</h2>
            <p>text</p>
            <a href="#" class="cd-btn">Mer Information</a>
         </div>
      </div>
      </li>
</section>
</body>

Answer 1

在滑块的当前功能中添加一个点击功能...类似于悬停，但是点击它，这样当你点击PLAY区域时它将影响滑块。 ..即使您点击播放并且点击与滑块无关，视频在滑块上并且滑块正在等待点击功能结果......这样的事实可行。

Answer 2

使用视频事件播放/暂停来更改变量

xts

播放嵌入电影时停止滑块。

2 个答案: