Wie erstelle ich einen einfachen jQuery-Bildschieberegler mit Schiebe- und Deckkrafteffekten?

Erstellen eines einfachen jQuery-Bildschiebereglers mit Schiebe- und Deckkrafteffekten

Das Erstellen eines benutzerdefinierten Bildschiebereglers in jQuery, ohne auf externe Plugins angewiesen zu sein, bietet mehr Flexibilität und Kontrolle. Hier ist ein vereinfachter Ansatz, der sowohl Gleit- als auch Deckkraftübergangseffekte bietet.

jQuery-Funktionen für Traversierung und Manipulation

Bevor Sie in den Code eintauchen, ist es wichtig, zwei wichtige jQuery-Funktionen zu verstehen :

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

Deckkrafteffekt

Beim Deckkrafteffekt werden Bilder per CSS absolut positioniert und überlappt. Wenn auf ein Triggerelement geklickt wird, wird das entsprechende Bild eingeblendet, während andere ausgeblendet werden, basierend auf den jQuery-Funktionen fadeIn() und fadeOut().

Gleiteffekt

Für den Gleiteffekt verwenden wir eine doppelte Wrapper- und Maskentechnik. Die Bilder werden in einem maskierten Bereich platziert und ein bestimmtes Bild wird angezeigt, indem die Maske darüber geschoben wird, wodurch die Illusion eines gleitenden Übergangs entsteht.

Gemeinsame jQuery-Antwort

Sowohl die Deckkraft- als auch die Gleiteffekte verfügen über eine gemeinsame jQuery-Antwort, die Auslöser (Navigationselemente), nächste/vorherige Klickereignisse und automatisches Timing verarbeitet Übergänge.

HTML-Struktur

• 
• 
...

• 1
• 2
...

Prev Next

Deckkrafteffektcode

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

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

Gleiten Wirkung Code

.mask { float:left; margin:40px; width:270px; height:266px; overflow:hidden;  }
ul.images { position:relative; top:0px;left:0px; }
/* this width must be total of the images, it comes from jquery */
    ul.images li { float:left; }

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

triggers.click(function() {
    if ( !$(this).hasClass('active') ) {
        target = $(this).index();
        sliderResponse(target);
        resetTiming();
    }
});

$('.next').click(function() {
    target = $('ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
    resetTiming();
});
$('.prev').click(function() {
    target = $('ul.triggers li.active').index();
    lastElem = triggers.length-1;
    target === 0 ? target = lastElem : target = target-1;
    sliderResponse(target);
    resetTiming();
});

function sliderTiming() {
    target = $('ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
}

var timingRun = setInterval(function() { sliderTiming(); },5000);
function resetTiming() {
    clearInterval(timingRun);
    timingRun = setInterval(function() { sliderTiming(); },5000);
}

Diese Codebasis bietet einen voll funktionsfähigen jQuery-Bildschieberegler mit Gleit- und Deckkraftübergangseffekten. anpassbar durch CSS und verschiedene jQuery-Funktionen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich einen einfachen jQuery-Bildschieberegler mit Schiebe- und Deckkrafteffekten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!