Bagaimana untuk Membina Peluncur Imej jQuery Mudah dengan Kesan Gelongsor dan Kelegapan?-tutorial css-php.cn

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

Linda Hamilton

Lepaskan： 2024-11-24 15:43:32

asal

911 orang telah melayarinya

How to Build a Simple jQuery Image Slider with Sliding and Opacity Effects?

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>

Salin selepas log masuk

Kod Kelegapan Kesan

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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!