Erstellen eines einfachen jQuery-Bild-Sliders mit Opazität oder Sliding-Effekten

Während der Verwendung vorgefertigter Plugins bequem sein kann, können sie auch unnötiges Gewicht hinzufügen und potenzielle Konflikte mit vorhandenem Code einführen. Dieser Artikel zeigt, wie ein einfacher und anpassbarer jQuery -Bild von Grund auf neu erstellt wird. siblings.

eq() selects an element based on its index value.

Slider Effects

• This slider supports both opacity and sliding effects:
• 1. Fadein / fadeout effect

html:

• 
• 
...

• 1
• 2
...

css:

ul.images { Position: Relativ; } ul.images li { Position: absolut; }

• 
• 
...

• 1
• 2
...

var target; var Triggers = $ ('ul.triggers li'); var images = $ ('ul.images li'); var lastelem = Trigger.Length - 1; Triggers.First (). AddClass ('Active'); Images.hide (). first (). show (); Funktion SlidereResponse (Ziel) { Images.Fadeout (300) .eq (Ziel) .fadein (300); Triggers.removeclass ('Active'). EQ (Ziel) .AddClass ('Active'); }

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

html:

gilt wie fadein/fadeout effect

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');
}

css:

. Mask {oder float: links; Rand: 40px; Breite: 270px; Höhe: 266px; Überlauf: versteckt; } ul.images { Position: Relativ; Oben: 0px; links: 0px; } /* Diese Breite muss die Gesamtbreite der Bilder sein, die mit JQuery berechnet werden. */ ul.images li { float: links; }

jQuery:

var target; var Triggers = $ ('ul.triggers li'); var images = $ ('ul.images li'); var lastelem = Trigger.Length - 1; var mask = $ ('. mask ul.images'); var imgwidth = images.width (); Triggers.First (). AddClass ('Active'); mask.css ('width', imgwidth * (lastelem 1) 'px'); Funktion SlidereResponse (Ziel) { mask.Stop (wahr, falsch) .animate ({'links': '-' imgwidth * target 'px'}, 300); Triggers.removeclass ('Active'). EQ (Ziel) .AddClass ('Active'); }

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

trigger, klicken if (! $ (this) .hasclass ('active')) { target = $ (this) .Index (); SlidereResponse (Ziel); Reettiming (); } }); $ ('. Weiter'). Click (function () { target = $ ('ul.triggers li.active'). index (); target === lastElem? target = 0: target = target 1; SlidereResponse (Ziel); Reettiming (); }); $ ('. prev'). click (function () { target = $ ('ul.triggers li.active'). index (); lastElem = Triggers.Length - 1; Ziel === 0? target = lastElem: target = target - 1; SlidereResponse (Ziel); Reettiming (); }); Funktion Slidertiming () { target = $ ('ul.triggers li.active'). index (); target === lastElem? target = 0: target = target 1; SlidereResponse (Ziel); } var Timingrun = setInterval (function () {Slidertiming ();}, 5000); Funktion resettiming () { ClearInterval (Timingrun); Timingrun = setInterval (function () {Slidertiming ();}, 5000); }

Diese vollständige Lösung ermöglicht die Anpassung des Erscheinungsbilds und der Funktionalität des Schiebereglers, um bestimmte Anforderungen zu erfüllen. Die Opazität und die Gleiteffekte können leicht austauscht werden, um unterschiedliche Aussehen zu erzeugen. Zusätzlich kann der Schieberegler durch Trigger, nächste/vorherige Schaltflächen gesteuert und sogar mit einer Zeitfunktion automatisiert werden.