Как создать слайд-шоу с помощью CSS и HTML

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

Что мы собираемся делать

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

Подготовка изображений

Первое, что нам понадобится это картинки. В этом примере я использовал изображения пейзажей, но это может быть и рекламный контент, в общем, все, что вам нравится. Я сделал основное изображение размером 500х300, и табы размером 75х125. Я просто взял размер основного изображения, затем разделил высоту на желаемое количество табов (в моем случае 300/4 = 75), так я вычислил высоту табов. Ширина табов взята произвольно, я просто изменил размер основного изображения до высоты равной 75, и ширина получилась, пропорциональна заданной высоте, в нашем случае 125.

Теория

В теории все это работает довольно просто. Мы будем использовать тэги a, для перехода от одного изображения к другому. Это очень похоже на ссылку «наверх», которая прокручивает страницу до самого верха, по клику. Единственное различие в том, что картинки будут прокручиваться в контейнере div, вместо прокручивания вверх и вниз по странице.

HTML

HTML, сам по себе, очень простой. Что касается табов, это всего лишь маркированный список, с изображениями внутри якорных тэгов. Все просматриваемые изображения, заключены в div (это очень важно, поскольку мы будем прятать все лишние картинки с помощью overflow, и отображать только выделенное изображение). К тому же, каждая картинка также заключена в div и в якорный тэг. Эти div-ы можно использовать как контейнеры, в том случае если вы захотите использовать фоновое изображение вместо обычной картинки, они на самом деле не нужны в этом примере, мы просто оставим их, если вдруг передумаем.

Вот такой должен быть html:

<div id="wrapper">
        <!-- Tabs -->
        <ul>
            <li><a href="#image1" id="tab1"><img src="tab1.jpg" alt="" title="" /></a></li>
            <li><a href="#image2" id="tab2"><img src="tab2.jpg" alt="" title="" /></a></li>
            <li><a href="#image3" id="tab3"><img src="tab3.jpg" alt="" title="" /></a></li>
            <li><a href="#image4" id="tab4"><img src="tab4.jpg" alt="" title="" /></a></li>
        </ul>
        
        <!-- Images -->
        <div id="images">
            <div><a name="image1"></a><img src="image1.jpg" alt="" title="" /></div>
            <div><a name="image2"></a><img src="image2.jpg" alt="" title="" /></div>
            <div><a name="image3"></a><img src="image3.jpg" alt="" title="" /></div>
            <div><a name="image4"></a><img src="image4.jpg" alt="" title="" /></div>
        </div>
    </div>

CSS

С помощью CSS, мы настроим табы таким образом, что они будут располагаться слева от основного окна и располагаться друг на друге. Мы также установим 40-% прозрачность табов в обычном состоянии, и 100%-прозрачность при наведении мыши. Конечно, наиболее важная часть CSS относится к div-у, содержащему изображения. Мы просто должны убедиться, что свойство overflow установлено в hidden.

Вот такой должен быть CSS:

/* CSS Reset */
    * {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
    }
        
    /* Setup Tabs */
    
    ul{
        background:#000;
        width:125px; /* Width of Tab Image */
        float: left;
        list-style: none;
        border-right:8px solid black;
    }
    
    ul li{
        height:75px; /* Height of Tab Image */
    }
    
    /* Setup Tab so normal opacity is 40 and rollover is 100 */
    ul li a img{
        /* for IE */
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
        filter:alpha(opacity=40);
      
        /* CSS3 standard */
        opacity:0.4;
      
    }
    
    /* Change Opacity to 100% on roll over */
    ul li a:hover img{
          
        /* for IE */
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter:alpha(opacity=100);
        
        /* CSS3 standard */
        opacity:1.0;
    }

    /* Places images to the right of the tabs,
    and hides non selected images */
    #images{
        width:500px; 
        height:300px; 
        overflow:hidden;  /* Hides the non selected images */
        float:left;
    }
    
    /* Places a black border around the entire viewer
    and centers it on the screen */
    #wrapper{
        width:633px;
        height:300px;
        border:8px solid black;
        margin:0px auto;
    }

Соединяем все вместе

Последнее, что нам осталось сделать, это соединить HTML и CSS вместе. Вы, конечно, можете изменить внешний вид слайд-шоу и количество табов. Самое важное, то, что вам нужно запомнить из этого руководства – идею использования якорных тэгов в качестве средства переключения изображений.

Вот так выглядит код, собранный вместе:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Image Viewer</title>

        <style type="text/css" media="screen">
        
        /* CSS Reset */
        * {
            margin: 0;
            padding: 0;
            border: 0;
            outline: 0;
        }
            
        /* Setup Tabs */
        
        ul{
            background:#000;
            width:125px; /* Width of Tab Image */
            float: left;
            list-style: none;
            border-right:8px solid black;
        }
        
        ul li{
            height:75px; /* Height of Tab Image */
        }
        
        /* Setup Tab so normal opacity is 40 and rollover is 100 */
        ul li a img{
            /* for IE */
            -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
            filter:alpha(opacity=40);
          
            /* CSS3 standard */
            opacity:0.4;
          
        }
        
        /* Change Opacity to 100% on roll over */
        ul li a:hover img{
              
            /* for IE */
            -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
            filter:alpha(opacity=100);
            
            /* CSS3 standard */
            opacity:1.0;
        }
    
        /* Places images to the right of the tabs,
        and hides non selected images */
        #images{
            width:500px; 
            height:300px; 
            overflow:hidden;  /* Hides the non selected images */
            float:left;
        }
        
        /* Places a black border around the entire viewer
        and centers it on the screen */
        #wrapper{
            width:633px;
            height:300px;
            border:8px solid black;
            margin:0px auto;
        }
            
        </style>

    </head>
    <body>

    <div id="wrapper">
        <!-- Tabs -->
        <ul>
            <li><a href="#image1" id="tab1"><img src="tab1.jpg" alt="" title="" /></a></li>
            <li><a href="#image2" id="tab2"><img src="tab2.jpg" alt="" title="" /></a></li>
            <li><a href="#image3" id="tab3"><img src="tab3.jpg" alt="" title="" /></a></li>
            <li><a href="#image4" id="tab4"><img src="tab4.jpg" alt="" title="" /></a></li>
        </ul>
        
        <!-- Images -->
        <div id="images">
            <div><a name="image1"></a><img src="image1.jpg" alt="" title="" /></div>
            <div><a name="image2"></a><img src="image2.jpg" alt="" title="" /></div>
            <div><a name="image3"></a><img src="image3.jpg" alt="" title="" /></div>
            <div><a name="image4"></a><img src="image4.jpg" alt="" title="" /></div>
        </div>
    </div>      
            
    </body>
    </html>

В результате у нас получилось простое и довольно симпатичное слайд-шоу. Конечно, немного не хватает плавности, как в слайдерах с использованием JavaScript, зато будет хорошо смотреться, даже в случае отключенных скриптов в браузере клиента. Недостаток тоже имеется, куда же без него, слайд-шоу не работает в опере. Причину сходу определить не удалось, если найду, то опубликую апдейт.

Архив с примером.

Перевод статьи «How to Build a CSS Image Viewer the Clever Way«