我正在实现BigVideo.js，这是一个用于全屏背景视频滑块的jQuery插件。我看到的一个问题是页面加载时，第一次单击到下一张幻灯片没有过渡。同时，每隔一页之间存在过渡。如果您循环回到第一张幻灯片并第二次继续浏览，则可以在幻灯片1和2之间进行过渡。
有任何想法吗？该演示位于http://tympanus.net/Tutorials/BigVideoSlideshow/
的HTML
<div class="wrapper">
<div class="screen" id="screen-1" data-video="vid/bird.mp4">
<img src="img/bird.jpg" class="big-image" />
<h1 class="video-title">#1 Bird</h1>
</div>
<div class="screen" id="screen-2" data-video="vid/satellite.mp4">
<img src="img/satellite.jpg" class="big-image" />
<h1 class="video-title">#2 Satellite</h1>
</div>
<div class="screen" id="screen-3" data-video="vid/camera.mp4">
<img src="img/camera.jpg" class="big-image" />
<h1 class="video-title">#3 Camera</h1>
</div>
<div class="screen" id="screen-4" data-video="vid/spider.mp4">
<img src="img/spider.jpg" class="big-image" />
<h1 class="video-title">#4 Spider</h1>
</div>
<div class="screen" id="screen-5" data-video="vid/dandelion.mp4">
<img src="img/dandelion.jpg" class="big-image" />
<h1 class="video-title">#5 Dandelion</h1>
</div>
</div>
<nav id="next-btn">
<a href="#" class="next-icon"></a>
</nav>
JS
$(function() {
// Use Modernizr to detect for touch devices,
// which don't support autoplay and may have less bandwidth,
// so just give them the poster images instead
var screenIndex = 1,
numScreens = $('.screen').length,
isTransitioning = false,
transitionDur = 1000,
BV,
videoPlayer,
isTouch = Modernizr.touch,
$bigImage = $('.big-image'),
$window = $(window);
if (!isTouch) {
// initialize BigVideo
BV = new $.BigVideo({forceAutoplay:isTouch});
BV.init();
showVideo();
BV.getPlayer().addEvent('loadeddata', function() {
onVideoLoaded();
});
// adjust image positioning so it lines up with video
$bigImage
.css('position','relative')
.imagesLoaded(adjustImagePositioning);
// and on window resize
$window.on('resize', adjustImagePositioning);
}
// Next button click goes to next div
$('#next-btn').on('click', function(e) {
e.preventDefault();
if (!isTransitioning) {
next();
}
});
function showVideo() {
BV.show($('#screen-'+screenIndex).attr('data-video'),{ambient:true});
}
function next() {
isTransitioning = true;
// update video index, reset image opacity if starting over
if (screenIndex === numScreens) {
$bigImage.css('opacity',1);
screenIndex = 1;
} else {
screenIndex++;
}
if (!isTouch) {
$('#big-video-wrap').transit({'left':'-100%'},transitionDur)
}
(Modernizr.csstransitions)?
$('.wrapper').transit(
{'left':'-'+(100*(screenIndex-1))+'%'},
transitionDur,
onTransitionComplete):
onTransitionComplete();
}
function onVideoLoaded() {
$('#screen-'+screenIndex).find('.big-image').transit({'opacity':0},500)
}
function onTransitionComplete() {
isTransitioning = false;
if (!isTouch) {
$('#big-video-wrap').css('left',0);
showVideo();
}
}
function adjustImagePositioning() {
$bigImage.each(function(){
var $img = $(this),
img = new Image();
img.src = $img.attr('src');
var windowWidth = $window.width(),
windowHeight = $window.height(),
r_w = windowHeight / windowWidth,
i_w = img.width,
i_h = img.height,
r_i = i_h / i_w,
new_w, new_h, new_left, new_top;
if( r_w > r_i ) {
new_h = windowHeight;
new_w = windowHeight / r_i;
}
else {
new_h = windowWidth * r_i;
new_w = windowWidth;
}
$img.css({
width : new_w,
height : new_h,
left : ( windowWidth - new_w ) / 2,
top : ( windowHeight - new_h ) / 2
})
});
}
});
编辑：上一个按钮的代码
<nav id="prev-btn">
<a href="#" class="prev-icon"></a>
</nav>
// Preivous button click goes to previous div
$('#prev-btn').on('click', function(e) {
e.preventDefault();
if (!isTransitioning) {
prev();
}
});
function prev() {
isTransitioning = true;
// update video index, reset image opacity if starting over
if (screenIndex === numScreens) {
$bigImage.css('opacity',1);
screenIndex = 1;
} else {
screenIndex--;
}
if (!isTouch) {
$('#big-video-wrap').transit({'left':'100%'},transitionDur)
}
(Modernizr.csstransitions)?
$('.wrapper').transit(
{'left':(100*(screenIndex-1))+'%'},
transitionDur,
onTransitionComplete):
onPrevTransitionComplete();
}
最佳答案
您必须为幻灯片0添加过渡，以便他们可以执行transit。
尝试添加以下代码：
$('.wrapper').transit({'left':'-0%'},1000);
那么你的脚本应该是这样的
$(function() {
// Use Modernizr to detect for touch devices,
// which don't support autoplay and may have less bandwidth,
// so just give them the poster images instead
var screenIndex = 1,
numScreens = $('.screen').length,
isTransitioning = false,
transitionDur = 1000,
BV,
videoPlayer,
isTouch = Modernizr.touch,
$bigImage = $('.big-image'),
$window = $(window);
//Add------------------------------
$('.wrapper').transit(
{'left':'-0%'},
1000);
//------------------------------------
if (!isTouch) {
// initialize BigVideo
BV = new $.BigVideo({forceAutoplay:isTouch});
BV.init();
showVideo();
BV.getPlayer().addEvent('loadeddata', function() {
onVideoLoaded();
});
// adjust image positioning so it lines up with video
$bigImage
.css('position','relative')
.imagesLoaded(adjustImagePositioning);
// and on window resize
$window.on('resize', adjustImagePositioning);
}
// Next button click goes to next div
$('#next-btn').on('click', function(e) {
e.preventDefault();
if (!isTransitioning) {
next();
}
});
function showVideo() {
BV.show($('#screen-'+screenIndex).attr('data-video'),{ambient:true});
}
function next() {
isTransitioning = true;
// update video index, reset image opacity if starting over
if (screenIndex === numScreens) {
$bigImage.css('opacity',1);
screenIndex = 1;
} else {
screenIndex++;
}
if (!isTouch) {
$('#big-video-wrap').transit({'left':'-100%'},transitionDur)
}
(Modernizr.csstransitions)?
$('.wrapper').transit(
{'left':'-'+(100*(screenIndex-1))+'%'},
transitionDur,
onTransitionComplete):
onTransitionComplete();
}
function onVideoLoaded() {
$('#screen-'+screenIndex).find('.big-image').transit({'opacity':0},500)
}
function onTransitionComplete() {
isTransitioning = false;
if (!isTouch) {
$('#big-video-wrap').css('left',0);
showVideo();
}
}
function adjustImagePositioning() {
$bigImage.each(function(){
var $img = $(this),
img = new Image();
img.src = $img.attr('src');
var windowWidth = $window.width(),
windowHeight = $window.height(),
r_w = windowHeight / windowWidth,
i_w = img.width,
i_h = img.height,
r_i = i_h / i_w,
new_w, new_h, new_left, new_top;
if( r_w > r_i ) {
new_h = windowHeight;
new_w = windowHeight / r_i;
}
else {
new_h = windowWidth * r_i;
new_w = windowWidth;
}
$img.css({
width : new_w,
height : new_h,
left : ( windowWidth - new_w ) / 2,
top : ( windowHeight - new_h ) / 2
})
});
}
});
关于javascript - jQuery全屏视频滑块，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36453254/