Comment créer un curseur d'image jQuery simple avec des effets de glissement et d'opacité ?-tutoriel CSS-php.cn

Comment créer un curseur d'image jQuery simple avec des effets de glissement et d'opacité ?

Linda Hamilton

Libérer： 2024-11-24 15:43:32

original

912 Les gens l'ont consulté

How to Build a Simple jQuery Image Slider with Sliding and Opacity Effects?

Créer un curseur d'image jQuery simple avec des effets de glissement et d'opacité

La création d'un curseur d'image personnalisé dans jQuery sans recourir à des plugins externes offre une plus grande flexibilité et le contrôle. Voici une approche simplifiée qui offre à la fois des effets de transition de glissement et d'opacité.

Fonctions jQuery pour le parcours et la manipulation

Avant de plonger dans le code, il est essentiel de comprendre deux fonctions clés de jQuery. :

index() renvoie la position d'un élément au sein de son frère éléments.
eq() sélectionne un élément en fonction de sa position (valeur d'index).

Effet d'opacité

Dans l'effet d'opacité, les images sont positionnées de manière absolue et se chevauchent à l'aide de CSS. Lorsqu'un élément déclencheur est cliqué, l'image correspondante apparaît en fondu tandis que les autres disparaissent, en s'appuyant sur les fonctions fadeIn() et fadeOut() de jQuery.

Effet Coulissant

Pour l'effet glissant, nous utilisons une technique de double enveloppement et masque. Les images sont placées à l'intérieur d'une zone masquée et une image spécifique est révélée en faisant glisser le masque dessus, donnant l'illusion d'une transition glissante.

Réponse jQuery commune

Les effets d'opacité et de glissement partagent une réponse jQuery commune qui gère les déclencheurs (éléments de navigation), les événements de clic suivant/précédent et le timing automatique. transitions.

Structure HTML

<ul class="images">
    <li>
        <img src="images/1.jpg" alt="1" />
    </li>
    <li>
        <img src="images/2.jpg" alt="2" />
    </li>
    ...
</ul>

<ul class="triggers">
    <li>1</li>
    <li>2</li>
    ...
</ul>
<span class="control prev">Prev</span>
<span class="control next">Next</span>

Copier après la connexion

Code d'effet d'opacité

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

Copier après la connexion

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

Copier après la connexion

Coulissement Effet 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; }

Copier après la connexion

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

Copier après la connexion

Réponse jQuery commune

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

Copier après la connexion

Cette base de code fournit un curseur d'image jQuery entièrement fonctionnel avec des effets de transition de glissement et d'opacité, personnalisable via CSS et diverses fonctions jQuery.

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!