Добрый день.
Помогите пожалуйста разместить новостной слайдер на сайте www.vsr-kemerovo.cerkov.ru, как на сайте www.starper55plys.ru/css/slayder-css/
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Слайдер CSS</title>
<style>
/* Блок слайдера */
#slaid {
/* Задаём относительное позиционирование */
position: relative;
/*Размер и рамка блока*/
width: 400px;
height: 200px;
border: 2px solid #333;
border-radius: 5px;
}
/* Групповой селектор для 7-ми картинок */
.image1,
.image2,
.image3,
.image4,
.image5,
.image6,
.image7 {
/* Позиционируем абсолютно относительно блока */
position: absolute;
/* Делаем их полностью прозрачными */
opacity: 0;
width: 400px;
height: 200px;
}
/* Подключаем анимацию к первой картинке */
.image1{
animation: one-image 8s 1s ease alternate;
}
/* Анимация последующих картинок выполняется с задержкой начала
необходимой для прокрутки предыдущих изображений */
.image2 {
animation: two-image 8s 5s ease alternate;
}
.image3 {
animation: three-image 8s 10s ease alternate;
}
.image4 {
animation: four-image 8s 14s ease alternate;
}
.image5 {
animation: five-image 8s 18s ease alternate;
}
.image6 {
animation: six-image 8s 22s ease alternate;
}
.image7 {
animation: seven-image 8s 26s ease alternate;
}
/* Последняя картинка не прозрачная остаётся видной после прокрутки */
.image8 {
position: absolute;
width: 400px;
height: 200px;
animation: eight-image 34s ease alternate;
}
/* Анимации для первой картинки */
@keyframes one-image{
/* Задаём изменение прозрачности.
Здесь можно добавить вращение, перемещение из-за границ блока
или появление из центра (масштабирование) */
0% {
opacity: 1;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* Анимация для следующих 6-и картинок */
@keyframes two-image{
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes three-image{
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes four-image{
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes five-image{
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes six-image{
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes seven-image{
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* Анимация для восьмой картинки */
@keyframes eight-image{
/* остаётся прозрачной пока не прокрутятся предыдущие */
0% {
opacity: 0;
}
87% {
opacity: 0;
}
/*Становиться видимой в конце работы слайдера */
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<div id="slaid">
<img class="image1" src="images/172.jpg">
<img class="image2" src="images/166.jpg">
<img class="image3" src="images/153.jpg">
<img class="image4" src="images/129.jpg">
<img class="image5" src="images/135.jpg">
<img class="image6" src="images/116.jpg">
<img class="image7" src="images/122.jpg">
<img class="image8" src="images/173.jpg">
</div>
</body>
</html>
<script>
var CLN; onload = function () {CLN = document.getElementById ('slaid').cloneNode (3)}
</script>
<input type="button" value="Посмотреть ещё раз" onclick="var obj = document.getElementById ('slaid'); obj.parentNode.replaceChild (CLN, obj)">
Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
|
Сообщение сайта
Размещение новосного слайдера
Sergio1982
0 
Ручное размещение вечных ссылок и статей на хороших площадках
23.2.2016, 20:15;
Сообщений: 4
