当前路径：
星河码客 »
插件特效 »
jquery背景全屏播放幻灯片
HTML
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 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 }; })(); ![jquery背景全屏播放幻灯片]()
在线演示
积分下载
6毛下载
砍两刀下载
文件目录······
