Bagaimana untuk mencapai kesan penukaran gelongsor kiri dan kanan yang lancar bagi imej dalam JavaScript?

JavaScript Bagaimana untuk mencapai kesan suis gelongsor kiri dan kanan yang lancar bagi imej?

Dengan perkembangan Internet, imej sering digunakan sebagai elemen penting halaman dalam reka bentuk web. Kesan penukaran gambar memainkan kesan penting pada keindahan dan interaktiviti halaman. Dalam artikel ini, kami akan meneroka cara menggunakan JavaScript untuk mencapai kesan peralihan gelongsor kiri-kanan yang lancar bagi imej, dengan contoh kod khusus.

Untuk mencapai kesan pensuisan gelongsor kiri dan kanan yang lancar, anda perlu melakukan perkara berikut terlebih dahulu:

1. Buat bekas gambar untuk meletakkan berbilang gambar untuk mencapai kesan pensuisan gelongsor.
2. Tetapkan gaya supaya bekas imej boleh disusun secara melintang dan sembunyikan bahagian yang melebihi lebar bekas.
3. Gunakan JavaScript untuk mengawal kedudukan bekas dan mencapai kesan penukaran imej.

Berikut ialah contoh kod khusus:

Kod HTML:

<div class="slider-container">
  <ul class="slider-list">
    <li><img src="image1.jpg" alt="Image 1"></li>
    <li><img src="image2.jpg" alt="Image 2"></li>
    <li><img src="image3.jpg" alt="Image 3"></li>
    <!-- 可以添加更多的图片 -->
  </ul>
</div>
````

CSS 代码：

.gelangsar-bekas {
lebar: 800px; / Tetapkan lebar bekas/
limpahan: tersembunyi; lebar bekas/ }

.senarai gelangsar {

lebar: 300%; /
Tetapkan lebar bekas kepada 3 kali ganda jumlah lebar imej/ paparan: flex;
/ peralihan: ubah 0.5s; / Tambah kesan peralihan
/}
.senarai gelangsar li {

flex: 1 0 100%; /

Tetapkan lebar setiap imej kepada 1/3 daripada lebar bekas
/}

JavaScript 代码：

fungsikan slideNext() {

biarkan sliderList = document.querySelector('.slider-list');

biarkan currTranslate = window.getComputedStyle(sliderList).getPropertyValue(//Get the.); nilai anjakan bekas semasa untuk menentukan sama ada ia telah mencapai penghujung gambar A

jika (currTranslate === 'tiada') currTranslate = 0; // Nilai anjakan awal yang diperolehi ialah 'tiada', tukarkannya kepada 0

lain currTranslate = parseInt(currTranslate.split(',') [4].trim());

if (currTranslate <= -(sliderList.offsetWidth - document.querySelector('.slider-container').offsetWidth)) {

sliderList.style.transform = `translateX(0px)`; // 如果已经到达最后一张图片，则将容器位移值重置为 0，实现无缝切换

} lain {

sliderList.style.transform = `translateX(${currTranslate - document.querySelector('.slider-container').offsetWidth}px)`; // 每次滑动一个图片宽度的距离

}

}

fungsi slidePrev() {

biarkan sliderList = document.querySelector('.slider-list');

biarkan currTranslate = window.getComputedListStyle).(getComputedStyle) transform'); // Dapatkan nilai anjakan bekas semasa , digunakan untuk menentukan sama ada gambar pertama telah dicapai

if (currTranslate === 'none') currTranslate = 0 // Nilai anjakan awal yang diperoleh ialah ' tiada', tukarkannya kepada 0

else currTranslate = parseInt(currTranslate .split(',')[4].trim());

if (currTranslate >= 0) {

rreee

} else {

rreee

}

}

setInterval(slideNext, 3000); // Panggil fungsi slaidNext dengan kerap untuk mencapai penukaran automatik

sliderList.style.transform = `translateX(-${sliderList.offsetWidth - document.querySelector('.slider-container').offsetWidth}px)`; // 如果已经到达第一张图片，则将容器位移值设置为最后一张图片的位置，实现无缝切换

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan penukaran gelongsor kiri dan kanan yang lancar bagi imej dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!