Wie erstelle ich einen einfachen jQuery-Bild-Slider mit Fade- oder Slide-Effekten?

Erstellen eines einfachen jQuery-Bildschiebereglers mit Deckkraft oder Schiebeeffekten

Die Verwendung vorgefertigter Plugins kann zwar praktisch sein, kann aber auch unnötige Auswirkungen haben Gewicht und führen zu potenziellen Konflikten mit vorhandenem Code. In diesem Artikel wird gezeigt, wie Sie einen einfachen und anpassbaren jQuery-Bildschieberegler von Grund auf erstellen.

jQuery-Grundlagen

Bevor Sie fortfahren, ist es wichtig, zwei wichtige jQuery-Funktionen zu verstehen:

• index() gibt die Position des ersten Elements in einem jQuery-Objekt relativ zu seinem zurück Geschwister.
• eq() wählt ein Element basierend auf seinem Indexwert aus.

Schiebereglereffekte

Dieser Schieberegler unterstützt sowohl Deckkraft als auch Gleiten Effekte:

1. Einblenden / Ausblenden Wirkung

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>

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: Gleich wie FadeIn/FadeOut Wirkung

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

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

Trigger, Klickereignisse und Timing:

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 Komplettlösung ermöglicht die Anpassung des Erscheinungsbilds und der Funktionalität des Schiebereglers an spezifische Anforderungen. Die Deckkraft- und Gleiteffekte können problemlos ausgetauscht werden, um unterschiedliche Looks zu kreieren. Darüber hinaus kann der Schieberegler über Auslöser, Weiter-/Zurück-Schaltflächen gesteuert und sogar mit einer Timing-Funktion automatisiert werden.

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