Wie erstelle ich einfache jQuery-Bildschieberegler mit Fade- oder Slide-Effekten?

So erstellen Sie einfache jQuery-Bildschieberegler mit Schiebe- oder Deckkrafteffekten

Viele Entwickler ziehen es aufgrund von Bedenken vor, die Verwendung vorgefertigter Plugins zu vermeiden Größe oder mögliche Konflikte mit vorhandenem JavaScript. Für diejenigen, die es vorziehen, ihre eigenen Schieberegler zu erstellen, ist hier ein vereinfachter Ansatz mit jQuery:

Wichtige jQuery-Funktionen:

• index(): Gibt die Position eines Elements innerhalb seines Geschwisterelements zurück Elemente.
• eq(): Wählt ein Element basierend auf seiner Position aus.

Ansatz:

• Rufen Sie den Index des ausgewählten Triggerelements ab.
• Ordnen Sie diesen Index mithilfe von dem entsprechenden Bild zu eq() Methode.

1. Einblenden / Ausblenden Wirkung

HTML:

<ul class="images">
  ...
</ul>

<ul class="triggers">
  ...
</ul>

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. Gleiteffekt

HTML:

Gleiches wie für FadeIn/FadeOut Wirkung.

CSS:

.mask { ... }
ul.images { ... }
ul.images li { ... }

jQuery:

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

triggers.first().addClass('active');
mask.css('width', imgWidth*(lastElem+1) +'px');

function sliderResponse(target) {
    mask.stop(true,false).animate({'left':'-'+ imgWidth*target +'px'},300);
    triggers.removeClass('active').eq(target).addClass('active');
}

Gemeinsame jQuery-Antwort für beide Schieberegler:

triggers.click(function() { ... });
$('.next').click(function() { ... });
$('.prev').click(function() { ... });
function sliderTiming() { ... }
function resetTiming() { ... }

Das obige ist der detaillierte Inhalt vonWie erstelle ich einfache jQuery-Bildschieberegler mit Fade- oder Slide-Effekten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!