регистрация
856материалов
3290комментариев
235тем на форуме
6865пользователей

Простое слайд-шоу средствами CSS3, без скриптов


Описание:

Благодаря CSS3 мы можем создавать эффекты анимации, не используя JavaScript, что упростит работу многих разработчиков. В наши дни, слайд-шоу можно встретить практически на любом сайте. Большинство из них используют JavaScript для смены изображений, некоторые используют Flash. Проблемы с просмотром изображений могут возникнуть лишь в том случае, если браузер пользователя не поддерживает ни того ни другого. В сегодняшней статье вы узнаете, как можно создать слайд-шоу c помощью CSS и HTML не используя ни каких скриптов.

Установка:

В таблицу стилей вставляем код:
Код
@keyframes fade {
     0% { opacity: 0; }
     11.11% { opacity: 1; }
     33.33% { opacity: 1; }
     44.44% { opacity: 0; }
     100% { opacity: 0; }
}
.fadein { position:relative; height:312px; width:500px;}
.fadein img { position:absolute; 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; }

Html код слайдера:
Код
<div class="fadein">
     <img src="http://webmaster-ucoz.ru/_ph/1/2/647382444.jpg?1452531936">
     <img src="http://webmaster-ucoz.ru/_ph/1/2/120207662.jpg?1452532172">
     <img src="http://webmaster-ucoz.ru/_ph/1/2/183576989.jpg?1452532190">
</div>


Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 12.01.2016 в 07:00
Материал просмотрен: 3134 раза
Категория материала: Скрипты для uCoz
К материалу оставлены: 4 комментария

Пожаловаться
Сказать спасибо

4 комментария


q
Скажите а можно туда ссылки поставить? Ну как ротатор баннеров сделать. Если да то помогите пизззз
Ромчик
Это слайдер, для ротатор баннеров используйте системный ротатор http://f1.s.qip.ru/19yBhtbV3.png
q
Ну я немного не так выразился, имел ввиду слайдер.
Leo_Santoro
Leo Santoro @Leo_Santoro 15.02.2017 19:404
0
Добрый день!
Как сделать так чтоб картинка была поверх всего ?
Наткнулся на такую ошибку
http://se.usite.pro/_ph/2/687205350.png
avatar
Партнерская программа uKitCPA
Создать сайт вместе с uKit.com
Статистики нашего сайта
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0