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

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

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

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

HTML

Код

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 Просмотров: 17855 Комментариев: (15)

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

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

Kosten

Похожие материалы

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

Комментарии: 15
Порядок вывода комментариев: FruTT 23 Марта 2018 23:48¹ 0 Не работает(( хотел разместить на сайт СПАМ Kosten 24 Марта 2018 00:12² 0 Вы устанавливали материал? Дело в том, что ниже есть демонстрация, но как понимаю, вам нужно было поставить спам и не более. По сути можно было на сайт жалобу кинуть, так чтоб поняли, что спамить нельзя. vaskovvaleriy 13 Ноября 2019 11:06³ 0 И как это сделать чтобы работало в любом месте? <div><img….></div> <div>много букв</div> И при абсолютном позиционировании текст попадает под картинку Kosten 13 Ноября 2019 19:42⁴ 0 Так работать будет в любом месте, вот как пример, где добавлена высота, чтоб все изображение были идентичны по размеру. Смотреть А если делать по вверх описание, то наверно нужно не через дивы, а через p, где в нем класс задаем, и ставим background: rgb(0, 0, 0). -SAM- 14 Ноября 2019 01:48⁵ 0 Значит нужно делать абс. позиционирование не картинки, а блока, в котором находиться ваш текст. Делать типо так: <div><img….> <span>много букв</span></div> (в стилях менять img на div, потом делать еще абс. позиционирование для span, а относительное - для img; span - это не суть, можно div или p, главное чтобы его наложить потом поверх картинки). Как понял, вы хотите каждой картинке присвоить текст, чтобы поверх нее был - про это есть отдельные материалы на сайте, ищите (здесь один из примеров). Цитата Kosten () Автор: workman Не он статью писал изначально (а тем более не автор кода или метода), просто он её опубликовал был здесь вам. #Simplest CSS Slideshow b50431507 07 Мая 2020 23:13⁶ 0 Не подскажете, какие и куда нужно ввести коды, чтобы после картинки сделать таблицу ?Буду благодарна Kosten 07 Мая 2020 23:54⁷ +1 Здесь больше под слайдер, только по картинкам идет, где задаем скорость смены изображение, это как афиша, которая меняется, где можно поставить под ссылку перехода. b50431507 08 Мая 2020 17:48⁸ 0 Благодарю) Kosten 09 Декабря 2020 23:16⁹ 0 Здесь можно посмотреть в рабочем виде этот материал - а точнее перелистывание изображений. Демонстрация allamityaeva82 13 Февраля 2021 11:56¹⁰ 0 Блин, ну почему у меня то они выходят вот так: http://prntscr.com/zbg45o https://u.to/GvAIGw na3uTuB4uk 13 Февраля 2021 13:37¹¹ 0 Кеш чистил после установки? Kosten 13 Февраля 2021 18:36¹² 0 Как можно заметить, что установка стиля CSS на сайте, то после этого следует почистить кэш браузера, просто удалить за сегодня историю. Ведь бы какой браузер не был на хромовском движке, здесь нужно постоянно чистить, если что то было изменено, и подчеркиваю, это основном в стилях. I_CaR 26 Ноября 2021 00:22¹³ +1 Спасибо за код! Не понимаю, почему у многих возникли трудности с ним? Уровень сложности данного механизма "программирование для самых маленьких". Главное просто, минимум кода и функционально. ValGame 20 Мая 2023 07:33¹⁴ +1 спс очень помогло. Сначала хотел подставить под свой скрипт и не заработало, но потом я заметил что у тебя DIV был с классом, а у меня с ай ди. Поэтому я там побыстрому поменял и всё заработало) Kosten 20 Мая 2023 22:42¹⁵ 0 Что сказать, отлично, когда внимателен!