Comment créer des curseurs d'image jQuery simples avec des effets de fondu ou de diapositive ?

Comment créer des curseurs d'image jQuery simples avec des effets de glissement ou d'opacité

De nombreux développeurs préfèrent éviter d'utiliser des plugins prédéfinis en raison de préoccupations concernant taille ou conflits potentiels avec le JavaScript existant. Pour ceux qui préfèrent créer leurs propres sliders, voici une approche simplifiée à l'aide de jQuery :

Fonctions clés de jQuery :

• index() : Renvoie la position d'un élément au sein de ses éléments frères.
• eq() : Sélectionne un élément en fonction de sa position.

Approche :

• Récupérer l'index de l'élément déclencheur sélectionné.
• Match cet index avec l'image correspondante en utilisant le eq() méthode.

1. Fondu entrant / Fondu sortant Effet

HTML :

...

...

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. Effet de glissement

HTML :

Idem que pour le FadeIn/FadeOut effet.

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

Réponse jQuery partagée pour les deux Curseurs :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!