jQuery 3D слайдер для ucoz
Варианты анимации
Уже на скриншоте видно, что изображение переворачивается горизонтально. Это напоминает настоящий куб. Есть вариант вертикального переворачивания. Но помимо этих 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://stock-exchange.ucoz.com/js/jquery-1.7.2.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>
Теперь качаем архив
Z Скачать
Категория:
Слайдер для uCoz
Просмотров:
4267
