Я хочу создать синхронизированное слайд-шоу, используя мой существующий код и добавив javascript для переключения изображения. Я хочу, чтобы три фотографии чередовались каждые 3 секунды. Мне нужно изменить только фото, а не текстовый заголовок. Я прикрепил свой код HTML и CSS.

#headercontainer{
  width: 100vw;
  height:90vh;
  background-color: #A64253;
}


.head{
  width: 100%; 
  height: 100%; 
  object-fit: cover;
}

.headertxt{
  position: absolute; 
  top: 40%; 
  margin: auto;
  width: 100%; 
  font-size: 8.5vw;
  text-align: center;
  color: #17255A;
}

#arrow{
  font-size: 6vw;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    
  </head>
  <body>
 

  <div id="headercontainer">

  <img class="head" src="https://th.bing.com/th/id/R.10d3bd1edd810efb3ae8e0974e394445?rik=fIvZv9wkgyrIeQ&pid=ImgRaw&r=0" alt="">
  <h1 class="headertxt"> TEXT<br> <p id="arrow"> ↓</p></h1>
  </div>










    
  </body>
</html>

`

0
Jasper Atrens 9 Окт 2021 в 03:10

3 ответа

Лучший ответ

Вы можете просто запустить функцию setInterval с массивом изображений Просто вставьте этот JS-код в свой код, чтобы получить результат

const headerImg = document.querySelector('.head')

const UPDATE_TIME_INTERVAL = 3000

//  Enter URLs of your own custom images
const imagesArray = [
  "https://unsplash.it/500",
  "https://unsplash.it/501",
  "https://unsplash.it/502",
]

let i = 0

setInterval(()=>{
  if(i == 2){
    i = 0
  }
  else {i = i + 1};
  console.log('i was run',i)
  headerImg.src = imagesArray[i]
},UPDATE_TIME_INTERVAL)
0
Ankit Sanghvi 9 Окт 2021 в 03:35

setInterval() и setTimeout() - удобные инструменты при создании таймеров. В вашем случае вы хотите, чтобы последовательность продолжалась, поэтому setInterval() - лучший вариант.

Чтобы создать последовательность с помощью setInterval(), вы можете сделать что-то вроде этого:

setInterval(function(){ console.log("Hello"); }, 3000);

Если вы откроете консоль, вы будете видеть «Привет» каждые несколько секунд.

Итак, чтобы использовать эту замечательную функцию в своем коде, вы можете использовать этот пример:

setInterval(function(){
  let images = ["path/to/first/image", "path/to/second/image", "path/to/third/image"];
  let imageNumber = 0;
  let image = images[imageNumber];
  document.querySelector(".head").src = image;
  imageNumber++;
  if (imageNumber >= 3) {
     imageNumber = 0;
  }
}, 3000);
0
InfinityLight 9 Окт 2021 в 00:43

Надеюсь, это поможет вам.

body {
    margin: 0;
}

#headercontainer {
    width: 100vw;
    height: 90vh;
    background-color: #A64253;
    position: relative;
}

.head {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.headertxt {
    position: absolute;
    top: 40%;
    margin: auto;
    width: 100%;
    font-size: 8.5vw;
    text-align: center;
    color: #17255A;
    z-index: 1;
}

#arrow {
    font-size: 6vw;
}

.head1 {
    position: relative;
    animation: head1 9s linear infinite;
}

.head2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    animation: head2 9s linear infinite;
}

.head3 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    animation: head3 9s linear infinite;
}

@keyframes head1 {
    0% {
        opacity: 1;
    }
    22.222222% {
        opacity: 1;
    }
    33.333333% {
        opacity: 0;
    }
    88.888888% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes head2 {
    0% {
        opacity: 0;
    }
    22.222222% {
        opacity: 0;
    }
    33.333333% {
        opacity: 1;
    }
    55.555555% {
        opacity: 1;
    }
    66.666666% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes head3 {
    0% {
        opacity: 0;
    }
    55.555555% {
        opacity: 0;
    }
    66.666666% {
        opacity: 1;
    }
    88.888888% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
<div id="headercontainer">
    <img class="head head1" src="https://www.w3schools.com/css/img_5terre.jpg" alt="">
    <img class="head head2" src="https://www.w3schools.com/css/img_forest.jpg" alt="">
    <img class="head head3" src="https://www.w3schools.com/css/img_lights.jpg" alt="">

    <h1 class="headertxt"> TEXT<br>
        <p id="arrow"> ↓</p>
    </h1>
</div>
0
Sato Takeru 9 Окт 2021 в 03:00