Примеры исспользования jQuery
.pdf
jQuery. Карусель
Код html-страницы:
<!DOCTYPE html> <html>
<head>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="script.js"></script> <!-- подключаем наш скрипт --> <link rel="stylesheet" type="text/css" href="style.css"> <!-- подключаем стилевой файл -->
</head>
<body>
<div class="b-carousel"> <!-- контейнер, в котором будет карусель -->
<div class="b-carousel-button-left"></div> <!-- левая кнопка --> <div class="b-carousel-button-right"></div> <!-- правая кнопка -->
<div class="h-carousel-wrapper"> <!-- видимая область карусели -->
<div class="h-carousel-items"> <!-- весь набор элементов карусели -->
<div class="b-carousel-block"> <!-- первый элемент карусели --> <a href="#" class="a-carousel-image-link">
<img src="img/carousel1.jpg" alt="" />
</a>
</div>
<div class="b-carousel-block">
<a href="#" class="a-carousel-image-link"> <img src="img/carousel2.jpg" alt="" />
</a>
</div>
jQuery. Карусель
Код html-страницы:
<div class="b-carousel-block">
<a href="#" class="a-carousel-image-link"> <img src="img/carousel3.jpg" alt="" />
</a>
</div>
<div class="b-carousel-block">
<a href="#" class="a-carousel-image-link"> <img src="img/carousel4.jpg" alt="" />
</a>
</div>
<div class="b-carousel-block"> <!-- последний элемент карусели --> <a href="#" class="a-carousel-image-link">
<img src="img/carousel5.jpeg" alt="" />
</a>
</div>
</div>
</div>
</div>
</body>
</html>
jQuery. Карусель
Код style.css:
* {
margin: 0; padding: 0; }
body {
background: #000; }
img {
border: 0; }
.b-carousel {
width: 948px; /* ширина всего блока */ margin: 50px auto;
}
.h-carousel-wrapper {
width: 888px; /* ширина области карусели */ position: relative;
overflow: hidden; /* скрываем содержимое, выходящее за рамки основной области */ margin: 0 auto; /* выравниваем по центру относительно родительского блока */
}
.h-carousel-items {
width: 10000px; /* устанавливаем большую ширину для набора элементов карусели, чтобы в неё всё поместилось */
position: relative; /* позиционируем блок относительно основной области карусели */
}
.b-carousel-block {
float: left; /* выстраиваем все элементы карусели в ряд */ width: 210px; /* задаём ширину каждого элемента */
padding: 5px 6px; /* делаем отступы, чтобы элементы не сливались */
}
jQuery. Карусель
Код style.css:
.a-carousel-image-link { /* тут чисто оформление содержимого */ display: block;
width: 206px; height: 150px; overflow: hidden;
border: 2px solid #fff;
}
.b-carousel-button-left, .b-carousel-button-right { width: 28px; /* задаем ширину кнопок */ height: 36px; /* задаем высоту кнопок */ position: relative;
top: 60px; /* позиционируем кнопки */
cursor: pointer; /* делаем кнопкам курсор в виде "пальца" */
}
.b-carousel-button-left {
float: left; /* выравниваем левую кнопку по левому краю */ background: url(img/carousel-left.png); /* картинка с левой кнопкой */
}
.b-carousel-button-right {
float: right; /* выравниваем правую кнопку по правому краю */ background: url(img/carousel-right.png); /* картинка с правой кнопкой */
}
jQuery. Карусель
Код script.js :
$(document).ready(function(){
$(".b-carousel-button-right").click(function(){ // при клике на правую кнопку запускаем следующую функцию:
$(".h-carousel-items").animate({left: "-222px"}, 200); // производим анимацию: блок с набором картинок уедет влево на 222 пикселя (это ширина одного прокручиваемого элемента) за 200 милисекунд.
setTimeout(function () { // устанавливаем задержку времени перед выполнением следующих функций. Задержка нужна, т.к. эти ффункции должны запуститься только после завершения анимации.
$(".h-carousel-items .b-carousel-block").eq(0).clone().appendTo(".h-carousel- items"); // выбираем первый элемент, создаём его копию и помещаем в конец карусели
$(".h-carousel-items .b-carousel-block").eq(0).remove(); // удаляем первый
элемент карусели
$(".h-carousel-items").css({"left":"0px"}); // возвращаем исходное смещение набора набора элементов карусели
}, 300); });
$(".b-carousel-button-left").click(function(){ // при клике на левую кнопку выполняем следующую функцию:
$(".h-carousel-items .b-carousel-block").eq(-1).clone().prependTo(".h-carousel-items"); //
выбираем последний элемент набора, создаём его копию и помещаем в начало набора $(".h-carousel-items").css({"left":"-222px"}); // устанавливаем смещение набора -222px $(".h-carousel-items").animate({left: "0px"}, 200); // за 200 милисекунд набор элементов
плавно переместится в исходную нулевую точку
$(".h-carousel-items .b-carousel-block").eq(-1).remove(); // выбираем последний элемент карусели и удаляем его
});});