Membuat Peluncur Imej jQuery yang Mudah dengan Kelegapan atau Kesan Gelongsor

Walaupun menggunakan pemalam pra-bina boleh menjadi mudah, ia juga boleh menambah yang tidak perlu berat dan memperkenalkan potensi konflik dengan kod sedia ada. Artikel ini menunjukkan cara untuk mencipta peluncur imej jQuery yang mudah dan boleh disesuaikan dari awal.

Asas jQuery

Sebelum meneruskan, adalah penting untuk memahami dua fungsi utama jQuery:

• index() mengembalikan kedudukan elemen pertama dalam objek jQuery berbanding dengannya adik beradik.
• eq() memilih elemen berdasarkan nilai indeksnya.

Kesan Gelangsar

Gelangsar ini menyokong kedua-dua kelegapan dan gelongsor kesan:

1. FadeIn / FadeOut Kesan

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. Kesan Gelongsor

HTML: Sama seperti FadeIn/FadeOut kesan

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

Respons jQuery Biasa

Pencetus, Peristiwa Klik dan Masa:

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

Penyelesaian lengkap ini membolehkan penyesuaian penampilan dan fungsi peluncur untuk memenuhi keperluan khusus. Kelegapan dan kesan gelongsor boleh ditukar ganti dengan mudah untuk mencipta rupa yang berbeza. Selain itu, gelangsar boleh dikawal melalui pencetus, butang seterusnya/sebelumnya, dan juga diautomatikkan dengan fungsi pemasaan.

Atas ialah kandungan terperinci Bagaimana untuk Membina Peluncur Imej jQuery Mudah dengan Kesan Pudar atau Slaid?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!