利用jQuery实现全屏幻灯片特效



46 183 62



特效描述:利用jQuery实现全屏幻灯片特效,利用jQuery实现全屏幻灯片特效

代码结构

1. 引入CSS

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300' rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bigvideo.css">

2. 引入JS

<script src="js/modernizr-2.5.3.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.8.1.min.js"><\/script>')</script>
<script src="js/jquery-ui-1.8.22.custom.min.js"></script>
<script src="js/jquery.imagesloaded.min.js"></script>
<script src="http://vjs.zencdn.net/c/video.js"></script>
<script src="js/bigvideo.js"></script>
<script src="js/jquery.transit.min.js"></script>

3. HTML代码

    <!-- Codrops top bar -->
实        <span class="right">
        </span>
        <div class="clr"></div>
    </div><!--/ Codrops top bar -->
    <header>
        <h1>Fullscreen Video Slideshow <span>with BigVideo.js</span></h1>
        <p>The videos in this demo are from <a href="http://51qianduan.com/" target="_blank">Beachfront B-Roll</a>, a great place to download unique HD stock video footage and animated backgrounds for any production purpose (for free!).</p>
        <p><small>A demo for</small> <a href="http://51qianduan.com/" target="_blank">BigVideo.js</a> <small>by <a href="http://51qianduan.com/" target="_blank" rel="author">@johnpolacek</a></small></p>
    </header>
    <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>
    <!-- BigVideo Dependencies -->
    <!-- BigVideo -->
    <!-- Tutorial Demo -->
    <script>
        $(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
                    })
                });
            }
        });
    </script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动导航菜单 图片头像上传 滑动选项卡切换 文件上传 图片滑动 文本框 文字滑动 下拉框 滑动手风琴 复选 滑动星星打分 单选 登录框 注册框 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 滑动滑过 切换按钮 form表单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到