我有一个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>
答案 0 :(得分:0)
在滑块的当前功能中添加一个点击功能...类似于悬停,但是点击它,这样当你点击PLAY区域时它将影响滑块。 ..即使您点击播放并且点击与滑块无关,视频在滑块上并且滑块正在等待点击功能结果......这样的事实可行。
答案 1 :(得分:0)
使用视频事件播放/暂停来更改变量
xts