Comment créer un simple curseur d'image jQuery avec des effets de fondu ou de diapositive ?-tutoriel CSS-php.cn

Comment créer un simple curseur d'image jQuery avec des effets de fondu ou de diapositive ?

Linda Hamilton

Libérer： 2024-12-07 07:13:18

original

382 Les gens l'ont consulté

How to Build a Simple jQuery Image Slider with Fade or Slide Effects?

Création d'un simple curseur d'image jQuery avec opacité ou effets de glissement

Bien que l'utilisation de plugins prédéfinis puisse être pratique, ils peuvent également ajouter des éléments inutiles poids et introduire des conflits potentiels avec le code existant. Cet article montre comment créer un curseur d'image jQuery simple et personnalisable à partir de zéro.

Bases de jQuery

Avant de continuer, il est important de comprendre deux fonctions clés de jQuery :

index() renvoie la position du premier élément dans un objet jQuery par rapport à son frères et sœurs.
eq() sélectionne un élément en fonction de sa valeur d'index.

Effets de curseur

Ce curseur prend en charge à la fois l'opacité et le glissement effets :

1. Fondu entrant / Fondu sortant Effet

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>

Copier après la connexion

CSS :

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

Copier après la connexion

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

Copier après la connexion

2. Effet coulissant

HTML : Identique à FadeIn/FadeOut effet

CSS :

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

Copier après la connexion

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

Copier après la connexion

Réponse jQuery commune

Déclencheurs, événements de clic et Calendrier :

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 solution complète permet de personnaliser l'apparence et les fonctionnalités du curseur pour répondre à des besoins spécifiques. Les effets d'opacité et de glissement peuvent être facilement interchangés pour créer des looks différents. De plus, le curseur peut être contrôlé via des déclencheurs, des boutons suivant/précédent et même automatisé avec une fonction de synchronisation.

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!