» »

Автоматическая смена картинок на 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
2017-09-29 Просмотров: 4683 Комментарий: (5)

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

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

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

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

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

Смотреть

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

Цитата Kosten ()
Автор: workman
Не он статью писал изначально (а тем более не автор кода или метода), просто он её опубликовал был здесь вам.
#Simplest CSS Slideshow
avatar