Полно-экранное слайд-шоу с возможностью авто-проигрывания.
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;
}
/* Если изображение подходит для размеров экрана выставляем её в качестве фона li */
.backgroundsize .cbp-bislideshow li {
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-position: center center;
}
/* … и прячем изображения */
.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;
}
/* Фолбэк */
.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="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- imagesLoaded jQuery plugin by @desandro :
https://github.com/desandro/imagesloaded -->
<script src="js/jquery.imagesloaded.min.js"></script>
<script src="js/cbpBGSlideshow.min.js"></script>
<script>
$(function() {
cbpBGSlideshow.init();
});
</script>
Код
/**
* cbpBGSlideshow.js v1.0.0
* http://www.codrops.com
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2013, Codrops
* http://www.codrops.com
*/
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 = 0,
// счётчик
slideshowtime,
// true если стайд-шоу активно
isSlideshowActive = true,
// засекаем 3.5 секунды для смены изображений
interval = 3500;
function init( config ) {
// подгружаем изображения
$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();
// для старых браузеров добавляем фолбэк
}
// показываем первый объект
$items.eq( current ).css( 'opacity', 1 );
// инициализация событий
initEvents();
// начинаем слайдшоу
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 ) {
// текущий объект
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 };
})();
