Question

是否可以使用HTML和CSS创建幻灯片？类似于Powerpoint创建的幻灯片，只是代码不同。

Answer 1

您可以在HTML文件中这样做。

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none;}
</style>
<body>

<h2 class="w3-center">Automatic Slideshow</h2>

<div class="w3-content w3-section" style="max-width:500px">
  <img class="mySlides" src="img_la.jpg" style="width:100%">
  <img class="mySlides" src="img_ny.jpg" style="width:100%">
  <img class="mySlides" src="img_chicago.jpg" style="width:100%">
</div>

<script>
var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>

</body>
</html>

或者您可以去W3学校亲自尝试。

https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_rr

Answer 2

您只能将滑块与html和css一起使用：

<div class="slider-container">
      <div class="menu">
        <label for="slide-dot-1"></label>
        <label for="slide-dot-2"></label>
        <label for="slide-dot-3"></label>
      </div>

      <input id="slide-dot-1" type="radio" name="slides" checked>
        <div class="slide slide-1"></div>

      <input id="slide-dot-2" type="radio" name="slides">
        <div class="slide slide-2"></div>

      <input id="slide-dot-3" type="radio" name="slides">
        <div class="slide slide-3"></div>
    </div>

    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      font-family: "Helvetica", sans-serif;
    }

    img {
      max-width: 100%;
    }

    .slider-container{
      height: 100%;
      width: 100%;
      position: relative;
      overflow: hidden; 
      text-align: center;
    }

    .menu {
      position: absolute;
      left: 0;
      z-index: 900;
      width: 100%;
      bottom: 0;
    }

    .menu label {
      cursor: pointer;
      display: inline-block;
      width: 16px;
      height: 16px;
      background: #fff;
      border-radius: 50px;
      margin: 0 .2em 1em;
      &:hover {
        background: red;
      }
    }

    .slide {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 100%;
      z-index: 10;
      padding: 8em 1em 0;
      background-size: cover;
      background-position: 50% 50%;
      transition: left 0s .75s;
    }

    [id^="slide"]:checked + .slide {
      left: 0;
      z-index: 100;
      transition: left .65s ease-out;
    }

    .slide-1 {
      background-image: url("https://source.unsplash.com/t7YycgAoVSw/1600x900");
    }
    .slide-2 {
      background-image: url("https://source.unsplash.com/11H1SSVcIxc/1600x900");
    }
    .slide-3 {
      background-image: url("https://source.unsplash.com/OlZ1nWLEEgM/1600x900");
    }

如何使用HTML制作类似幻灯片的内容

2 个答案: