album
首頁
Blogger templates
Blogger news
Blogroll
About
$(function() { var screenIndex = 1, numScreens = $('.screen').length, isTransitioning = false, transitionDur = 1000; } $('#next-btn').on('click', function(e) { e.preventDefault(); if (!isTransitioning) { next(); } }); function next() { isTransitioning = true; // update video index if (screenIndex === numScreens) { screenIndex = 1; } else { screenIndex++; } $('.wrapper').transit( {'left':'-'+(100*(screenIndex-1))+'%'}, transitionDur, onTransitionComplete); } function onTransitionComplete() { isTransitioning = false; } var screenIndex = 1, numScreens = $('.screen').length, isTransitioning = false, transitionDur = 1000, BV, isTouch = Modernizr.touch; var screenIndex = 1, numScreens = $('.screen').length, isTransitioning = false, transitionDur = 1000, BV, isTouch = Modernizr.touch; // Next button click goes to next div $('#next-btn').on('click', function(e) { e.preventDefault(); if (!isTransitioning) { next(); } }); 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) } $('.wrapper').transit( {'left':'-'+(100*(screenIndex-1))+'%'}, transitionDur, onTransitionComplete); } function onVideoLoaded() { $('#screen-'+screenIndex).find('.big-image').transit({'opacity':0},200) } function onTransitionComplete() { isTransitioning = false; if (!isTouch) { $('#big-video-wrap') .css('left',0); showVideo(); } }
Some Navigation Examples
Arrows
Nav
Toggle Pause
Pause/Play it