Создание простого ползунка изображения jQuery с помощью непрозрачности или скользящих эффектов

. При использовании предварительно построенных плагинов может быть удобно, они также могут добавить ненужный вес и ввести потенциальные конфликты с существующим кодом. Эта статья демонстрирует, как создать простой и настраиваемый ползунок изображения jQuery с нуля.

jQuery

перед продолжением, важно понять две ключевые функции jquery:

• index (). Бортовые братьев. Fadein / Fadeout Effect

• 
• 
...

• 1
• 2
...

ul.images { позиция: относительно; } Ul.Image li { позиция: абсолютно; }

jQuery:

• 
• 
...

• 1
• 2
...

2. Эффект скольжения

ul.images {
  position: relative;
}
ul.images li {
  position: absolute;
}

то же самое, что и Fadein/Fadeout Effect

ul.images {
  position: relative;
}
ul.images li {
  position: absolute;
}

. Mask { Плавание: осталось; Маржа: 40px; Ширина: 270px; Высота: 266px; переполнение: скрыто; } Ul.Images { позиция: относительно; Верх: 0px; слева: 0px; } /* Эта ширина должна быть общей шириной изображений, рассчитанной с помощью jQuery. */ Ul.Image li { Плавание: осталось; }

var target; var triggers = $ ('ul.triggers li'); var Images = $ ('ul.Images li'); var astelem = triggers.length - 1; var mask = $ ('. Mask ul.images'); var imgwidth = images.width (); triggers.first (). addClass ('active'); mask.css ('width', imgwidth * (astelem 1) 'px'); функция SliderResponse (Target) { mask.stop (true, false) .animate ({'Left': '-' imgwidth * target 'px'}, 300); triggers.removeclass ('Active'). EQ (Target) .AdDClass ('Active'); }

over jquery response

.mask {
  float: left;
  margin: 40px;
  width: 270px;
  height: 266px;
  overflow: hidden;
}
ul.images {
  position: relative;
  top: 0px;
  left: 0px;
}
/* This width must be the total width of the images, calculated with jQuery. */
ul.images li {
  float: left;
}

triggers.click (function () { if (! $ (this) .hasclass ('active')) { target = $ (this) .index (); SliderResponse (Target); переселение (); } }); $ ('. Next'). Click (function () { target = $ ('ul.triggers li.active'). index (); Target === Lastelem? target = 0: target = target 1; SliderResponse (Target); переселение (); }); $ ('. Prev'). Click (function () { target = $ ('ul.triggers li.active'). index (); Tastelem = triggers.length - 1; Target === 0? Target = TasteLem: Target = Target - 1; SliderResponse (Target); переселение (); }); function slidertiming () { target = $ ('ul.triggers li.active'). index (); Target === Lastelem? target = 0: target = target 1; SliderResponse (Target); } var imingrun = setInterval (function () {slidertiming ();}, 5000); Function Repettiming () { ClearInterval (TimingRun); timingrun = setInterval (function () {slidertiming ();}, 5000); } это полное решение позволяет настраивать внешний вид и функциональность слайдера для удовлетворения конкретных потребностей. Эффекты непрозрачности и скольжения могут быть легко взаимозаменяются, чтобы создать разные образы. Кроме того, ползунок можно управлять через триггеры, следующие/пре -прежние кнопки и даже автоматизированный с функцией времени.