Bagaimana untuk Membina Peluncur Imej jQuery Mudah dengan Kesan Gelongsor dan Kelegapan?

Membina Peluncur Imej jQuery yang Mudah dengan Kesan Gelongsor dan Kelegapan

Mencipta peluncur imej tersuai dalam jQuery tanpa bergantung pada pemalam luaran memberikan fleksibiliti yang lebih besar dan kawalan. Berikut ialah pendekatan ringkas yang menawarkan kedua-dua kesan peralihan gelongsor dan kelegapan.

Fungsi jQuery untuk Traversing dan Manipulasi

Sebelum menyelami kod, memahami dua fungsi utama jQuery ialah penting:

• index() mengembalikan kedudukan elemen dalam elemen adik-beradiknya.
• eq() memilih elemen berdasarkan pada kedudukannya (nilai indeks).

Kelegapan Kesan

Dalam kesan kelegapan, imej diletakkan secara mutlak dan bertindih menggunakan CSS. Apabila elemen pencetus diklik, imej yang sepadan akan memudar sementara yang lain menjadi pudar, bergantung pada fungsi fadeIn() dan fadeOut() jQuery.

Kesan Gelongsor

Untuk kesan gelongsor, kami menggunakan teknik double wrapping dan mask. Imej diletakkan di dalam kawasan bertopeng dan imej tertentu didedahkan dengan meluncurkan topeng ke atasnya, memberikan ilusi peralihan gelongsor.

Respons jQuery Biasa

Kedua-dua kelegapan dan kesan gelongsor berkongsi respons jQuery biasa yang mengendalikan pencetus (elemen navigasi), klik seterusnya/sebelumnya peristiwa dan peralihan masa automatik.

Struktur 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>

Kod Kelegapan Kesan

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

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

Kesan Gelongsor Kod

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

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

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

Pangkalan kod ini menyediakan peluncur imej jQuery berfungsi sepenuhnya dengan kesan peralihan gelongsor dan kelegapan, boleh disesuaikan melalui CSS dan pelbagai fungsi jQuery.

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