Слайдер изображений на CSS с переключателем
 | |
| Отличное дополнение как элемент к дизайну, но только функционален, это слайдер изображение, что создан на стилях CSS и JS по разную тему. Сейчас трудно можно представить такие тематические площадки, как игровые или интернет магазин, где бы не присутствовал этот код слайдера. Так как он выводит ваш материал, который вы сами посчитали, какой должен быть. И это все вывести на первую страницу. Здесь по функциональности он просто, но главное корректно все работает. Есть по обеим сторонам переключатели, также продублированные в нижнем левом углу. По умолчанию он на перемотке с отведенным отрывком времени, что задан в ручную, где он автоматически будет сам проматывать снимки. Хорошо по своей стилистике подойдет на светлый и также темный формат. Где сам веб мастер еще выбирает, какой он будет по диаметру, это высота и ширина, что можно подогнать под любой каркас, но основном его можно увидеть под шапкой или вверх сайта. Хорошим решением у него сделаны знаки, так как можно написать и они по вверх картинке в светло темной форме по вверх написаны. Приступаем к установке: 1. Нужно скачать архив с сайта и залит в папку в папку 'images' на файловом менеджере. 2. Копируем код и ставим там где хотите видеть. Код <link rel="stylesheet" href="/images/nivo-slider.css" type="text/css" media="screen" /> <script type="text/javascript" src="/images/jquery-1.4.3.min.js"></script> <script type="text/javascript" src="/images/jquery.nivo.slider.js"></script> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script> <div id="wrapper"> <div id="slider-wrapper"> <div id="slider" class="nivoSlider"> <img src="/images/banner1.jpg" alt="" /> <img src="/images/banner2.jpg" alt="" /> <img src="/images/banner3.jpg" alt="" /> <img src="/images/banner4.jpg" alt="" /> </div> </div> </div> В таблицу стилей CSS: Код #slider { position:relative; width:640px; height:200px; margin-top:6px; margin-left:5px; margin-bottom:10px; background:url('/images/load_blue2.gif') no-repeat 50% 50%; } #slider img { position:absolute; top:0px; left:0px; display:none; } #slider a { border:0; display:block; } .nivo-controlNav { position:absolute; left:20px; bottom:10px; } .nivo-controlNav a { display:block; width:22px; height:22px; background:url('/images/bullets.png') no-repeat; text-indent:-9999px; border:0; margin-right:3px; float:left; } .nivo-controlNav a.active { background-position:0 -22px; } .nivo-directionNav a { display:block; width:30px; height:30px; background:url('/images/arrows.png') no-repeat; text-indent:-9999px; border:0; } a.nivo-nextNav { background-position:-30px 0; right:15px; } a.nivo-prevNav { left:15px; } .nivo-caption { text-shadow:none; font-family: Helvetica, Arial, sans-serif; } .nivo-caption a { color:#efe9d1; text-decoration:underline; } Но и под каждым запросом идет ссылка на тот материал, что представлен, где по клику происходит переход на основу материала. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 6 | |
|
| |
