jquery背景全屏播放幻灯片

HTML
<ul id="cbp-bislideshow" class="cbp-bislideshow">
    <li><img src="images/1.jpg" alt="image01"/></li>
    <li><img src="images/2.jpg" alt="image02"/></li>
    <li><img src="images/3.jpg" alt="image03"/></li>
    <li><img src="images/4.jpg" alt="image04"/></li>
    <li><img src="images/5.jpg" alt="image05"/></li>
    <li><img src="images/6.jpg" alt="image06"/></li>
</ul>
<div id="cbp-bicontrols" class="cbp-bicontrols">
    <span class="cbp-biprev"></span>
    <span class="cbp-bipause"></span>
    <span class="cbp-binext"></span>
</div>
CSS
@font-face {
    font-family: 'entypo';
    src:url('../fonts/controls/entypo.eot');
    src:url('../fonts/controls/entypo.eot?#iefix') format('embedded-opentype'),
        url('../fonts/controls/entypo.woff') format('woff'),
        url('../fonts/controls/entypo.ttf') format('truetype'),
        url('../fonts/controls/entypo.svg#entypo') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
.cbp-bislideshow {
    list-style: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    padding: 0;
    margin: 0;
}
 
.cbp-bislideshow li {
    position: absolute;
    width: 101%;
    height: 101%;
    top: -0.5%;
    left: -0.5%;
    opacity: 0;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    transition: opacity 1s;
}
 
/* If background-size supported we'll add the images to the background of the li */
 
.backgroundsize .cbp-bislideshow li {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    background-position: center center;
}
 
/* ...and hide the images */
.backgroundsize .cbp-bislideshow li img {
    display: none;
}
 
.cbp-bislideshow li img {
    display: block;
    width: 100%;
}
 
.cbp-bicontrols {
    position: fixed;
    width: 300px;
    height: 100px;
    margin: -50px 0 0 -150px;
    top: 50%;
    left: 50%;
}
 
.cbp-bicontrols span {
    float: left;
    width: 100px;
    height: 100px;
    position: relative;
    cursor: pointer;
}
 
.cbp-bicontrols span:before {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
    font-family: 'entypo';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 100px;
    font-size: 80px;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    opacity: 0.7;
}
 
.cbp-bicontrols span:hover:before {
    opacity: 1;
}
 
.cbp-bicontrols span:active:before {
    top: 2px;
}
 
span.cbp-biplay:before {
    content: "\e002";
}
 
span.cbp-bipause:before {
    content: "\e003";
}
 
span.cbp-binext:before {
    content: "\e000";
}
 
span.cbp-biprev:before {
    content: "\e001";
}
 
.cbp-bicontrols span.cbp-binext {
    float: right;
}
 
/* Fallback */
 
.no-js.no-backgroundsize .cbp-bislideshow li:first-child {
    opacity: 1;
}
 
.no-js.backgroundsize .cbp-bislideshow li:first-child img {
    display: block;
}

JAVASCRIPT
 <script src="js/jquery.min.js"></script>
    <script src="js/jquery.imagesloaded.min.js"></script>
    <script src="js/cbpBGSlideshow.min.js"></script>
    <script>
        $(function () {
            cbpBGSlideshow.init();
        });
		</script>
var cbpBGSlideshow = (function() {
 
    var $slideshow = $( '#cbp-bislideshow' ),
        $items = $slideshow.children( 'li' ),
        itemsCount = $items.length,
        $controls = $( '#cbp-bicontrols' ),
        navigation = {
            $navPrev : $controls.find( 'span.cbp-biprev' ),
            $navNext : $controls.find( 'span.cbp-binext' ),
            $navPlayPause : $controls.find( 'span.cbp-bipause' )
        },
        // current item′s index
        current = 0,
        // timeout
        slideshowtime,
        // true if the slideshow is active
        isSlideshowActive = true,
        // it takes 3.5 seconds to change the background image
        interval = 3500;
 
    function init( config ) {
 
        // preload the images
        $slideshow.imagesLoaded( function() {
             
            if( Modernizr.backgroundsize ) {
                $items.each( function() {
                    var $item = $( this );
                    $item.css( 'background-image', 'url(' + $item.find( 'img' ).attr( 'src' ) + ')' );
                } );
            }
            else {
                $slideshow.find( 'img' ).show();
                // for older browsers add fallback here (image size and centering)
            }
            // show first item
            $items.eq( current ).css( 'opacity', 1 );
            // initialize/bind the events
            initEvents();
            // start the slideshow
            startSlideshow();
 
        } );
         
    }
 
    function initEvents() {
 
        navigation.$navPlayPause.on( 'click', function() {
 
            var $control = $( this );
            if( $control.hasClass( 'cbp-biplay' ) ) {
                $control.removeClass( 'cbp-biplay' ).addClass( 'cbp-bipause' );
                startSlideshow();
            }
            else {
                $control.removeClass( 'cbp-bipause' ).addClass( 'cbp-biplay' );
                stopSlideshow();
            }
 
        } );
 
        navigation.$navPrev.on( 'click', function() { 
            navigate( 'prev' ); 
            if( isSlideshowActive ) { 
                startSlideshow(); 
            } 
        } );
        navigation.$navNext.on( 'click', function() { 
            navigate( 'next' ); 
            if( isSlideshowActive ) { 
                startSlideshow(); 
            }
        } );
 
    }
 
    function navigate( direction ) {
 
        // current item
        var $oldItem = $items.eq( current );
         
        if( direction === 'next' ) {
            current = current > itemsCount - 1 ? ++current : 0;
        }
        else if( direction === 'prev' ) {
            current = current < 0 ? --current : itemsCount - 1;
        }
 
        // new item
        var $newItem = $items.eq( current );
        // show / hide items
        $oldItem.css( 'opacity', 0 );
        $newItem.css( 'opacity', 1 );
 
    }
 
    function startSlideshow() {
 
        isSlideshowActive = true;
        clearTimeout( slideshowtime );
        slideshowtime = setTimeout( function() {
            navigate( 'next' );
            startSlideshow();
        }, interval );
 
    }
 
    function stopSlideshow() {
        isSlideshowActive = false;
        clearTimeout( slideshowtime );
    }
 
    return { init : init };
 
})();