Cara menggunakan CSS untuk mencapai kesan penukaran imej yang mudah

CSS ialah salah satu teknologi terpenting dalam pembangunan bahagian hadapan dan boleh mencapai pelbagai gaya dan animasi. Antaranya, penukaran imej juga merupakan keperluan biasa, seperti karusel tapak web, slaid, dsb. Dalam artikel ini, saya akan memperkenalkan cara menggunakan CSS untuk mencapai kesan penukaran imej yang mudah.

1. Struktur HTML

Mula-mula, kita perlu menambahkan imej pada halaman web dan memberikannya ID atau kelas yang berbeza. Berikut ialah contoh kod:

<div class="slider">
  <img id="img1" src="image1.jpg" alt="Image 1">
  <img id="img2" src="image2.jpg" alt="Image 2">
  <img id="img3" src="image3.jpg" alt="Image 3">
</div>

Seperti yang anda lihat, kami menggunakan <div> dalam teg class="slider" untuk memudahkan penggunaan pemilih CSS untuk mengendalikan elemen di dalamnya. Atribut ID dan <img> dalam teg src menentukan pengecam unik dan laluan sumber imej masing-masing.

2. Gaya CSS

Seterusnya, kita perlu menetapkan gaya CSS untuk setiap imej dan menggunakan pemilih CSS untuk menukarnya. Berikut ialah kod contoh:

.slider {
  position: relative;
  height: 400px;
  width: 600px;
  overflow: hidden;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.slider img:first-child {
  opacity: 1;
}

.slider img.active {
  opacity: 1;
}

Pertama, kami menetapkan beberapa gaya asas untuk teg class="slider" <div>, termasuk ketinggian, lebar dan menyembunyikan kandungan limpahan. Seterusnya, kami menetapkan gaya untuk setiap imej: kedudukan mutlak, ketelusan 0, kesan peralihan, dsb. Antaranya, pemilih .slider img:first-child menunjukkan bahawa imej pertama aktif, iaitu, dipaparkan pada halaman web.

3. Interaksi JS

Akhir sekali, kami perlu menambahkan interaksi JavaScript pada halaman web untuk mencapai penukaran imej. Berikut ialah contoh kod:

var currentImg = 1;
var totalImg = $(".slider img").length;

function changeImg() {
  setInterval(function() {
    currentImg++;
    if (currentImg > totalImg) {
      currentImg = 1;
    }
    $(".slider img").removeClass("active");
    $("#img"+currentImg).addClass("active");
  }, 5000);
}

$(document).ready(function() {
  changeImg();
});

Tujuan kod ini adalah untuk mentakrifkan pembolehubah currentImg untuk mewakili gambar semasa dan pembolehubah totalImg untuk mewakili jumlah bilangan gambar. Kemudian, gunakan fungsi setInterval untuk memanggil fungsi changeImg pada selang waktu (5 saat dalam kes ini). Dalam fungsi ini, mula-mula kemas kini imej semasa dan tentukan sama ada jumlah bilangan melebihi, dan kemudian gunakan pemilih CSS untuk mengalih keluar nama kelas active semua imej dan menambah nama kelas pada imej semasa. Akhir sekali, panggil fungsi changeImg apabila halaman web dimuatkan untuk memulakan penukaran imej.

4. Paparan kesan

Selepas tiga langkah di atas, kita boleh mencapai kesan penukaran imej yang mudah. Kesan demonstrasi disediakan di sini untuk rujukan.

Kod HTML:

<div class="slider">
  <img id="img1" src="https://source.unsplash.com/random/600x400" alt="Image 1">
  <img id="img2" src="https://source.unsplash.com/random/600x401" alt="Image 2">
  <img id="img3" src="https://source.unsplash.com/random/600x402" alt="Image 3">
</div>

Kod CSS:

.slider {
  position: relative;
  height: 400px;
  width: 600px;
  overflow: hidden;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.slider img:first-child {
  opacity: 1;
}

.slider img.active {
  opacity: 1;
}

Kod JS:

var currentImg = 1;
var totalImg = $(".slider img").length;

function changeImg() {
  setInterval(function() {
    currentImg++;
    if (currentImg > totalImg) {
      currentImg = 1;
    }
    $(".slider img").removeClass("active");
    $("#img"+currentImg).addClass("active");
  }, 5000);
}

$(document).ready(function() {
  changeImg();
});

Paparan kesan: https://codepen .io/fangzhou/pen/oQJNEN

Ringkasnya, tidak sukar untuk menggunakan CSS untuk mencapai kesan penukaran imej Anda hanya perlu menguasai beberapa pengetahuan dan kemahiran asas. Sudah tentu, pembangunan sebenar mungkin melibatkan situasi yang lebih kompleks, yang memerlukan pembelajaran dan amalan berterusan.

Atas ialah kandungan terperinci Cara menggunakan CSS untuk mencapai kesan penukaran imej yang mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!