使用 HTML 和 Javascript 的图像滑块

Question

所以我尝试使用下面的代码片段为静态网站创建一个图像滑块，并且运行它在 VScodes Live Server 上 Javascript 似乎不适用于这一页。请帮忙我想添加一个简单的淡入淡出并出现到图像幻灯片的过渡，所以也请回答这个问题^_^

请不要回答 bootstrap 解决方案，我已经查过了，但不是我要找的 :p

let images = ['camp1.png', 'camp2.png', 'camp3.png'];
let slide = document.getElementById('slider');
const slider = setTimeout(function(){
    for( let i=0;i<=images.length;i++){
        slide.src = images[i];
        if (i == images.length){
            i=0;
        }
        console.log(i);
    }
}, 2000);
slide.addEventListener('load',slider);

@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@100&family=Exo:ital,wght@1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@1,900&display=swap');
.about {
  padding: 2rem 0rem;
}
.upper, .lower {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin-bottom: 2rem;
}
.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#logo{
  width: 70%;
}
.image {
  background-image: url(scene.gif);
  background-size: cover;
  width: 36rem;
  height: 28rem;
  display: flex;
  align-items: center;
  border-radius: 50%;
  border: 3px solid #000;
}
.camp {
  position: relative;
  top: 2.6rem;
  left: 7.3rem;
}
#tent {
  width: 30%;
}
#fire {
  width: 15%;
  position: relative;
  top: 1rem;
  right: 1rem;
}
.info{
    width: 23%;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 0rem 2rem 2rem 2rem;
    margin-top: 4.5rem;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.info:hover{
  transform: scale(1.1);
}
.info h1{
    font-family: 'Exo', sans-serif;
    font-size: 3rem;
    font-weight: black 900;
}
.head1{
  text-decoration: white;
}
.info p{
  font-family: 'Exo 2', sans-serif;
  font-size: 1.5rem;
  font-weight: bold;
}
.slider{
  display: flex;
  align-items: center;
  padding-top: 3.5rem;
}
.slider img{
  width: 36rem;
  height: 28rem;
  border-radius: 50%;
  border: 3px solid #000;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="stylesheet" href="about.css" />
    <title>About Us</title>
  </head>
  <body>
    <div class="about">
      <!-- ------------------------------------ -->
      <div class="upper">
        <div class="logo">
          <img src="logo.gif" alt="" id="logo" />
          <div class="image">
            <div class="camp">
              <img src="tent.png" alt="" id="tent" />
              <img src="fire.gif" alt="" id="fire" />
            </div>
          </div>
        </div>
        <div class="info">
          <h1>ABOUT<br>YELPCAMP</h1>
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque
            nostrum excepturi unde eveniet delectus? Porro esse laudantium hic
            ipsam sed inventore, aliquid quidem tempora rem harum quasi quia
            corrupti dignissimos?
          </p>
        </div>
      </div>
      <!-- ------------------------------------ -->
      <div class="lower">
        <div class="info">
          <h1>ABOUT<br>OUR TEAM</h1>
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque
            nostrum excepturi unde eveniet delectus? Porro esse laudantium hic
            ipsam sed inventore, aliquid quidem tempora rem harum quasi quia
            corrupti dignissimos?
          </p>
        </div>
        <div class="slider">
          <img src="camp1.png" alt="" id="slider"/>
        </div>
      </div>
      <!-- ------------------------------------ -->
    </div>
  </body>
  <script src="about.js"></script>
</html>

所以我尝试使用下面的代码片段为静态网站创建一个图像滑块，并且运行它在 VScodes Live Server 上 Javascript 似乎不适用于这一页。请帮助而且我想添加一个简单的淡入淡出并出现到图像幻灯片的过渡，所以请也回答这个问题^_^

请不要回答 bootstrap 解决方案，我已经查过了，但不是我要找的 :p

let images = ['camp1.png', 'camp2.png', 'camp3.png'];
let slide = document.getElementById('slider');
const slider = setTimeout(function(){
    for( let i=0;i<=images.lenght;i++){
        slide.src = images[i];
        if (i == images.lenght){
            i=0;
        }
        console.log(i);
    }
}, 2000);
slide.addEventListener('load',slider());

<div class="lower">
        <div class="info">
          <h1>ABOUT<br>OUR TEAM</h1>
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque
            nostrum excepturi unde eveniet delectus? Porro esse laudantium hic
            ipsam sed inventore, aliquid quidem tempora rem harum quasi quia
            corrupti dignissimos?
          </p>
        </div>
        <div class="slider">
          <img src="camp1.png" alt="" id="slider"/>
        </div>
      </div>
      <!-- ------------------------------------ -->
    </div>
  </body>
  <script src="about.js"></script>

Answer 1

我认为您最好使用 setInterval 而不是 setTimeout 作为自动滑块 :)

let images = ['https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/260px-PNG_transparency_demonstration_1.png', 'https://static4.depositphotos.com/1006994/298/v/950/depositphotos_2983099-stock-illustration-grunge-design.jpg', 'http://duduf.com/duf/wp-content/uploads/2015/08/Ducati_side_shadow.png'];
let slide = document.getElementById('slider');
const slider = () => {
  let i = 0;
  setInterval(
    function() {
      i = i < images.length - 1 ? ++i : 0;
      slide.src = images[i];
      console.log(i);
    }, 2000);
}
slide.addEventListener('load', slider());

<div class="lower">
  <div class="info">
    <h1>ABOUT<br>OUR TEAM</h1>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque
      nostrum excepturi unde eveniet delectus? Porro esse laudantium hic
      ipsam sed inventore, aliquid quidem tempora rem harum quasi quia
      corrupti dignissimos?
    </p>
  </div>
  <div class="slidercont">
    <img src="" alt="" id="slider" />
  </div>
</div>

使用 HTML 和 Javascript 的图像滑块

Image Slider using HTML and Javascript

html

javascript

css

image

image-slider