Как добавить картинку в массив js
Перейти к содержимому

Как добавить картинку в массив js

  • автор:

Слайдер картинок через массив на JavaScript

Давайте теперь сделаем слайдер картинок. Пусть в HTML коде у нас дан тег img :

Пусть также у нас дан массив картинок:

let texts = [‘1.png’, ‘2.png’, ‘3.png’];

Давайте сделаем так, чтобы каждую секунду в теге img появлялась новая картинка из нашего массива.

Реализуйте описанный слайдер. Сделайте так, чтобы картинки ходили по кругу.

Модифицируйте предыдущую задачу так, чтобы над картинкой также появились стрелки вперед и назад. То есть слайдер будет сам проматываться таймером, но при желании юзер также сможет промотать его ссылками.

Как создать массив с картинками и текстом и загружать их по нажатию на кнопки или на стрелки

Пример слайдера

Есть небольшой слайдер с четырьмя картинками и текстами в двух блоках: Как сделать массив с текстами и картинками, и изменять его, по нажатию на определенный день или же на стрелочки?

.slider < display: flex; margin-bottom: 300px; align-content: space-between; >.check-up-img < width: 100%; >.slider-info < display: flex; flex-direction: column; >.block-day < margin-top: 67px; align-items: center; display: flex; justify-content: flex-end; >.Day < text-align: center; padding: 6px 40px; >.selected < font-style: normal; font-weight: bold; font-size: 16px; line-height: 24px; text-transform: uppercase; color: #ff9933; >.day1 < border: 2px solid #ff9933; >.slider-text < float: right; >.slider-description < width: 480px; >.arrow < color: black; margin-top: 175px; >.arrow-left

        
День
1
День
2
День
3
День
4

День 1

Прилет (время зависит от выбранного рейса) Трансфер из аэропорта в отель Заселение в отеле на выбор (3, 4, 5 звезд) в Азиатской части Стамбула, район Кадикей (Мода) рядом с набережной Мраморного моря Рекомендуемый маршрут для самостоятельной прогулки и посещения ресторана Связь с организатором в мессенджере

Отслеживать

34.3k 6 6 золотых знаков 29 29 серебряных знаков 71 71 бронзовый знак

задан 8 авг 2021 в 10:31

Андрій Олегович Попович Андрій Олегович Попович

11 3 3 бронзовых знака

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Пример с использованием bootstrap

.custom-carousel < position: realtive; >.custom-carousel .carousel-item img < height: 100vh; object-fit: cover; >.custom-carousel .carousel-content < padding: 6em 0 2em; >.custom-carousel .carousel-indicators < top: 0; right: 0; left: auto; bottom: auto; width: 50%; margin-left: 0; margin-right: 0; justify-content: flex-start; padding: 2em 0; >.custom-carousel .carousel-indicators [data-bs-target] < background: none; text-indent: 0; white-space: nowrap; width: auto; height: auto; border: 2px solid transparent; padding: .5rem; >.custom-carousel .carousel-indicators .active

[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">  
.

День 1

Прилет (время зависит от выбранного рейса) Трансфер из аэропорта в отель Заселение в отеле на выбор (3, 4, 5 звезд) в Азиатской части Стамбула, район Кадикей (Мода) рядом с набережной Мраморного моря Рекомендуемый маршрут для самостоятельной прогулки и посещения ресторана Связь с организатором в мессенджере

.

День 2

Прилет (время зависит от выбранного рейса) Трансфер из аэропорта в отель Заселение в отеле на выбор (3, 4, 5 звезд) в Азиатской части Стамбула, район Кадикей (Мода) рядом с набережной Мраморного моря Рекомендуемый маршрут для самостоятельной прогулки и посещения ресторана Связь с организатором в мессенджере

.

День 3

Прилет (время зависит от выбранного рейса) Трансфер из аэропорта в отель Заселение в отеле на выбор (3, 4, 5 звезд) в Азиатской части Стамбула, район Кадикей (Мода) рядом с набережной Мраморного моря Рекомендуемый маршрут для самостоятельной прогулки и посещения ресторана Связь с организатором в мессенджере

.

День 4

Прилет (время зависит от выбранного рейса) Трансфер из аэропорта в отель Заселение в отеле на выбор (3, 4, 5 звезд) в Азиатской части Стамбула, район Кадикей (Мода) рядом с набережной Мраморного моря Рекомендуемый маршрут для самостоятельной прогулки и посещения ресторана Связь с организатором в мессенджере

Как добавить картинку в массив, обойти её и отрендерить?

Casufi

Дайте чуть больше вводных. Картинки откуда добавляются, локально с компьютера, из базы ссылки на картинки, ссылки на картинки через форму ввода?

AndreyVolkov72 @AndreyVolkov72 Автор вопроса
Владимир, локально с компьютера
Решения вопроса 0
Ответы на вопрос 1

Casufi

Файл который расположен локально вы напрямую не покажете на странице вам нужно
1) Сделать форму для аплоаде нескольких файлов, гуглите по атрибуту multiple для инпута
2) Преобразовать файл в base 64
https://developer.mozilla.org/en-US/docs/Web/API/File
https://developer.mozilla.org/en-US/docs/Web/API/F.
3) Добавить в массив base 64 урлки и показать их пользователю.
4) Если файлы нужно отсылать на сервер — отослать.

Ответ написан более двух лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

javascript

  • JavaScript
  • +2 ещё

Какие инструменты для анализа React JS кода использовать?

  • 1 подписчик
  • 4 часа назад
  • 45 просмотров

как вставить картинку в js

Для создания изображения можем создать элемент с помощью метода createElement . Далее, чтобы добавить изображение на веб-страницу, нужно установить соответствующие свойства этому элементу.

Определим, где должно расоплагаться изображение (родительский контейнер).

 id="image-container">

Теперь напишем js код:

// Создаем элемент изображения const img = document.createElement('img'); // Устанавливаем путь к изображению img.src = 'path/to/image.jpg'; // Устанавливаем альтернативный текст для изображения img.alt = 'Описание изображения'; // Получаем контейнер, куда нужно вставить изображение const container = document.querySelector('#image-container'); // Вставляем изображение в контейнер container.append(img); 

Этот код создаст элемент , устанавливает ему путь и альтернативный текст, а затем добавляет его в контейнер, который имеет идентификатор image-container .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *