ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Автоматическая смена картинок на CSS

Автоматическая смена картинок на CSS

Автоматическая смена картинок на CSS
Простой и на некоторых тематических сайтах нужная функция по автоматической смене изображение, что картинки выставленные под клик. Это может быть как рекламный блок или поставлено на главную страницу на ваш материал, где пользователь или гость видеть, и просто переходит на основу, где подробно по этой теме описано.

Ставится код в любое место, где вы хотите видеть и под них прописываются стили в CSS и на этом все. Можно поставить в контейнер и выставить ширину, чтоб корректно смотрелось, как все работает, вы можете посмотреть на демонстраций и понять смысл работы.

HTML

Код
<div class="fadein">
  <img src="http://zornet.ru/Aben/ABGEA/Rin/remont_vannoj12-min.jpg">
  <img src="http://zornet.ru/Aben/ABGEA/Rin/remont_vannoj10-min.jpg">
  <img src="http://zornet.ru/Aben/ABGEA/Rin/remont_vannoj12-min.jpg">
</div>

CSS:

Код
@keyframes fade {
  0% { opacity: 0; }
  11.11% { opacity: 1; }
  33.33% { opacity: 1; }
  44.44% { opacity: 0; }
  100% { opacity: 0; }
}

.fadein { position:relative; width:70%;}
.fadein img { position:absolute; width:100%; left:0; right:0; opacity:0; animation-name: fade; animation-duration: 9s; animation-iteration-count: infinite; }
.fadein img:nth-child(1) { animation-delay: 0s; }
.fadein img:nth-child(2) { animation-delay: 3s; }
.fadein img:nth-child(3) { animation-delay: 6s; }

Скорость задаем ссами, также можете поставить эффект значение заголовка.

Автор: workman

DEMO
29 Сентября 2017 Просмотров: 17346 Комментариев: (15)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 15
FruTT
FruTT 23 Марта 2018 23:481
0
Не работает(( хотел разместить на сайт СПАМ 04b
Kosten
Kosten 24 Марта 2018 00:122
0
Вы устанавливали материал? Дело в том, что ниже есть демонстрация, но как понимаю, вам нужно было поставить спам и не более. По сути можно было на сайт жалобу кинуть, так чтоб поняли, что спамить нельзя.
vaskovvaleriy
vaskovvaleriy 13 Ноября 2019 11:063
0
И как это сделать чтобы работало в любом месте?
<div><img….></div>
<div>много букв</div>

И при абсолютном позиционировании текст попадает под картинку
Kosten
Kosten 13 Ноября 2019 19:424
0
Так работать будет в любом месте, вот как пример, где добавлена высота, чтоб все изображение были идентичны по размеру.

Смотреть

А если делать по вверх описание, то наверно нужно не через дивы, а через p, где в нем класс задаем, и ставим background: rgb(0, 0, 0).
-SAM-
-SAM- 14 Ноября 2019 01:485
0
Значит нужно делать абс. позиционирование не картинки, а блока, в котором находиться ваш текст. Делать типо так:
<div><img….>
<span>много букв</span></div>
(в стилях менять img на div, потом делать еще абс. позиционирование для span, а относительное - для img; span - это не суть, можно div или p, главное чтобы его наложить потом поверх картинки).
Как понял, вы хотите каждой картинке присвоить текст, чтобы поверх нее был - про это есть отдельные материалы на сайте, ищите (здесь один из примеров).

Цитата Kosten ()
Автор: workman
Не он статью писал изначально (а тем более не автор кода или метода), просто он её опубликовал был здесь вам.
#Simplest CSS Slideshow
b50431507
b50431507 07 Мая 2020 23:136
0
Не подскажете, какие и куда нужно ввести коды, чтобы после картинки сделать таблицу ?Буду благодарна
Kosten
Kosten 07 Мая 2020 23:547
+1
Здесь больше под слайдер, только по картинкам идет, где задаем скорость смены изображение, это как афиша, которая меняется, где можно поставить под ссылку перехода.
b50431507
b50431507 08 Мая 2020 17:488
0
Благодарю)
Kosten
Kosten 09 Декабря 2020 23:169
0
Здесь можно посмотреть в рабочем виде этот материал - а точнее перелистывание изображений.

Демонстрация
allamityaeva82
allamityaeva82 13 Февраля 2021 11:5610
0
Блин, ну почему у меня то они выходят вот так: http://prntscr.com/zbg45o
https://u.to/GvAIGw
na3uTuB4uk
na3uTuB4uk 13 Февраля 2021 13:3711
0
Кеш чистил после установки?
Kosten
Kosten 13 Февраля 2021 18:3612
0
Как можно заметить, что установка стиля CSS на сайте, то после этого следует почистить кэш браузера, просто удалить за сегодня историю. Ведь бы какой браузер не был на хромовском движке, здесь нужно постоянно чистить, если что то было изменено, и подчеркиваю, это основном в стилях.
I_CaR
I_CaR 26 Ноября 2021 00:2213
+1
Спасибо за код! Не понимаю, почему у многих возникли трудности с ним?
Уровень сложности данного механизма "программирование для самых маленьких".
Главное просто, минимум кода и функционально.
ValGame
ValGame 20 Мая 2023 07:3314
+1
спс очень помогло. Сначала хотел подставить под свой скрипт и не заработало, но потом я заметил что у тебя DIV был с классом, а у меня с ай ди. Поэтому я там побыстрому поменял и всё заработало)
Kosten
Kosten 20 Мая 2023 22:4215
0
Что сказать, отлично, когда внимателен!
avatar