hujung hadapan web
tutorial js
Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid
Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid
JavaScript ialah bahasa skrip yang boleh digunakan untuk menambah kesan interaktif pada halaman web. Antaranya, kesan karusel imej dan tayangan slaid ialah kesan animasi halaman web yang biasa Artikel ini akan memperkenalkan cara menggunakan fungsi JavaScript untuk mencapai kedua-dua kesan ini dan memberikan contoh kod tertentu.
- Karusel gambar
Karusel gambar ialah kesan yang memutarkan berbilang gambar dengan cara tertentu. Apabila melaksanakan karusel imej, pemasa JavaScript dan kawalan gaya CSS perlu digunakan.
(1) Penyediaan
Pertama, dalam fail HTML, anda perlu menentukan bekas div untuk memaparkan imej karusel. Kita boleh menentukan elemen ul lain untuk menyimpan semua imej yang perlu diputar. Setiap elemen li mengandungi imej.
<div id="slider">
<ul>
<li><img src="/static/imghw/default1.png" data-src="img1.jpg" class="lazy" alt="Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid" ></li>
<li><img src="/static/imghw/default1.png" data-src="img2.jpg" class="lazy" alt="Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid" ></li>
<li><img src="/static/imghw/default1.png" data-src="img3.jpg" class="lazy" alt="Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid" ></li>
<li><img src="/static/imghw/default1.png" data-src="img4.jpg" class="lazy" alt="Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid" ></li>
</ul>
</div>Dalam fail CSS, beberapa penggayaan perlu dilakukan pada elemen ini. Sebagai contoh, tetapkan lebar dan ketinggian bekas div kepada saiz sebenar imej dan tetapkan atribut limpahan kepada tersembunyi, supaya bahagian di luar bekas boleh disembunyikan. Pada masa yang sama, tetapkan lebar elemen ul kepada jumlah lebar semua imej, dan tetapkan ketinggian kepada ketinggian sebenar imej.
#slider {
width: 600px;
height: 400px;
overflow: hidden;
position: relative;
}
#slider ul {
width: 2400px; /* 4张图片的宽度之和 */
height: 400px;
position: absolute;
left: 0;
}(2) Pelaksanaan karusel
Seterusnya, kita perlu menggunakan fungsi JavaScript untuk mencapai kesan karusel. Proses pelaksanaan khusus adalah seperti berikut:
① Tentukan indeks pembolehubah untuk merekodkan nombor siri gambar yang sedang dipaparkan.
var index = 0;
② Tulis fungsi karusel untuk menukar gambar pada selang waktu tertentu dan mengemas kini nilai pembolehubah indeks. Dalam fungsi ini, nilai kiri elemen ul perlu ditetapkan kepada nombor berlawanan (nombor negatif) lebar imej semasa, supaya kesan karusel boleh dicapai.
function slide() {
index++;
if (index >= 4) { // 图片总数为4，如果index超过4，就将其重置为0
index = 0;
}
var leftVal = -index * 600 + "px"; // 每次切换，将ul元素的left值设置为当前图片的宽度的相反数
$("#slider ul").stop().animate({left: leftVal}, 500); // 使用jQuery的animate方法实现滑动效果
}Dalam kod di atas, kami menggunakan kaedah animate() dalam perpustakaan jQuery, yang boleh digunakan untuk mencapai kesan animasi. Kaedah animate() menerima dua parameter Parameter pertama ialah objek yang digunakan untuk menetapkan sifat CSS dan nilai animasi Di sini kita menetapkan atribut kiri bagi elemen ul tentukan masa animasi, dalam milisaat.
③ Panggil fungsi karusel dan gunakan kaedah setInterval() untuk melaksanakannya dengan kerap.
setInterval(slide, 2000);
Dalam kod di atas, kami menggunakan kaedah setInterval(), yang boleh digunakan untuk melaksanakan kod yang ditentukan dengan kerap. Parameter pertama ialah nama fungsi yang akan dilaksanakan secara tetap, dan parameter kedua ialah selang masa dalam milisaat.
Akhir sekali, kod pelaksanaan keseluruhan karusel imej adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<title>图片轮播</title>
<meta charset="utf-8">
<style>
#slider {
width: 600px;
height: 400px;
overflow: hidden;
position: relative;
}
#slider ul {
width: 2400px;
height: 400px;
position: absolute;
left: 0;
}
#slider ul li {
float: left;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function () {
var index = 0;
function slide() {
index++;
if (index >= 4) {
index = 0;
}
var leftVal = -index * 600 + "px";
$("#slider ul").stop().animate({left: leftVal}, 500);
}
setInterval(slide, 2000);
})
</script>
</head>
<body>
<div id="slider">
<ul>
<li><img src="/static/imghw/default1.png" data-src="img1.jpg" class="lazy" alt="Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid" ></li>
<li><img src="/static/imghw/default1.png" data-src="img2.jpg" class="lazy" alt="Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid" ></li>
<li><img src="/static/imghw/default1.png" data-src="img3.jpg" class="lazy" alt="Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid" ></li>
<li><img src="/static/imghw/default1.png" data-src="img4.jpg" class="lazy" alt="Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid" ></li>
</ul>
</div>
</body>
</html>- kesan tayangan slaid #🎜🎜🎜##🎜 Kesan filem ialah kesan yang menukar berbilang gambar dalam susunan tertentu. Apabila melaksanakan kesan slaid, pendengaran acara JavaScript dan kawalan gaya CSS diperlukan.
(1) Penyediaan
Begitu juga, dalam fail HTML, bekas div perlu ditakrifkan untuk memaparkan slaid. Kita boleh mentakrifkan berbilang elemen img, setiap elemen img mengandungi gambar.
<div id="slideshow"> <img src="/static/imghw/default1.png" data-src="img1.jpg" class="lazy" alt="Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid" > <img src="/static/imghw/default1.png" data-src="img2.jpg" class="lazy" alt="Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid" > <img src="/static/imghw/default1.png" data-src="img3.jpg" class="lazy" alt="Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid" > <img src="/static/imghw/default1.png" data-src="img4.jpg" class="lazy" alt="Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid" > </div>
Dalam fail CSS, kita perlu menggayakan elemen ini. Sebagai contoh, tetapkan lebar dan tinggi bekas div kepada saiz sebenar imej, dan tetapkan atribut limpahan kepada tersembunyi; imej pertama Ketelusan imej ditetapkan kepada 0.
#slideshow {
width: 600px;
height: 400px;
overflow: hidden;
position: relative;
}
#slideshow img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
#slideshow img:first-child {
opacity: 1;
}Dalam kod di atas, kami menggunakan :first-child pseudo-class untuk menetapkan ketelusan imej pertama kepada 1.
(2) Pelaksanaan tayangan slaid
Seterusnya, kita perlu menggunakan fungsi JavaScript untuk mencapai kesan tayangan slaid. Proses khusus adalah seperti berikut:
① Tentukan indeks pembolehubah untuk merekodkan nombor siri gambar yang sedang dipaparkan.
var index = 1;
② Tulis fungsi untuk menukar gambar dan mengemas kini nilai pembolehubah indeks. Dalam fungsi ini, kami mula-mula menetapkan ketelusan imej yang dipaparkan pada masa ini kepada 0, kemudian menambah 1 pada nilai pembolehubah indeks, dan menentukan sama ada jumlah bilangan imej melebihi. Jika melebihi, tetapkan semula kepada 1. Kemudian tetapkan ketelusan imej seterusnya kepada 1 dan hidupkan ia.
function show() {
$("#slideshow img:nth-child(" + index + ")").stop().animate({opacity: 0}, 1000); // 当前图片透明度减少
index++;
if (index > 4) {
index = 1;
}
$("#slideshow img:nth-child(" + index + ")").stop().animate({opacity: 1}, 1000); // 下一张图片透明度增加
}Dalam kod di atas, kami menggunakan pemilih :nth-child, yang boleh memilih elemen anak di bawah elemen induk yang ditentukan. Dalam contoh ini, kami menggunakan pemilih ini untuk memilih imej indeks.
③ Gunakan kaedah setInterval() untuk melaksanakan fungsi pertunjukan dengan kerap.
$(function () {
setInterval(show, 3000);
})Dalam kod di atas, kami menggunakan kaedah $() dan kaedah setInterval() pustaka jQuery untuk melaksanakan panggilan berjadual. Kaedah $() digunakan untuk mendapatkan elemen yang ditentukan, dan kaedah setInterval() boleh memanggil fungsi yang ditentukan secara berkala.
Akhir sekali, kod pelaksanaan keseluruhan kesan slaid adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<title>幻灯片效果</title>
<meta charset="utf-8">
<style>
#slideshow {
width: 600px;
height: 400px;
overflow: hidden;
position: relative;
}
#slideshow img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
#slideshow img:first-child {
opacity: 1;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function () {
var index = 1;
function show() {
$("#slideshow img:nth-child(" + index + ")").stop().animate({opacity: 0}, 1000);
index++;
if (index > 4) {
index = 1;
}
$("#slideshow img:nth-child(" + index + ")").stop().animate({opacity: 1}, 1000);
}
setInterval(show, 3000);
})
</script>
</head>
<body>
<div id="slideshow">
<img src="/static/imghw/default1.png" data-src="img1.jpg" class="lazy" alt="Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid" >
<img src="/static/imghw/default1.png" data-src="img2.jpg" class="lazy" alt="Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid" >
<img src="/static/imghw/default1.png" data-src="img3.jpg" class="lazy" alt="Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid" >
<img src="/static/imghw/default1.png" data-src="img4.jpg" class="lazy" alt="Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid" >
</div>
</body>
</html>Melalui contoh kod di atas, kami telah melaksanakan penggunaan fungsi JavaScript untuk melaksanakan karusel imej dan kesan slaid, dan memperkenalkan proses pelaksanaan khusus. Teknologi ini sangat membantu untuk meningkatkan interaksi halaman web dan kesan animasi Pembaca boleh mengubah suai dan mengoptimumkan mengikut keperluan sebenar dan terus meningkatkan keupayaan pembangunan mereka.
Atas ialah kandungan terperinci Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1359
52
Tutorial menggunakan CSS untuk melaksanakan kesan karusel automatik imej responsif
Nov 21, 2023 am 08:37 AM
Dengan populariti peranti mudah alih, reka bentuk web perlu mengambil kira faktor seperti resolusi peranti dan saiz skrin terminal yang berbeza untuk mencapai pengalaman pengguna yang baik. Apabila melaksanakan reka bentuk responsif tapak web, selalunya perlu menggunakan kesan karusel imej untuk memaparkan kandungan berbilang imej dalam tetingkap visual yang terhad, dan pada masa yang sama, ia juga boleh meningkatkan kesan visual tapak web. Artikel ini akan memperkenalkan cara menggunakan CSS untuk mencapai kesan karusel automatik imej responsif dan memberikan contoh dan analisis kod. Idea pelaksanaan Pelaksanaan karusel imej responsif boleh dilaksanakan melalui reka letak fleksibel CSS. wujud
Pengaturcaraan Asynchronous Fungsi JavaScript: Petua Penting untuk Mengendalikan Tugas Kompleks
Nov 18, 2023 am 10:06 AM
Fungsi JavaScript Pengaturcaraan Asynchronous: Kemahiran Penting untuk Mengendalikan Tugasan Kompleks Pengenalan: Dalam pembangunan front-end moden, pengendalian tugas yang kompleks telah menjadi bahagian yang amat diperlukan. Kemahiran pengaturcaraan tak segerak fungsi JavaScript adalah kunci untuk menyelesaikan tugas yang kompleks ini. Artikel ini akan memperkenalkan konsep asas dan kaedah praktikal biasa bagi pengaturcaraan tak segerak fungsi JavaScript, dan menyediakan contoh kod khusus untuk membantu pembaca memahami dan menggunakan teknik ini dengan lebih baik. 1. Konsep asas pengaturcaraan tak segerak Dalam pengaturcaraan segerak tradisional, kodnya ialah
Bagaimana untuk menggunakan JavaScript untuk melaksanakan kesan penukaran karusel imej dan menambah animasi fade-in dan fade-out?
Oct 18, 2023 pm 12:12 PM
Bagaimana untuk melaksanakan kesan penukaran karusel imej dan menambah animasi fade-in dan fade-out dengan JavaScript? Karusel imej ialah salah satu kesan biasa dalam reka bentuk web Dengan menukar imej untuk memaparkan kandungan yang berbeza, ia memberikan pengguna pengalaman visual yang lebih baik. Dalam artikel ini, saya akan memperkenalkan cara menggunakan JavaScript untuk mencapai kesan penukaran karusel imej dan menambah kesan animasi fade-in dan fade-out. Di bawah ialah contoh kod khusus. Pertama, kita perlu mencipta bekas yang mengandungi karusel dalam halaman HTML dan menambahnya
Cara menggunakan PHP untuk melaksanakan fungsi karusel dan tayangan slaid imej
Sep 05, 2023 am 09:57 AM
Cara menggunakan PHP untuk melaksanakan fungsi karusel dan tayangan slaid imej Dalam reka bentuk web moden, fungsi karusel imej dan tayangan slaid telah menjadi sangat popular. Ciri-ciri ini boleh menambah beberapa dinamik dan menarik kepada halaman web dan meningkatkan pengalaman pengguna. Artikel ini akan memperkenalkan cara menggunakan PHP untuk melaksanakan fungsi karusel dan tayangan slaid imej untuk membantu pembaca menguasai teknologi ini. Mencipta Infrastruktur dalam HTML Mula-mula, cipta infrastruktur dalam fail HTML. Katakan karusel imej kami mempunyai bekas dan beberapa elemen imej. Kod HTML adalah seperti berikut
Cara menggunakan PHP untuk membangunkan fungsi karusel imej mudah
Sep 25, 2023 am 11:21 AM
Cara menggunakan PHP untuk membangunkan fungsi karusel imej yang ringkas Fungsi karusel imej adalah sangat biasa dalam reka bentuk web, dan boleh memberikan pengguna kesan visual yang lebih baik dan meningkatkan pengalaman pengguna. Artikel ini akan memperkenalkan cara menggunakan PHP untuk membangunkan fungsi karusel imej ringkas dan memberikan contoh kod khusus. Pertama, kita perlu menyediakan beberapa sumber imej sebagai imej karusel. Letakkan imej ini dalam folder dan namakannya "gelangsar", pastikan laluan folder adalah betul. Seterusnya, kita perlu menulis skrip PHP untuk mendapatkan graf ini
Bagaimana untuk melaksanakan fungsi karusel imej melalui pemalam WordPress
Sep 06, 2023 pm 12:36 PM
Bagaimana untuk melaksanakan fungsi karusel imej melalui pemalam WordPress Dalam reka bentuk laman web hari ini, fungsi karusel imej telah menjadi keperluan biasa. Ia boleh menjadikan laman web lebih menarik dan boleh memaparkan berbilang gambar untuk mencapai kesan publisiti yang lebih baik. Dalam WordPress, kami boleh melaksanakan fungsi karusel imej dengan memasang pemalam Artikel ini akan memperkenalkan pemalam biasa dan memberikan contoh kod untuk rujukan. 1. Pengenalan pemalam Dalam perpustakaan pemalam WordPress, terdapat banyak pemalam karusel imej untuk dipilih, salah satunya selalunya
Bagaimana untuk mencipta karusel imej dinamik menggunakan HTML, CSS dan jQuery
Oct 25, 2023 am 10:09 AM
Cara menggunakan HTML, CSS dan jQuery untuk mencipta karusel imej dinamik Dalam reka bentuk dan pembangunan tapak web, karusel imej ialah fungsi yang kerap digunakan untuk memaparkan berbilang imej atau sepanduk pengiklanan. Melalui gabungan HTML, CSS dan jQuery, kami boleh mencapai kesan karusel imej dinamik, menambahkan daya hidup dan daya tarikan pada tapak web. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk mencipta karusel imej dinamik yang ringkas dan menyediakan contoh kod khusus. Langkah 1: Sediakan persimpangan HTML
Cara menggunakan vue dan Element-plus untuk melaksanakan karusel imej dan tayangan slaid
Jul 18, 2023 am 10:32 AM
Cara menggunakan Vue dan ElementPlus untuk melaksanakan karusel imej dan tayangan slaid Dalam reka bentuk web, karusel imej dan tayangan slaid ialah keperluan fungsian biasa. Fungsi ini boleh dilaksanakan dengan mudah menggunakan rangka kerja Vue dan ElementPlus. Artikel ini akan memperkenalkan cara menggunakan Vue dan ElementPlus untuk mencipta komponen karusel dan tayangan slaid gambar yang ringkas dan cantik. Pertama, kita perlu memasang Vue dan ElementPlus. Jalankan arahan berikut pada baris arahan:
