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

JavaScript Bagaimana untuk mencapai kesan suis gelongsor kiri dan kanan yang lancar bagi imej sambil mengehadkannya kepada bekas?

Dalam pembangunan web, kami sering menghadapi situasi di mana kami perlu melaksanakan kesan karusel imej. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mencapai kesan pensuisan gelongsor kiri dan kanan yang lancar bagi imej dan mengehadkannya kepada bekas tertentu.

Pertama, kita perlu mencipta bekas dalam HTML untuk memaparkan imej. Bekas ini boleh menjadi elemen div Kami memberikan lebar dan ketinggian tetap, dan menetapkan limpahan kepada tersembunyi untuk mengehadkan julat paparan. Kodnya adalah seperti berikut:

<div id="container">
  <ul id="imageList">
    <li><img  src="/static/imghwm/default1.png"  data-src="image1.jpg"  class="lazy"/ alt="Bagaimana untuk mencapai kesan penukaran gelongsor kiri dan kanan yang lancar bagi imej dalam JavaScript sambil mengehadkannya kepada bekas?" ></li>
    <li><img  src="/static/imghwm/default1.png"  data-src="image2.jpg"  class="lazy"/ alt="Bagaimana untuk mencapai kesan penukaran gelongsor kiri dan kanan yang lancar bagi imej dalam JavaScript sambil mengehadkannya kepada bekas?" ></li>
    <li><img  src="/static/imghwm/default1.png"  data-src="image3.jpg"  class="lazy"/ alt="Bagaimana untuk mencapai kesan penukaran gelongsor kiri dan kanan yang lancar bagi imej dalam JavaScript sambil mengehadkannya kepada bekas?" ></li>
    ...
  </ul>
</div>

Seterusnya, kita perlu menggunakan JavaScript untuk mencapai kesan pensuisan gelongsor yang lancar. Langkah-langkah khusus adalah seperti berikut:

1. Dapatkan rujukan kepada elemen berkaitan:

var container = document.getElementById('container');
var imageList = document.getElementById('imageList');
var images = imageList.getElementsByTagName('img');
var currentIndex = 0; // 当前显示的图片索引

2. Tetapkan gaya awal:

// 设置imageList的宽度，保证所有图片水平排列
imageList.style.width = images.length * 100 + '%';

// 设置每张图片的宽度
for (var i = 0; i < images.length; i++) {
  images[i].style.width = 100 / images.length + '%';
}

3. Mencapai kesan pensuisan gelongsor yang lancar:
kelancaran

kejam

daripada gambar Kesan pensuisan gelongsor, dan terhad kepada bekas yang ditentukan. Apabila gambar di dalam bekas disentuh dan meluncur, ia bertukar kepada gambar yang sepadan mengikut arah gelongsor. Apabila menukar kepada gambar terakhir, menukar semula akan melompat ke gambar pertama, dan begitu juga sebaliknya.

Saya harap artikel ini akan membantu dalam memahami cara menggunakan JavaScript untuk mencapai kesan suis gelongsor kiri dan kanan yang lancar bagi imej. 🎜

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