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="image1.jpg"/></li>
    <li><img src="image2.jpg"/></li>
    <li><img src="image3.jpg"/></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

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!