搜尋

首頁  >  文章  >  web前端  >  使用HTML和CSS編寫幻燈片展示

使用HTML和CSS編寫幻燈片展示

WBOY
WBOY轉載
2023-08-19 20:25:121406瀏覽

使用HTML和CSS編寫幻燈片展示

Generally, the developer uses JavaScript to add the behaviour to the HTML code. Sometimes, we can also add behaviour to the HTML code using CSS. For example, we can create a slideshow using HTML and CSS rather than using JavaScript with HTML.

We can create custom keyframes to animate the slides and create a slideshow.

文法

使用者可以依照以下語法，只使用HTML和CSS來建立投影片。 

.slides {
   width: calc(716px * 2);
   animation: slideShow 10s ease infinite;
}
@keyframes slideShow {
   30% {margin-left: 0px;}
   70% {margin-left: calc(-716px * 1);}
}

在上述語法中，'slides' div 包含多個幻燈片。我們根據 'slides' div 包含的幻燈片總數定義了 'slides' div 的寬度。此外，我們也為幻燈片 div 新增了動畫。

In the slideshow keyframes, we change the value of the ‘margin-left’ CSS property to change the slide.

步驟

步驟1 - 建立一個div元素，並給它一個'parent'類別名稱。

Step 2 – Create a nested div element and give the ‘slides’ class name. Furthermore, create multiple nested div elements with the ‘element’ class name representing the slides.

Step 3 – Also, add the content of the slide to the div element with the class name ‘element’.

Step 4 – Now, we require to add the CSS code for the slideshow. Give the fixed width and height to the ‘parent’ div element.

Step 5 – Set the fixed width and height for the ‘element’ div, which is our slide.

Step 6 – For the ‘slides’ div, calculate the total width according to the total number of slides it contains, and add a ‘slideshow’ animation for a particular duration.##ular duration.

Step 7 – Create a 'slideshow' keyframe which should change the value of the 'margin-left' CSS property to change the slides. Also, we have breakdown the percentage in the gap of 20, as we have 4 slides.

Example

在下面的範例中，我們建立了4個不同的投影片並新增了文字內容。此外，我們使用了「n-th child」偽選擇器來選擇第n個投影片並更改其字體大小和文字顏色。 

<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>

In the output, users can see the slideshow of 10 seconds.

Example

在下面的範例中，我們將圖像新增為投影片的內容。此外，我們將圖像的尺寸設定為「element」 div 的完整尺寸。 

<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>

在輸出中，使用者可以觀察影像的幻燈片播放。

結論

使用者學會了只使用HTML和CSS建立投影片。然而，建議使用JavaScript來建立投影片，因為我們可以更靈活地操作它。例如，如果我們有100多個投影片並且需要建立投影片播放，CSS程式碼可能會變得更複雜，因為我們需要在關鍵影格中加入硬編碼的百分比值來實現投影片的動畫效果。

以上是使用HTML和CSS編寫幻燈片展示的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除
上一篇：Materialize CSS中的麵包屑有哪些類別？下一篇：Materialize CSS中的麵包屑有哪些類別？

相關文章

看更多