Перейти к содержимому

Сервис обмена электронных валют


Размещение новосного слайдера

#1 Sergio1982

Sergio1982
  • Пользователь
  • 4 сообщений
  • Репутация: 0
0

Отправлено 23 Февраль 2016 - 19:15

Добрый день.

Помогите пожалуйста разместить новостной слайдер на сайте 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)">

 

 

  • 0


Оформление форума – IPBSkins.ru