Здравствуйте уважаемые начинающие веб-мастера.
Вот самый простой в мире слайдер на чистом CSS.
К преимуществам такого слайдера можно отнести лёгкость и безопасность, а так же то, что его сможет сделать и установить на свой сайт даже самый начинающий веб-мастер.
[html]
<!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="http://sg.uploads.ru/t/SGwWH.jpg">
<img class="image2" src="http://s8.uploads.ru/t/E0Iuk.jpg">
<img class="image3" src="http://s7.uploads.ru/t/SgiYM.jpg">
<img class="image4" src="http://sh.uploads.ru/t/YwITR.jpg">
<img class="image5" src="http://sg.uploads.ru/t/XYgAE.jpg">
<img class="image6" src="http://s3.uploads.ru/t/Fjcey.jpg">
<img class="image7" src="http://sg.uploads.ru/t/zQI7O.jpg">
<img class="image8" src="http://s9.uploads.ru/t/HKMAz.png">
</div>
</body>
</html>
[/html]
[think=http://www.kolobok.us/smiles/standart/yahoo.gif]Пользуйтесь и радуйтесь[/think]
А недостаток в том, что только на CSS невозможно сделать повтор цикла.
Но если учесть, что восемь картинок прокручиваются более 30 секунд, то этого времени вполне достаточно посетителю для просмотра страницы.
И если слайдер установлен в шапке сайта, то её уж точно никто полминуты рассматривать не будет.
Эффекты появления картинок можно изменить по своему вкусу, и в соответствии с возможностями CSS3. Давайте смотреть где и как это можно сделать.
<!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/111jpg">
<img class="image2" src="images/111.jpg">
<img class="image3" src="images/111.jpg">
<img class="image4" src="images/111.jpg">
<img class="image5" src="images/111.jpg">
<img class="image6" src="images/111.jpg">
<img class="image7" src="images/111.jpg">
<img class="image8" src="images/111.jpg">
</div>
</body>
</html>
[good]
А чё тут так не зделаешь? Особенно последняя картинка понравилась --
