Вращающиеся изображения Слайд-шоу на CSS3 и JQuery
Сегодня мы собираемся использовать JQuery и CSS3 повороты,
наряду с JQuery плагином вращения, чтобы
создать красивое слайд-шоу. Вы можете использовать его, чтобы оживить ваши
веб-сайты, страницы продуктов и другие проекты.
СМОТРЕТЬ ДЕМО СКАЧАТЬ ИСХОДНИК
HTML
Следуя традиции, мы начнем с создания HTML разметки
слайд-шоу. Основным элементом контейнера будет элемент DIV.
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>Rotating Slideshow With jQuery and
CSS3 | Tutorialzine Demo</title>
<link rel="stylesheet"
type="text/css" href="css/styles.css" />
</head>
<body>
<div id="slideShowContainer">
<div id="slideShow">
<ul>
<li><img src="img/photos/1.jpg"
width="100%" alt="Fish" /></li>
<li><img src="img/photos/2.jpg"
width="100%" alt="Ancient" /></li>
<li><img src="img/photos/3.jpg"
width="100%" alt="Industry" /></li>
<li><img src="img/photos/4.jpg"
width="100%" alt="Rain" /></li>
</ul>
</div>
<a
id="previousLink" href="#">»</a>
<a
id="nextLink" href="#">«</a>
</div>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script
src="js/jquery.rotate.js"></script>
<script
src="js/script.js"></script>
</body>
</html>
Слайды определяются как элементы LI внутри неупорядоченного
списка. Обратите внимание, что ширина изображения установлен на 100%.
В нижней части, мы включаем JQuery библиотеки, наши
собственные script.js файл, и плагин JQuery поворот. Мы используем плагин,
поэтому мы можем работать с CSS3 вращением в кросс-браузерной моде, как вы увидите на
последнем шаге этого урока.
CSS
styles.css
#slideShowContainer{
width:510px;
height:510px;
position:relative;
margin:120px
auto 50px;
}
#slideShow{
position:absolute;
height:490px;
width:490px;
background-color:#fff;
margin:10px
0 0 10px;
z-index:100;
-moz-box-shadow:0
0 10px #111;
-webkit-box-shadow:0
0 10px #111;
box-shadow:0
0 10px #111;
}
#slideShow ul{
position:absolute;
top:15px;
right:15px;
bottom:15px;
left:15px;
list-style:none;
overflow:hidden;
}
#slideShow li{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
#slideShowContainer > a{
border:none;
text-decoration:none;
text-indent:-99999px;
overflow:hidden;
width:36px;
height:37px;
background:url('../img/arrows.png')
no-repeat;
position:absolute;
top:50%;
margin-top:-21px;
}
#previousLink{
left:-38px;
}
#previousLink:hover{
background-position:bottom
left;
}
a#nextLink{
right:-38px;
background-position:top
right;
}
#nextLink:hover{
background-position:bottom
right;
}
Несмотря на то, что мы определили ширину 490px , ее полный размер на самом деле510px .
Эта разница в 20px внизу изображения (так как они привязаны к ширине Слайда, которые восстанавливаются от их
нормального размера 480px до 460px. Как вы увидите в следующем шаге мы
используем JQuery анимацию, чтобы увеличить изображение до полного размера.
Таким образом, даже при полном увеличении, изображение в действительности обычного
размера, и нет потери качества.
JQuery
Хотя большинство современных браузеров поддерживает CSS3
вращения, это все еще довольно много работы со свойствами конкретного
производителя. К счастью, есть плагины которые занимаются этим вместо нас. Я
выбрал плагин JQuery поворот, так как он также прекрасно интегрируется с анимацией
и CSS , это означает, что мы можем легко
анимировать вращение элементов
script.js - Часть 1
$(document).ready(function(){
var
slideShow = $('#slideShow'),
ul
= slideShow.find('ul'),
li
= ul.find('li'),
cnt
= li.length;
//
As the images are positioned absolutely, the last image will be shown on top.
//
This is why we force them in the correct order by assigning z-indexes:
updateZindex();
if($.support.transform){
//
Modern browsers with support for css3 transformations
li.find('img').css('rotate',function(i){
//
Rotating the images counter-clockwise
return
(-90*i) + 'deg';
});
//
Binding a custom event. the direction and degrees parameters
//
are passed when the event is triggered later on in the code.
slideShow.bind('rotateContainer',function(e,direction,degrees){
//
Zooming in the slideshow:
slideShow.animate({
width : 510,
height : 510,
marginTop : 0,
marginLeft : 0
},'fast',function(){
if(direction
== 'next'){
//
Moving the topmost image containing Li at
//
the bottom after a fadeOut animation
$('li:first').fadeOut('slow',function(){
$(this).remove().appendTo(ul).show();
updateZindex();
});
}
else {
//
Showing the bottommost Li element on top
//
with a fade in animation. Notice that we are
//
updating the z-indexes.
var
liLast = $('li:last').hide().remove().prependTo(ul);
updateZindex();
liLast.fadeIn('slow');
}
//
Rotating the slideShow. css('rotate') gives us the
//
current rotation in radians. We are converting it to
//
degrees so we can add +90 or -90.
slideShow.animate({
rotate:Math.round($.rotate.radToDeg(slideShow.css('rotate'))+degrees)
+ 'deg'
},'slow').animate({
width : 490,
height : 490,
marginTop : 10,
marginLeft : 10
},'fast');
});
});
//
By triggering the custom events below, we can
//
show the previous / next images in the slideshow.
slideShow.bind('showNext',function(){
slideShow.trigger('rotateContainer',['next',90]);
});
slideShow.bind('showPrevious',function(){
slideShow.trigger('rotateContainer',['previous',-90]);
});
}
В коде выше, вы можете видеть, что мы связали количество
пользовательских событий.showNext и showPrevious, которые мы используем для управления слайд-шоу. Это, в
свою очередь, выполнит событие
rotateContainer, и передаст направление
и степень качества параметров (вы можете
объединить их в один параметр, но я считаю его более четким, в таком варианте).
script.js - Часть 2
else{
//
Fallback for Internet Explorer and older browsers
slideShow.bind('showNext',function(){
$('li:first').fadeOut('slow',function(){
$(this).remove().appendTo(ul).show();
updateZindex();
});
});
slideShow.bind('showPrevious',function(){
var
liLast = $('li:last').hide().remove().prependTo(ul);
updateZindex();
liLast.fadeIn('slow');
});
}
//
Listening for clicks on the arrows, and
//
triggering the appropriate event.
$('#previousLink').click(function(){
if(slideShow.is(':animated')){
return
false;
}
slideShow.trigger('showPrevious');
return
false;
});
$('#nextLink').click(function(){
if(slideShow.is(':animated')){
return
false;
}
slideShow.trigger('showNext');
return
false;
});
//
This function updates the z-index properties.
function
updateZindex(){
//
The CSS method can take a function as its second argument.
//
i is the zero-based index of the element.
ul.find('li').css('z-index',function(i){
return
cnt-i;
});
}
});
Во второй части кода, вы можете увидеть фрагмент, который
выполняется только в браузерах, которые не поддерживают CSS3 преобразований.
Обратите внимание, что в этом случае мы также определим тот же showNext и
showPrevious событие, но здесь они просто исчезают в или из изображения, не
запуская вращения.
UpdateZindex функция также
важна, так как в противном случае слайды будут показаны в обратном порядке. Эта
функция перебирает элементы в том порядке, в котором они находятся настоящее
время, и поэтому они отобразятся корректно.
Все наше слайд-шоу готово!
СМОТРЕТЬ ДЕМО СКАЧАТЬ ИСХОДНИК
Ссылка на
источник
| 
