jQuery 3D слайдер и слайдшоу
Это хорошо, когда слайдшоу имеет удобную навигацию. Это jQuery 3D слайдер и слайдшоу, которое соответствует представлению крутого слайдера. Под изображением есть индикатор, который показывает, сколько времени до следующего слайда. По заполнению голубой полоски куб переворачивается. А можно переключать слайды самостоятельно: для этого есть специальная навигация, причем два варианта. Один вариант – стрелки слева и справа, а второй – 5 кругов. Каждый соответствует своему слайду.
Варианты анимации
Уже на скриншоте видно, что изображение переворачивается горизонтально. Это напоминает настоящий куб. Есть вариант вертикального переворачивания. Но помимо этих 3D эффектов есть более привычные: это, например, простое исчезание, т.е. плавный переход, есть вариант переключения жалюзи. Такой вид свойственен баннерам, но и для другого контента это тоже подойдет.
Код HTML
Code
<div id="page">
<section role="main">
<header role="branding">
<hgroup>
<h1>Adaptor</h1>
<h2>jQuery 3D слайдер и слайдшоу</h2>
</hgroup>
</header>
<div id="viewport-shadow">
<a href="#" id="prev"></a>
<a href="#" id="next"></a>
<div id="viewport">
<div id="box">
<figure class="slide">
<img src="1.jpg">
</figure>
<figure class="slide">
<img src="2.jpg">
</figure>
<figure class="slide">
<img src="3.jpg">
</figure>
<figure class="slide">
<img src="4.jpg">
</figure>
<figure class="slide">
<img src="5.jpg">
</figure>
</div>
</div>
<div id="time-indicator"></div>
</div>
<footer>
<nav class="slider-controls">
<ul id="controls">
<li><a class="goto-slide current" href="#" data-slideindex="0"></a></li>
<li><a class="goto-slide" href="#" data-slideindex="1"></a></li>
<li><a class="goto-slide" href="#" data-slideindex="2"></a></li>
<li><a class="goto-slide" href="#" data-slideindex="3"></a></li>
<li><a class="goto-slide" href="#" data-slideindex="4"></a></li>
</ul>
</nav>
</footer>
</section>
<aside id="effect-switcher">
<h2>Выбирите эффект</h2>
<ul id="effect-list">
<li><a href="#" class="effect current" data-fx="scrollVert3d">Верт. 3D</a></li>
<li><a href="#" class="effect" data-fx="scrollHorz3d">Горизонт. 3D</a></li>
<li><a href="#" class="effect" data-fx="scrollVert">Вертик. </a></li>
<li><a href="#" class="effect" data-fx="scrollHorz">Горизонт.</a></li>
<li><a href="#" class="effect" data-fx="blindLeft">Жалюзи</a></li>
<li><a href="#" class="effect" data-fx="blindDown">Фрагменты</a></li>
<li><a href="#" class="effect" data-fx="fade">Исчезание</a></li>
</ul>
</aside>
</div>
<section role="main">
<header role="branding">
<hgroup>
<h1>Adaptor</h1>
<h2>jQuery 3D слайдер и слайдшоу</h2>
</hgroup>
</header>
<div id="viewport-shadow">
<a href="#" id="prev"></a>
<a href="#" id="next"></a>
<div id="viewport">
<div id="box">
<figure class="slide">
<img src="1.jpg">
</figure>
<figure class="slide">
<img src="2.jpg">
</figure>
<figure class="slide">
<img src="3.jpg">
</figure>
<figure class="slide">
<img src="4.jpg">
</figure>
<figure class="slide">
<img src="5.jpg">
</figure>
</div>
</div>
<div id="time-indicator"></div>
</div>
<footer>
<nav class="slider-controls">
<ul id="controls">
<li><a class="goto-slide current" href="#" data-slideindex="0"></a></li>
<li><a class="goto-slide" href="#" data-slideindex="1"></a></li>
<li><a class="goto-slide" href="#" data-slideindex="2"></a></li>
<li><a class="goto-slide" href="#" data-slideindex="3"></a></li>
<li><a class="goto-slide" href="#" data-slideindex="4"></a></li>
</ul>
</nav>
</footer>
</section>
<aside id="effect-switcher">
<h2>Выбирите эффект</h2>
<ul id="effect-list">
<li><a href="#" class="effect current" data-fx="scrollVert3d">Верт. 3D</a></li>
<li><a href="#" class="effect" data-fx="scrollHorz3d">Горизонт. 3D</a></li>
<li><a href="#" class="effect" data-fx="scrollVert">Вертик. </a></li>
<li><a href="#" class="effect" data-fx="scrollHorz">Горизонт.</a></li>
<li><a href="#" class="effect" data-fx="blindLeft">Жалюзи</a></li>
<li><a href="#" class="effect" data-fx="blindDown">Фрагменты</a></li>
<li><a href="#" class="effect" data-fx="fade">Исчезание</a></li>
</ul>
</aside>
</div>
Код JavaScript
Code
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="box_slider.js"></script>
<script>
$(function () {
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: '680px'}, slideInterval);
};
// initialize the plugin with the desired settings
$box.boxSlider({
speed: 1000
, autoScroll: true
, timeout: slideInterval
, next: '#next'
, prev: '#prev'
, pause: '#pause'
, effect: 'scrollVert3d'
, blindCount: 25
, onbefore: switchIndicator
, onafter: startTimeIndicator
});
startTimeIndicator();
// pagination isn't built in simply because it's easy to
// roll your own with the plugin API methods
$('#controls').on('click', '.goto-slide', function (ev) {
$box.boxSlider('showSlide', $(this).data('slideindex'));
ev.preventDefault();
});
$('#effect-list').on('click', '.effect', function (ev) {
var $effect = $(this);
$box.boxSlider('option', 'effect', $effect.data('fx'));
$effects.removeClass('current');
$effect.addClass('current');
switchIndicator(null, null, 0, 0);
ev.preventDefault();
});
});
</script>
<script src="box_slider.js"></script>
<script>
$(function () {
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: '680px'}, slideInterval);
};
// initialize the plugin with the desired settings
$box.boxSlider({
speed: 1000
, autoScroll: true
, timeout: slideInterval
, next: '#next'
, prev: '#prev'
, pause: '#pause'
, effect: 'scrollVert3d'
, blindCount: 25
, onbefore: switchIndicator
, onafter: startTimeIndicator
});
startTimeIndicator();
// pagination isn't built in simply because it's easy to
// roll your own with the plugin API methods
$('#controls').on('click', '.goto-slide', function (ev) {
$box.boxSlider('showSlide', $(this).data('slideindex'));
ev.preventDefault();
});
$('#effect-list').on('click', '.effect', function (ev) {
var $effect = $(this);
$box.boxSlider('option', 'effect', $effect.data('fx'));
$effects.removeClass('current');
$effect.addClass('current');
switchIndicator(null, null, 0, 0);
ev.preventDefault();
});
});
</script>
Код CSS
Code
<link href='http://fonts.googleapis.com/css?family=Russo+One' rel='stylesheet'>
<style>
/* line 17, ../../../.rvm/gems/ruby-1.8.7-p358/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
/* line 22, ../../../.rvm/gems/ruby-1.8.7-p358/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
html {
line-height: 1;
}
/* line 24, ../../../.rvm/gems/ruby-1.8.7-p358/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
ol, ul {
list-style: none;
}
/* line 26, ../../../.rvm/gems/ruby-1.8.7-p358/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* line 28, ../../../.rvm/gems/ruby-1.8.7-p358/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
/* line 30, ../../../.rvm/gems/ruby-1.8.7-p358/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
quotes: none;
}
/* line 103, ../../../.rvm/gems/ruby-1.8.7-p358/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
/* line 32, ../../../.rvm/gems/ruby-1.8.7-p358/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
a img {
border: none;
}
/* line 116, ../../../.rvm/gems/ruby-1.8.7-p358/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display: block;
}
/* line 5, sass/screen.scss */
html {
background: url(img/page-bg.png) repeat-x #333333;
font: 0.85em/1 "Russo One", Helvetica, Arial, sans-serif;
color: #999;
}
/* line 11, sass/screen.scss */
header {
margin: 20px 140px;
}
/* line 12, sass/screen.scss */
h1 {
font-size: 48px;
color: #2edbac;
text-transform: uppercase;
}
/* line 13, sass/screen.scss */
h2 {
font-size: 22px;
color: #555;
}
/* line 14, sass/screen.scss */
a {
color: #2edbac;
text-decoration: none;
}
/* line 15, sass/screen.scss */
a:hover {
border-bottom: solid 1px #2edbac;
}
#page {
width: 960px;
margin: 0 auto;
}
/* line 22, sass/screen.scss */
#viewport-shadow {
position: relative;
width: 680px;
padding: 0 140px 70px;
background: url(img/box-shadow.png) bottom no-repeat;
}
/* line 29, sass/screen.scss */
#viewport, #box, .slide {
width: 680px;
height: 460px;
}
/* line 34, sass/screen.scss */
#viewport {
overflow: hidden;
}
/* line 35, sass/screen.scss */
footer {
margin: 0 140px;
}
/* line 37, sass/screen.scss */
#controls {
position: relative;
top: -40px;
float: right;
overflow: hidden;
}
/* line 44, sass/screen.scss */
#controls li {
display: inline;
}
/* line 48, sass/screen.scss */
.goto-slide {
margin-left: 10px;
width: 14px;
height: 14px;
display: block;
float: left;
border: solid 1px #000;
background-color: #555;
border-radius: 8px;
-webkit-box-shadow: inset 0px 0px 8px #333;
-moz-box-shadow: inset 0px 0px 8px #333;
box-shadow: inset 0px 0px 8px #333;
}
/* line 62, sass/screen.scss */
.goto-slide.current {
background-color: #2edbac;
}
/* line 66, sass/screen.scss */
#next, #prev {
position: absolute;
top: 80px;
width: 30px;
height: 300px;
background: url(next-prev-sprite.png) no-repeat;
display: block;
-webkit-transition: background .4s;
-moz-transition: background .4s;
transition: background .4s;
}
/* line 78, sass/screen.scss */
#next:hover, #prev:hover {
background: url(next-prev-sprite-hover.png) no-repeat;
border: none;
}
/* line 85, sass/screen.scss */
#prev {
left: 90px;
}
/* line 86, sass/screen.scss */
#next, #next:hover {
left: 840px;
background-position: -30px 0;
}
/* line 90, sass/screen.scss */
#effect-switcher h2 {
border-bottom: solid 1px #555;
margin: 0 0 10px;
}
/* line 97, sass/screen.scss */
#effect-list {
overflow: hidden;
}
/* line 99, sass/screen.scss */
#effect-list li {
display: inline;
}
/* line 102, sass/screen.scss */
.effect, .effect:hover {
display: block;
float: left;
margin: 0 10px 0 0;
border: solid 1px black;
border-radius: 7px;
padding: 10px 12px 6px;
color: #ccc;
text-decoration: none;
background-color: #555;
-webkit-box-shadow: inset 0px 0px 8px #000;
-moz-box-shadow: inset 0px 0px 8px #333;
box-shadow: inset 0px 0px 8px #333;
}
/* line 117, sass/screen.scss */
.effect.current, .effect:hover.current {
color: #2edbac;
}
/* line 123, sass/screen.scss */
#time-indicator {
width: 0px;
height: 3px;
background-color: #2edbac;
position: absolute;
top: 460px;
left: 140px;
}
</style>
<style>
/* line 17, ../../../.rvm/gems/ruby-1.8.7-p358/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
/* line 22, ../../../.rvm/gems/ruby-1.8.7-p358/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
html {
line-height: 1;
}
/* line 24, ../../../.rvm/gems/ruby-1.8.7-p358/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
ol, ul {
list-style: none;
}
/* line 26, ../../../.rvm/gems/ruby-1.8.7-p358/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* line 28, ../../../.rvm/gems/ruby-1.8.7-p358/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
/* line 30, ../../../.rvm/gems/ruby-1.8.7-p358/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
quotes: none;
}
/* line 103, ../../../.rvm/gems/ruby-1.8.7-p358/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
/* line 32, ../../../.rvm/gems/ruby-1.8.7-p358/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
a img {
border: none;
}
/* line 116, ../../../.rvm/gems/ruby-1.8.7-p358/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display: block;
}
/* line 5, sass/screen.scss */
html {
background: url(img/page-bg.png) repeat-x #333333;
font: 0.85em/1 "Russo One", Helvetica, Arial, sans-serif;
color: #999;
}
/* line 11, sass/screen.scss */
header {
margin: 20px 140px;
}
/* line 12, sass/screen.scss */
h1 {
font-size: 48px;
color: #2edbac;
text-transform: uppercase;
}
/* line 13, sass/screen.scss */
h2 {
font-size: 22px;
color: #555;
}
/* line 14, sass/screen.scss */
a {
color: #2edbac;
text-decoration: none;
}
/* line 15, sass/screen.scss */
a:hover {
border-bottom: solid 1px #2edbac;
}
#page {
width: 960px;
margin: 0 auto;
}
/* line 22, sass/screen.scss */
#viewport-shadow {
position: relative;
width: 680px;
padding: 0 140px 70px;
background: url(img/box-shadow.png) bottom no-repeat;
}
/* line 29, sass/screen.scss */
#viewport, #box, .slide {
width: 680px;
height: 460px;
}
/* line 34, sass/screen.scss */
#viewport {
overflow: hidden;
}
/* line 35, sass/screen.scss */
footer {
margin: 0 140px;
}
/* line 37, sass/screen.scss */
#controls {
position: relative;
top: -40px;
float: right;
overflow: hidden;
}
/* line 44, sass/screen.scss */
#controls li {
display: inline;
}
/* line 48, sass/screen.scss */
.goto-slide {
margin-left: 10px;
width: 14px;
height: 14px;
display: block;
float: left;
border: solid 1px #000;
background-color: #555;
border-radius: 8px;
-webkit-box-shadow: inset 0px 0px 8px #333;
-moz-box-shadow: inset 0px 0px 8px #333;
box-shadow: inset 0px 0px 8px #333;
}
/* line 62, sass/screen.scss */
.goto-slide.current {
background-color: #2edbac;
}
/* line 66, sass/screen.scss */
#next, #prev {
position: absolute;
top: 80px;
width: 30px;
height: 300px;
background: url(next-prev-sprite.png) no-repeat;
display: block;
-webkit-transition: background .4s;
-moz-transition: background .4s;
transition: background .4s;
}
/* line 78, sass/screen.scss */
#next:hover, #prev:hover {
background: url(next-prev-sprite-hover.png) no-repeat;
border: none;
}
/* line 85, sass/screen.scss */
#prev {
left: 90px;
}
/* line 86, sass/screen.scss */
#next, #next:hover {
left: 840px;
background-position: -30px 0;
}
/* line 90, sass/screen.scss */
#effect-switcher h2 {
border-bottom: solid 1px #555;
margin: 0 0 10px;
}
/* line 97, sass/screen.scss */
#effect-list {
overflow: hidden;
}
/* line 99, sass/screen.scss */
#effect-list li {
display: inline;
}
/* line 102, sass/screen.scss */
.effect, .effect:hover {
display: block;
float: left;
margin: 0 10px 0 0;
border: solid 1px black;
border-radius: 7px;
padding: 10px 12px 6px;
color: #ccc;
text-decoration: none;
background-color: #555;
-webkit-box-shadow: inset 0px 0px 8px #000;
-moz-box-shadow: inset 0px 0px 8px #333;
box-shadow: inset 0px 0px 8px #333;
}
/* line 117, sass/screen.scss */
.effect.current, .effect:hover.current {
color: #2edbac;
}
/* line 123, sass/screen.scss */
#time-indicator {
width: 0px;
height: 3px;
background-color: #2edbac;
position: absolute;
top: 460px;
left: 140px;
}
</style>
Создать сайт в uKit
Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Воспользуйтесь сервисом uKit. Никакого кода!
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Легко! Если пользоваться нашими советами.
