Как сделать функцию на jquery

В этой статье я покажу как сделать слайдер изображений на jQuery.

Прежде чем добавлять javascript, необходимо составить структуру документа на HTML и CSS. Так легче ориентироваться. Но перед этим подумайте вот о чем:

jquery слайдер изображений

demo

Прежде чем добавлять javascript, необходимо составить структуру документа на HTML и CSS. Так легче ориентироваться. Но перед этим подумайте вот о чем:

Где скрывать элементы?

  • Внизу, наверху, за элементом или под видимым элементом?

Как скрывать элементы?

  • Скрываемым элементам назначить свойство display со значением none (веб-страница формируется так, словно элемента и не было)?
  • Скрывать за родительским элементом, которому назначить overflow:hidden ?
  • Или скрывать под видимым элементом, при помощи свойства z-index ?

Ладно, хватит об этом, давайте начнем.

Разметка HTML

Итак, давайте представим, что мы будем делать. Для этого я нарисовал небольшую схему.

схема слайдера

HTML

<div id="gallery-wrap"> <ul id="gallery"> <li><a href="image1.jpg"> <img src="thumb1.jpg" alt="" /></a></li> <li><a href="image2.jpg"> <img src="thumb2.jpg" alt="" /></a></li> </ul> </div> <div id="gallery-controls"> <a href="#" id="gallery-prev"> <img src="images/prev.png" alt="" /></a< <a href="#" id="gallery-next"> <img src="images/next.png" alt="" /></a> </div>
  • #gallery-wrap видимая область
  • #gallery неупорядоченный список
  • #gallery-controls стрелки-контроллеры

Как правило, слайдер изображений содержит более двух изображений, как в демо, но в вышеописанном коде для удобства чтения присутствует всего два.

Стили CSS

Важно установить для #gallery - position:relative, для #gallery-wrap - overflow:hidden.

CSS

#gallery-wrap {margin: 0 auto; overflow: hidden; width: 732px; position: relative;} #gallery {position: relative; left: 0; top: 0;} #gallery li{float: left; margin: 0 20px 15px 0;} #gallery li a img {border: 4px solid #40331b; height: 175px; width: 160px;} #gallery-controls{margin: 0 auto; width: 732px;} #gallery-prev{float: left;} #gallery-next{float: right;}

jQuery/Javascript

JQuery

$(document).ready(function(){ // Галлерея if(jQuery("#gallery").length){ // Объявляем переменные var totalImages = jQuery("#gallery > li").length, imageWidth = jQuery("#gallery > li:first").outerWidth(true), totalWidth = imageWidth totalImages, visibleImages = Math.round(jQuery("#gallery-wrap").width() / imageWidth), visibleWidth = visibleImages imageWidth, stopPosition = (visibleWidth - totalWidth); jQuery("#gallery").width(totalWidth); jQuery("#gallery-prev").click(function(){ if(jQuery("#gallery").position().left < 0 && !jQuery("#gallery").is(":animated")){ jQuery("#gallery").animate({left : "+=" + imageWidth + "px"}); } return false; }); jQuery("#gallery-next").click(function(){ if(jQuery("#gallery").position().left > stopPosition && !jQuery("#gallery").is(":animated")){ jQuery("#gallery").animate({left : "-=" + imageWidth + "px"}); } return false; }); } });

Описание переменных:

totalImages = jQuery(‛#gallery > li‛).length

Возвращает число равное количеству элементов li, причем только дочерних по отношению к тегу с id=’gallery’.

imageWidth = jQuery(‛#gallery > li:first‛).outerWidth(true)

Возвращает полную ширину элемента. Полная ширина = ширина + границы + отступы + поля.

totalWidth = imageWidth totalImages

Возвращает суммарную ширину всех изображений.

visibleImages = Math.round(jQuery(‛#gallery-wrap‛).width() / imageWidth)

Ширину блока #gallery-wrap делим на ширину изображения. Полученное значение округляем до целого числа.

visibleWidth = visibleImages imageWidth

Вычисляем видимую область.

stopPosition = (visibleWidth – totalWidth)

Позиция останова вычисляется вычитанием от общей ширины видимой ширины.

Принцип работы jQuery/javascript:

  1. Когда дерево тегов (DOM) загружено
  2. Если #gallery существует
  3. Объявить переменные.
  4. Установим ширину элементу #gallery (она будет равна суммарной ширине всех изображений). Это сделано, чтобы слайд-эффект работал должным образом.
  5. Когда кто-то кликает по элементу #gallery-prev
  6. Если свойство left меньше нуля и элемент #gallery в текущий момент не анимирован.
  7. Смещаем элемент #gallery вправо (left : "+=") на полную ширину изображения.
  8. Иначе возвращаем false, тем самым отменяем обычное поведение мышки.
  9. Когда кто-то кликает по элементу #gallery-next
  10. Если значение свойства left больше значение позиции останова и элемент #gallery в текущий момент не анимирован.
  11. Смещаем элемент #gallery влево (left : "-=") на полную ширину изображения.

На этом все. Надеюсь, вы нашли в этой статье что-нибудь полезное.

источник

Комментарии к статье

  • Категории
  • Архив
  •  Внесите вклад в развитие сайта, пожертвовав любую сумму на: 
    ВебМани R447432585349

азы HTML   селекторы CSS   ошибки IE   закругление CSS   Свойства CSS3   блочная верстка   jQuery скроллинг   эффекты jQuery   jQuery плагины   CSS ссылки   Sublime Text 2   Веб инструменты   Свойства CSS   Обработка форм php   текст в css   основы PHP   jQuery галерея   HTML5   сетки для верстки   clearfix css   Ссылки jQuery   Слайдер jQuery   основы jQuery   основы javascript   объекты javascript   PHP ООП   SASS   AJAX примеры   выборка jQuery   Серверное программирование   атрибуты HTML   валидация формы   плагин validation   Twitter Bootstrap   Шаблоны javascript   webpack  


Закрыть ... [X]

Делаем хороший слайдер на jQuery своими руками. Как сделать слайдер Художники роспись посуды

Как сделать функцию на jquery Как сделать функцию на jquery Как сделать функцию на jquery Как сделать функцию на jquery Как сделать функцию на jquery Как сделать функцию на jquery Как сделать функцию на jquery Как сделать функцию на jquery Как сделать функцию на jquery