Появление и исчезновение картинок

D
На сайте с 01.09.2015
Offline
59
1989

Здравствуйте.

Помогите с кодом, нужно чтобы картинка исчезла через 5 секунд, а на ее месте сразу же появилась другая картинка, которая через 5 секунд тоже исчезнет, затем появляется третья.

Вроде решение простое, но в интернете не смог ничего толкового найти.

SeVlad
На сайте с 03.11.2008
Offline
1462
#1
Digistive:
Помогите с кодом, нужно чтобы картинка исчезла через 5 секунд, а на ее месте сразу же появилась другая картинка, которая через 5 секунд тоже исчезнет, затем появляется третья.

Это называется "слайдер". В гуглояндексах полно рецептов.

Делаю хорошие сайты хорошим людям. Предпочтение коммерческим направлениям. Топики помощи с ⓌordPress (https://searchengines.guru/ru/forum/1032910 ) и основы безопасности сайтов ( https://searchengines.guru/ru/forum/774117 ). *** Помощь\консультации в топиках форума - БЕСПЛАТНО. Платные услуги ( https://wp.me/P3YHjQ-3 ) - с бюджетом от 150$ ***
S
На сайте с 30.09.2016
Offline
469
#2

В простейшем случае, в зависимости от задачи

setInterval

setTimeout

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
melkozaur
На сайте с 06.04.2010
Offline
496
#3

Это можно сделать средствами css например.

https://www.taniarascia.com/crossfade-between-two-images-with-css-animations/

Серверы в NL/US со скидкой 30% нашим читателям: E5-2650v4/10GB DDR4/240GB SSD/1 Gbps - от $20: https://ua-hosting.company/vps/nl SEO без компромиссов: https://seoleaks.net SEOLEAKS - продвижение сайтов: https://www.instagram.com/seoleaks
imaster-php
На сайте с 02.05.2019
Offline
8
#4

Подключите Js слайдер (например bxSlider или Owl Carousel), и будет вам счастье.

Остальные методы (на чистом CSS, setInterval, и т.д.) - это просто баловство..)

Хостинг для сайта ( https://good-hoster.ru ) - сервис по выбору хостинга
S
На сайте с 30.09.2016
Offline
469
#5
imaster-php:
это просто баловство..)

Для тех, кто в этом хоть что-то понимает. А для таких плагиновставлятелей - пустой звук.

imaster-php
На сайте с 02.05.2019
Offline
8
#6
Для тех, кто в этом хоть что-то понимает. А для таких плагиновставлятелей - пустой звук.

Тот же bxslider весит всего 19 КБ. И у него, помимо автопрокрутки, куча всевозможных настроек (ручное переключение, эффекты смены изображений, поддержка touch событий, цикличность, настройки скорости прокрутки и много еще чего.) И самое главное, все это настраивается в пару строк кода.

Сами вы можете написать свой примитивный слайдер, который будет во многом проигрывать готовым скриптам, но не нужно советовать это делать человеку, который в принципе не знает что такое "слайдер". У него от таких советов возникнет еще больше вопросов...

S
На сайте с 30.09.2016
Offline
469
#7
imaster-php:
помимо автопрокрутки, куча всевозможных настроек

Ну и нахрен бы они сдались просто для показа трёх картинок? Я и говорю: для тех, кто не может сам несколько строчек кода написать. Для вставлятелей.

imaster-php:
не нужно советовать
А вот попрошу не указывать мне, что советовать, а что не советовать. Потому что после Ваших советов у человека может сложиться впечатление, что не существует других способов работы с сайтом, кроме впихивания плагинов по делу и не по делу.
imaster-php
На сайте с 02.05.2019
Offline
8
#8
после Ваших советов у человека может сложиться впечатление, что не существует других способов

Я не против других способов. Но если человек даже не знает, как называется этот элемент, то рекомендовать писать его с нуля, - это все-равно что посылать солдата с мечем в руках на танк).

Да и вообще, насколько я знаю, слайдеры редко кто пишет самостоятельно (просто не целесообразно).

D
На сайте с 01.09.2015
Offline
59
#9
SeVlad:
Это называется "слайдер". В гуглояндексах полно рецептов.

Я знаю что такое слайдер, но мне нужно, чтобы смена картинок не была зациклена, а в случае с типичными слайдарами именно так и происходит.

S
На сайте с 30.09.2016
Offline
469
#10
Digistive:
нужно, чтобы смена картинок не была зациклена, а в случае с типичными слайдарами именно так и происходит.

Во многих слайдерах это делается установкой опций, что-то типа autoStart: true, loop: false.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий