Rumah > Artikel > hujung hadapan web > Tulis tayangan slaid menggunakan HTML dan CSS
Tulis tayangan slaid menggunakan HTML dan CSS
- WBOYke hadapan
- 2023-08-19 20:25:121346semak imbas
Secara amnya, pembangun menggunakan JavaScript untuk menambah gelagat pada kod HTML Kadangkala, kita juga boleh menambah gelagat pada kod HTML menggunakan CSS Sebagai contoh, kita boleh membuat tayangan slaid menggunakan HTML dan CSS daripada menggunakan JavaScript HTML.
Kami boleh mencipta bingkai kekunci tersuai untuk menghidupkan slaid dan mencipta tayangan slaid
Tatabahasa
Pengguna boleh mengikuti sintaks berikut untuk membuat tayangan slaid menggunakan HTML dan CSS sahaja.
.slides {
width: calc(716px * 2);
animation: slideShow 10s ease infinite;
}
@keyframes slideShow {
30% {margin-left: 0px;}
70% {margin-left: calc(-716px * 1);}
}
Dalam sintaks di atas, div 'slaid' mengandungi berbilang slaid. Kami mentakrifkan lebar div 'slaid' berdasarkan jumlah bilangan slaid yang terkandung di dalamnya. Selain itu, kami menambah animasi pada div tayangan slaid.
Dalam bingkai utama tayangan slaid, kami menukar nilai sifat CSS ‘margin-left’ untuk menukar slaid.
Langkah
Langkah 1 - Buat elemen div dan berikannya nama kelas 'ibu bapa'.
Langkah 2 – Buat elemen div bersarang dan berikan nama kelas ‘slaid’ Selain itu, buat berbilang elemen div bersarang dengan nama kelas ‘elemen’ yang mewakili slaid.
Langkah 3 - Selain itu, tambahkan kandungan slaid pada elemen div dengan nama kelas 'elemen'.
Langkah 4 – Sekarang, kami perlu menambah kod CSS untuk tayangan slaid Berikan lebar dan ketinggian tetap kepada elemen div ‘ibu bapa’
Langkah 5 – Tetapkan lebar dan ketinggian tetap untuk div ‘elemen’, iaitu slaid kami.
Langkah 6 – Untuk div ‘slaid’, kira jumlah lebar mengikut jumlah bilangan slaid yang terkandung di dalamnya dan tambahkan animasi ‘slaid’ untuk tempoh tertentu.
Langkah 7 – Buat kerangka utama 'tayangan slaid' yang sepatutnya menukar nilai sifat CSS 'margin-kiri' untuk menukar slaid Selain itu, kami telah memecahkan peratusan dalam jurang 20, kerana kami mempunyai 4 slaid.
ContohDalam contoh di bawah, kami telah mencipta 4 slaid berbeza dan menambah kandungan teks. Selain itu, kami menggunakan pemilih pseudo "anak ke-n" untuk memilih slaid ke-n dan menukar saiz fon dan warna teksnya.
<html>
<head>
<style>
/* set the box for the slides */
.parent { height: 300px; width: 600px; overflow: hidden;}
/* set height and width for slide elements */
.element {float: left; height: 500px; width: 716px; backgroundcolor: grey;}
/* set the width of the slides div and animation. */
.slides { width: calc(716px * 4); animation: slideShow 10s ease infinite;}
/* changing the font size and text color for every slide */
.element:nth-child(1) {font-size: 2rem; color: blue;}
.element:nth-child(2) {font-size: 3rem; color: black;}
.element:nth-child(3) {font-size: 4rem; color: green;}
.element:nth-child(4) {font-size: 5rem; color: pink;}
/* creating the animation for the slideShow */
/* for more slides, users can take percentages accordingly. */
@keyframes slideShow {
20% {margin-left: 0px;}
40% {margin-left: calc(-716px * 1);}
60% {margin-left: calc(-716px * 2);}
80% {margin-left: calc(-716px * 3);}
}
</style>
</head>
<body>
<h2> Programming a slideshow using the <i> HTML and CSS </i> only </h2>
<div class = "parent">
<div class = "slides">
<div class = "element">
<h3 class = "content"> This is a slide 1. </h3>
</div>
<div class = "element">
<h3 class = "content"> This is a slide 2. </h3>
</div>
<div class = "element">
<h3 class = "content"> This is a slide 3. </h3>
</div>
<div class = "element">
<h3 class = "content"> This is a slide 4. </h3>
</div>
</div>
</div>
</body>
</html>
Dalam output, pengguna boleh melihat tayangan slaid selama 10 saat.
ContohDalam contoh di bawah, kami menambah imej sebagai kandungan tayangan slaid. Selain itu, kami menetapkan dimensi imej kepada saiz penuh div "elemen".
<html>
<head>
<style>
/* set the box for the slides */
.parent { height: 300px; width: 600px; overflow: hidden;}
/* set height and width for slide elements */
.element {float: left; height: 500px; width: 716px; backgroundcolor: grey; }
/* set the width of the slides div and animation. */
.slides {width: calc(716px * 4); animation: slideShow 10s ease infinite;}
img {width: 100%; height: 100%;}
/* creating the animation for the slideshow */
/* for more slides, users can take percentages accordingly. */
@keyframes slideShow {
20% {margin-left: 0px;}
40% {margin-left: calc(-716px * 1);}
60% {margin-left: calc(-716px * 2);}
80% {margin-left: calc(-716px * 3);}
}
</style>
</head>
<body>
<h2> Programming a slideshow using the <i> HTML and CSS </i> only </h2>
<div class = "parent">
<div class = "slides">
<div class = "element">
<img src = "https://www.stockvault.net/data/2011/05/31/124348/thumb16.jpg" alt = "image 1">
</div>
<div class = "element">
<img src = "https://www.stockvault.net/data/2007/03/01/99589/thumb16.jpg" alt = "image 2">
</div>
<div class = "element">
<img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTxtApKDB3clf0BZYxgUlbGiYg7m-DwYlzYd9WXS5u3_K2MjeMZ-Yj3GpWdaNaGYej52l8&usqp=CAU" alt = "image 3">
</div>
<div class = "element">
<img src = "https://thumbs.dreamstime.com/b/mani%C3%A8re-par-les-racines-vertes-de-h%C3%AAtre-de-for%C3%AAt-arbres-en-nature-41019730.jpg" alt = "image 4">
</div>
</div>
</div>
</body>
</html>
Dalam output, pengguna boleh melihat tayangan slaid imej.
KesimpulanPengguna belajar membuat tayangan slaid menggunakan HTML dan CSS sahaja. Walau bagaimanapun, adalah disyorkan untuk menggunakan JavaScript untuk membuat tayangan slaid kerana kami boleh memanipulasinya dengan lebih fleksibel. Sebagai contoh, jika kita mempunyai lebih daripada 100 slaid dan perlu membuat tayangan slaid, kod CSS mungkin menjadi lebih kompleks kerana kita perlu menambah nilai peratusan berkod keras dalam bingkai utama untuk menghidupkan tayangan slaid.
Atas ialah kandungan terperinci Tulis tayangan slaid menggunakan HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!