[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Слайд-шоу фона CSS Javascript
Neo Дата: Понедельник, 17.02.2014, 15:11 | Сообщение 1


Полно-экранное слайд-шоу с возможностью авто-проигрывания.

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 };

})();

Статус: Neo
  • Страница 1 из 1
  • 1
Поиск: