crear un control deslizante de imagen jQuery simple con opacidad o efectos deslizantes

mientras que usan complementos preconstruidos pueden ser convenientes, también pueden agregar un peso innecesario e introducir conflictos potenciales con el código existente. This article demonstrates how to create a simple and customizable jQuery image slider from scratch.

jQuery Basics

Before proceeding, it's important to understand two key jQuery functions:

• index() returns the position of the first element in a jQuery object relative to its Siblings.
• eq () selecciona un elemento basado en su valor de índice.

Slider Effects

Este deslizamiento admite opacidad y efectos de deslizamiento:

1. Fadein / Fadeout Effect

html:

• 
• 
...

• 1
• 2
...

css:

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

jQuery:

var target;
var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length - 1;

triggers.first().addClass('active');
images.hide().first().show();

function sliderResponse(target) {
  images.fadeOut(300).eq(target).fadeIn(300);
  triggers.removeClass('active').eq(target).addClass('active');
}

2. Efecto deslizante

html: igual que el efecto de fadein/fadeout

css:

. flotante: izquierda; margen: 40px; Ancho: 270px; Altura: 266px; desbordamiento: oculto; } ul.Images { Posición: relativo; arriba: 0px; Izquierda: 0px; } /* Este ancho debe ser el ancho total de las imágenes, calculado con jQuery. */ ul.Images li { flotante: izquierda; }

.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;
}

jQuery:

var Target; VAR disparadores = $ ('Ul.triggers li'); Var Images = $ ('Ul.Images Li'); var lastElem = ARGGERS.LIGTH - 1; var máscara = $ ('. Mask ul.images'); var imgwidth = images.width (); Triggers.first (). addClass ('activo'); Mask.css ('ancho', imgwidth * (lastelem 1) 'px'); function sliderResponse (Target) { Mask.stop (True, False) .animate ({'izquierda': '-' imgwidth * Target 'Px'}, 300); Triggers.remoVeclass ('activo'). EQ (Target) .addClass ('activo'); }

.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;
}

Common jQuery Respuesta

Triggers, haga clic en Eventos y cronometra:

Triggers.Click (function () { if (! $ (this) .hasclass ('activo')) { Target = $ (this) .index (); SliderResponse (objetivo); reetiming (); } }); $ ('. Next'). Click (function () { Target = $ ('ul.triggers li.active'). index (); Target === Lastelem? Target = 0: Target = Target 1; SliderResponse (objetivo); reetiming (); }); $ ('. Prev'). Click (function () { Target = $ ('ul.triggers li.active'). index (); lastElem = ARGGERS.LIGTH - 1; objetivo === 0? Target = LastElem: Target = Target - 1; SliderResponse (objetivo); reetiming (); }); función slidEming () { Target = $ ('ul.triggers li.active'). index (); Target === Lastelem? Target = 0: Target = Target 1; SliderResponse (objetivo); } var timingrun = setInterval (function () {slidEtTiming ();}, 5000); función reettiming () { ClearInterval (Timingrun); TimingRun = setInterval (function () {slidTiMing ();}, 5000); }

.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;
}

Esta solución completa permite la personalización de la apariencia y la funcionalidad del control deslizante para satisfacer las necesidades específicas. La opacidad y los efectos deslizantes se pueden intercambiar fácilmente para crear diferentes looks. Además, el control deslizante se puede controlar a través de desencadenantes, botones Next/Prev e incluso automatizado con una función de sincronización.