![\"Image](\"image1.jpg\")
\n ![\"image](\"image2.jpg\")
\n ![\"image](\"image3.jpg\")
\n <\/div>\n\n
Cara membuat tayangan slaid imej yang pudar dengan html5
Aug 25, 2025 pm 03:22 PM
Inti membuat karusel gambar pudar adalah menggunakan gabungan HTML, CSS dan JavaScript, di mana peralihan CSS mencapai kesan lancar, dan JavaScript mengawal penukaran gambar automatik. Pertama, bina bekas yang mengandungi pelbagai gambar melalui HTML, dan tetapkan kedudukan mutlak untuk setiap gambar untuk bertindih; Kemudian gunakan CSS untuk menentukan susun atur dan animasi peralihan gambar, mengawal imej yang kelihatan dan tersembunyi dengan menetapkan atribut opacity, dan atribut peralihan mencapai kesan pudar 1 saat, dan hanya gambar -gambar kelas aktif yang dapat dilihat; Kemudian gunakan JavaScript untuk menetapkan imej untuk bertukar setiap 3 saat, dan Carousel direalisasikan dengan mengeluarkan kelas aktif gambar semasa dan menambahkannya ke gambar seterusnya, dan main balik gelung dicapai menggunakan pengiraan yang selebihnya; Pengoptimuman pilihan termasuk hover jeda, butang navigasi depan dan belakang, petunjuk dan reka bentuk responsif; Pastikan saiz imej adalah konsisten untuk mengelakkan susun atur susun atur, dan disyorkan untuk memaparkan imej besar untuk mengelakkan kelipan. Seluruh pelaksanaan tidak memerlukan perpustakaan luaran, boleh diselesaikan berdasarkan teknologi asli, dengan struktur yang jelas dan keserasian yang kuat.
Mewujudkan tayangan slaid imej yang pudar dengan HTML5 adalah mudah apabila anda menggabungkan HTML, CSS, dan sedikit JavaScript. Kuncinya menggunakan peralihan CSS untuk menghasilkan kesan lancar antara imej, manakala JavaScript mengendalikan putaran imej.
Inilah cara membina tayangan slaid yang mudah dan automatik:
1. Sediakan struktur HTML
Mulakan dengan bekas untuk memegang imej anda. Gunakan div dengan kelas seperti slideshow-container , dan letakkan imej anda di dalam menggunakan tag img . Tetapkan mereka untuk menjadi benar -benar diposisikan supaya mereka menumpuk di atas satu sama lain.
<! Doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8" />
<meta name = "viewport" content = "width = peranti-lebar, skala awal = 1.0"/>
<tirtle> Fading Image Slideshow </title>
<link rel = "stylesheet" href = "style.css" />
</head>
<body>
<div class = "slaidshow-container">
<img src = "image1.jpg" class = "Slide Active" alt = "Image 1" />
<img src = "image2.jpg" class = "slide" alt = "image 2" />
<img src = "image3.jpg" class = "slide" alt = "image 3" />
</div>
<script src = "script.js"> </script>
</body>
</html> Gantikan nilai src dengan laluan imej sebenar anda.
2. Gaya tayangan slaid dengan CSS
Gunakan CSS untuk meletakkan imej dan tentukan animasi pudar. Idea utama ialah hanya satu imej yang dapat dilihat pada satu masa (dengan opacity: 1 ), sementara yang lain tersembunyi ( opacity: 0 ). Peralihan pada kelegapan mencipta kesan pudar.
/ * style.css */
badan {
Margin: 0;
Latar Belakang: #000;
Paparan: Flex;
Justify-Content: Center;
Align-item: pusat;
Min-ketinggian: 100VH;
font-family: arial, sans-serif;
}
.slideshow-container {
Kedudukan: Relatif;
lebar: 800px;
Ketinggian: 500px;
Limpahan: Tersembunyi;
Radius sempadan: 10px;
Box-shadow: 0 4px 10px RGBA (0, 0, 0, 0.5);
}
.slide {
Kedudukan: Mutlak;
Lebar: 100%;
Ketinggian: 100%;
Objek-Fit: Cover;
Kelegapan: 0;
Peralihan: Opacity 1S Ease-In-Out;
}
.slide.active {
Kelegapan: 1;
}-
object-fit: covermemastikan imej mengisi bekas tanpa peregangan. -
transition: opacity 1s ease-in-outmencipta pudar 1 saat antara imej. - Hanya imej
.activeyang dapat dilihat.
3. Tambahkan JavaScript ke imej kitaran
Gunakan JavaScript untuk menukar secara automatik antara imej setiap beberapa saat. Skrip menghilangkan kelas active dari imej semasa dan menambahnya kepada yang seterusnya.
// script.js
biarkan slideIndex = 0;
slaid const = document.QuerySelectorAll ('. Slide');
fungsi ditunjukkan expedextSlide () {
// Keluarkan kelas aktif dari slaid semasa
slaid [slideindex] .classlist.remove ('aktif');
// indeks kemas kini
slideindex = (slideindex 1) % slaid.length;
// Tambahkan kelas aktif ke slaid seterusnya
slaid [slideindex] .classlist.add ('aktif');
}
// Tukar gambar setiap 3 saat
setInterval (ditunjukkan extslide, 3000);Skrip ini berjalan setiap 3 saat, berbasikal melalui imej -imej dalam rangka dan gelung kembali ke yang pertama selepas yang terakhir.
Penambahbaikan pilihan
Anda boleh meningkatkan tayangan slaid dengan:
- Jeda pada hover : Tambah
:hoverke.slideshow-containerdan gunakanpointer-eventsatau ubah selang sementara. - Butang navigasi : Tambah butang sebelumnya/seterusnya menggunakan pendengar acara.
- Petunjuk : Titik kecil di bawah tayangan slaid untuk menunjukkan kedudukan semasa.
- Reka bentuk responsif : Gunakan unit max-lebar dan relatif supaya ia berfungsi pada mudah alih.
Nota akhir
- Pastikan semua imej serupa dalam nisbah aspek untuk mengelakkan perubahan susun atur.
- Imej pramuat jika mereka besar untuk mengelakkan kelip -kelip.
- Anda tidak memerlukan jquery atau perpustakaan luaran -ini berfungsi dengan HTML5, CSS3, dan Vanila JS biasa.
Pada asasnya, ia adalah gabungan kedudukan mutlak, kawalan kelegapan, peralihan CSS, dan penukaran kelas masa yang menjadikan kesan pudar berfungsi dengan lancar. Tidak rumit, tetapi berkesan.
Atas ialah kandungan terperinci Cara membuat tayangan slaid imej yang pudar dengan html5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Stock Market GPT
Penyelidikan pelaburan dikuasakan AI untuk keputusan yang lebih bijak
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)
Bagaimana cara menggunakan acara pelayan-sent (SSE) di HTML5?
Sep 21, 2025 am 06:11 AM
Sseenablesreal-time, unidirectionalserver-to-clientupdatesviahttp; useeventsourceinjavascripttoconnect, handlemessagesageWithonmessage, setServerresponsetypetotex
Bagaimana untuk menguruskan fokus untuk kebolehcapaian dalam HTML5?
Sep 21, 2025 am 05:27 AM
PenggunaanSemantichtmlelementsLikeandfornativeFocususabilityandkoardsupport.ensurelogicalTabordorderandvisiblefocusindicatorsviacs.programmaticallymanageFocusindynamiccontentlikemodalsusingElement.Focus (), TrappingFocusIdeAdingRetRetRED
Bagaimana cara menggunakan peranan ARIA untuk kebolehcapaian di HTML5?
Sep 21, 2025 am 04:41 AM
AriaenhancesWebaccessibilitybyaddingsemanticmeaningtoelementswhennativeHtmlisinsufficient.useariaroleslikerole = "Button", aria-expanded, Andaria-labelforcustomponentsordynamiccontent, ButalwaysPrefreenativeHtmleLemeShtmluteHtmleLemeHtmLeShtmluteHtmluteShtmluteHtmleShtmluteHtMleShtmluteHtmluteHtmluteHtmluteHtmluteHtmleShtmLeShtmLeShtmLeShtMleS
Bagaimana untuk mengesahkan medan borang terhadap ungkapan biasa dalam HTML5?
Sep 22, 2025 am 05:11 AM
Usethepatternattributeinhtml5InputelementStovalidateAgainStaregex, suchorfasswordsrequiringnumbers, huruf besar, huruf kecil, danminimumlength;
Bagaimana cara menggunakan elemen di HTML5 dengan betul?
Sep 17, 2025 am 06:33 AM
Thetimeelementinhtml5representsdatesandtimesinamachine-readableFormat, enhancingAccessibilityandseo; usethedateTimeatTributewithiso-formattedvaluestoprovideSemantiNingMeaning, terutama friendlytexordurations, terutama friendlyextextextordurations
Bagaimana untuk membenamkan dokumen PDF dalam halaman HTML5?
Sep 21, 2025 am 05:08 AM
Menggunakan atau membenamkan PDF; Ia mudah dan langsung, menyokong kandungan alternatif, mempunyai keserasian yang baik dan boleh dikeluarkan dari sempadan, dan pilih mengikut keperluan anda.
Cara Membuat Peta Imej HTML5 Responsif
Sep 17, 2025 am 04:34 AM
Untuk membuat peta imej HTML5 responsif, anda boleh menyelaras skala secara dinamik melalui JavaScript atau benar -benar meletakkan elemen overlay menggunakan CSS; Mula-mula pastikan imej itu sendiri responsif, dan kemudian mengira semula kawasan kawasan yang menyelaras mengikut nisbah saiz asal dan semasa melalui JavaScript apabila pemuatan halaman dan pelarasan tetingkap, atau menggunakan pautan telus untuk menutupi imej dengan kedudukan peratusan untuk mencapai penyesuaian silang silang, dan akhirnya memastikan bahawa kawasan interaktif adalah tepat dengan imej. Kedua -dua kaedah ini mempunyai senario yang berkenaan. Penyelesaian JavaScript bersesuaian dengan struktur asal, dan penyelesaian CSS lebih mudah dan tidak memerlukan skrip. Ia harus dipilih mengikut keperluan projek, dan kedua-duanya perlu menguji kesan multi-skrin dan memastikan kawasan sentuhan cukup besar. Adalah disyorkan untuk menggunakan kaedah JavaScript untuk susun atur peta kompleks.
Bagaimana cara menggunakan atribut placeholder dalam borang HTML5?
Sep 23, 2025 am 05:17 AM
ThePlaceholderattributeProvidesAshorthintinputfields.itappearsfaintlyanddisappearswhentypingbegins, supportedIntext, e -mel, tel, tel, carian, andtextareaelements.useittoshowexamplike "example@email.com", ButnotasePlacementForlabels.labelsensureB
