Bagaimana untuk Membina Peluncur Imej jQuery Mudah dengan Kesan Pudar atau Slaid?

Cara Mencipta Peluncur Imej jQuery yang Mudah dengan Kesan Gelongsor atau Kelegapan

Ramai pembangun memilih untuk mengelak daripada menggunakan pemalam pra-bina kerana kebimbangan tentang saiz atau kemungkinan konflik dengan JavaScript sedia ada. Bagi mereka yang lebih suka mencipta peluncur mereka sendiri, berikut ialah pendekatan ringkas menggunakan jQuery:

Fungsi jQuery Utama:

• index(): Mengembalikan kedudukan unsur dalam saudaranya elemen.
• eq(): Memilih elemen berdasarkan kedudukannya.

Pendekatan:

• Dapatkan semula indeks elemen pencetus yang dipilih.
• Padankan indeks ini dengan imej yang sepadan menggunakan kaedah eq().

1. FadeIn / FadeOut Kesan

HTML:

<ul class="images">
  ...
</ul>

<ul class="triggers">
  ...
</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 { ... }
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');
}

Respons jQuery Dikongsi untuk Kedua-duanya Peluncur:

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

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!