banner 3D 效果自適應

http://xingeedu.com/

頁面

<div id="navbar">
            <div id="box">
                <c:forEach items="${data.value.ads.data }" var="ads" varStatus="vt">
                    <figure class="slide">
                        <a href="${ads.bizParams}" data-img="${ads.image }"></a>
                    </figure>
                </c:forEach>
            </div>
            <div id="time-indicator"></div>
            <nav class="slider-controls">
                <ul id="controls">
                <c:forEach items="${data.value.ads.data }" var="ads" varStatus="vt">
                        <li><a class="goto-slide <c:if test="${vt.index==0 }">current</c:if>" href="#" data-slideindex="${vt.index }"></a></li>
                        </c:forEach>
                </ul>
            </nav>
        </div>

css

#navbar{
    position:relative;
    height:500px;
    overflow:hidden;
    background: url(../../../image/r_loading.gif) #eee no-repeat;
    background-position:center center;    
    background-size:80px 80px;
}
#navbar .slide a{
    background-position:center center;
    display:inline-block;
    width:100%;
    height:500px;
    background-repeat:no-repeat
}

js

function initBanner(){
        //後臺上傳寬高爲1920*500
        var barImg = $("#navbar").find("a");
        barImg.each(function(){
            var imgURL = $(this).data("img");
            $(this).css({"background-image":"url("+imgURL+")"});
        })
        //輪播
        var $box = $('#box'), $indicators = $('.goto-slide'), $effects = $('.effect'), $timeIndicator = $('#time-indicator'), slideInterval = 5000;
        var switchIndicator = function($c, $n, currIndex, nextIndex) {
            $timeIndicator.stop().css('width', 0);
            $indicators.removeClass('current').eq(nextIndex).addClass(
                    'current');
        };
        //計時條
        var startTimeIndicator = function() {
            $timeIndicator.animate({
                width : '100%'
            }, slideInterval);
        };
        //點點    
        $('#controls').on('click', '.goto-slide', function(ev) {
            $box.boxSlider('showSlide', $(this).data('slideindex'));
            ev.preventDefault();
        });
        
        startTimeIndicator();
        
        $box.boxSlider({
               speed : 1000,
               autoScroll : true,
               timeout : slideInterval,
               next : '#next',
               prev : '#prev',
               pause : '#pause',
               effect : 'fade',
               blindCount : 15,
               onbefore : switchIndicator,
               onafter : startTimeIndicator
           });
        /兼容ie
        if (window.navigator.userAgent.indexOf('Trident') != -1) {
            //兼容
            $box.boxSlider('option', 'effect', "scrollHorz");
        }else{
            //極速模式
            $box.boxSlider('option', 'effect', "scrollHorz3d");
        }
    }

插件

本文采用了插件：
http://www.html5tricks.com/demo/Adaptors/index.html