Bagaimana untuk Membina Peluncur Imej jQuery Mudah dengan Kesan Pudar atau Slaid?-tutorial css-php.cn

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

Linda Hamilton

Lepaskan： 2024-12-07 07:13:18

asal

384 orang telah melayarinya

How to Build a Simple jQuery Image Slider with Fade or Slide Effects?

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>

Salin selepas log masuk

CSS:

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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!