Блог

Главная - Вопросы по программированию - Я хочу сделать автоматический слайдер изображений в HTML, я пробовал, но это не работает?

Я хочу сделать автоматический слайдер изображений в HTML, я пробовал, но это не работает?

#html #css

Вопрос:

Я хочу сделать слайдер изображения шириной:100% и высотой 365%. Я пробовал это, но это не работает».

 <style>
    .slide{
        width: 100%;
        height: 370px;
        border: 2px solid orange;
        animation-name: slide1;
        animation-duration: 8s;
        animation-iteration-count: infinite;
    }
    @keyframes slide1{
        0%{
            /* background-color: orange; */
            background-image: url("3.jpg");
        }
        25%{
            background-image: url("a2.img");
        }
        75%{
            background-image: url("a3.img");
        }
        100%{
            background-image: url("a4.img");
        }
    }
</style>

и в теле, если я добавлю так много, я надеюсь, что это сработает

 <body>
<div class="slide">
</div>

Комментарии:

1. Привет и добро пожаловать в Stack Overflow. Не могли бы вы объяснить, пожалуйста, «что не работает»?

Ответ №1:

Попробуй это.

Я думаю, ты промахнулся animation-timing-function .

 .slide {
  width: 100%;
  height: 370px;
  border: 2px solid orange;
  background-repeat: no-repeat;
  background-size: contain;
  animation-name: slide1;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes slide1 {
  0% {
    background-image: url("https://images.unsplash.com/photo-1633113215844-b2ddc0411724?ixlib=rb-1.2.1amp;ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw=amp;auto=formatamp;fit=cropamp;w=500amp;q=60");
  }
  25% {
    background-image: url("https://images.unsplash.com/photo-1637709569303-f7cda15a4d3a?ixlib=rb-1.2.1amp;ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0fHx8ZW58MHx8fHw=amp;auto=formatamp;fit=cropamp;w=500amp;q=60");
  }
  75% {
    background-image: url("https://images.unsplash.com/photo-1637717256696-a0204d03a8fe?ixlib=rb-1.2.1amp;ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw=amp;auto=formatamp;fit=cropamp;w=500amp;q=60");
  }
  100% {
    background-image: url("https://images.unsplash.com/photo-1633113215844-b2ddc0411724?ixlib=rb-1.2.1amp;ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw=amp;auto=formatamp;fit=cropamp;w=500amp;q=60");
  }
} 
 <body>
  <div class="slide"></div>
</body>
Метки: , ,