Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Laksanakan penukaran imej menggunakan javascript
Laksanakan penukaran imej menggunakan javascript
- WBOYasal
- 2023-05-27 10:55:382194semak imbas
Dengan pembangunan aplikasi Internet, keindahan dan interaktiviti laman web telah menjadi faktor penting dalam menarik pengunjung. Dalam reka bentuk web, penggunaan imej amat diperlukan. Menyediakan kesan peralihan imej pada halaman anda ialah cara terbaik untuk menarik perhatian pengguna. Dalam artikel ini, kami akan menggunakan JavaScript untuk melaksanakan kesan penukaran imej yang mudah.
Pertama, kita perlu mencipta fail HTML. Di kepala fail, kami boleh menambah rujukan kepada gaya CSS dan skrip JavaScript. Dalam teg badan, cipta elemen div untuk membalut imej kami. Seperti yang ditunjukkan di bawah:
<!DOCTYPE HTML>
<html>
<head>
<title>图片切换</title>
<style type="text/css">
#img {
width: 600px;
height: 400px;
margin: 0 auto;
position: relative;
}
#img img {
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}
#img img.active {
opacity: 1;
}
</style>
<script src="img_switch.js"></script>
</head>
<body>
<div id="img">
<img src="image1.jpg" class="active" />
<img src="image2.jpg" />
<img src="image3.jpg" />
<img src="image4.jpg" />
</div>
</body>
</html>Dalam gaya CSS, kami menetapkan lebar dan ketinggian elemen div #img dan mentakrifkan kedudukan imej sebagai relatif. Tetapkan juga kedudukan setiap imej kepada mutlak supaya ia boleh disusun bersama.
Di sini, kami menggunakan atribut kelegapan untuk menetapkan ketelusan imej. Kelas aktif mewakili imej yang sedang dipaparkan. Apabila beralih kepada imej seterusnya, kami menetapkan nilai kelegapan imej yang dipaparkan pada masa ini kepada 0, dan kemudian menetapkan nilai kelegapan imej seterusnya kepada 1. Ini mewujudkan kesan pudar dan muncul.
Seterusnya, kami akan mencipta fail skrip JavaScript img_switch.js. Kodnya adalah seperti berikut:
var i = 0; // 初始化计数器
var images = document.querySelectorAll("#img img"); // 获取所有的图片元素
var len = images.length; // 获取图片的总数
function switchImg() {
// 隐藏当前展示的图片
images[i].classList.remove("active");
// 获取下一个图片的索引位置
i = (i + 1) % len;
// 显示下一张图片
images[i].classList.add("active");
}
// 每隔5秒切换一次图片
setInterval(switchImg, 5000);Dalam skrip JavaScript ini, kita mula-mula mentakrifkan pembolehubah pembilang i, kemudian memperoleh semua elemen imej dan menyimpannya dalam imej pembolehubah. Kami juga menentukan len pembolehubah untuk menyimpan jumlah gambar.
Dalam fungsi switchImg, kami mula-mula mengalih keluar kelas aktif gambar yang sedang dipaparkan, kemudian mengira kedudukan indeks gambar seterusnya, dan menambah kelas aktif untuk memaparkan gambar seterusnya. Kami menggunakan fungsi setInterval untuk memanggil fungsi switchImg dengan kerap untuk merealisasikan fungsi menukar gambar secara automatik.
Akhir sekali, kami merujuk skrip JavaScript dalam fail HTML untuk mencetuskan kesan penukaran automatik.
Ini ialah cara menggunakan JavaScript untuk menukar imej. Kami boleh menyesuaikan gaya dan skrip mengikut keperluan untuk mencapai kesan yang lebih sejuk.
Atas ialah kandungan terperinci Laksanakan penukaran imej menggunakan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!