background
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Скроллер картинок для сайта

Скроллер картинок
Просмотров: 1398  Скачан: 176 раз  Комментариев в теме: 0

Красивый скроллер для вашего сайта на jQuery, с возможностью прокручиваться как в левую сторону, так и в правую, при наведении курсора на картинку, прокручивание скроллера останавливается.

Шаг 1 - создание разметки

 

HTML

<div id="outerContainer">
    <div id="imageScroller">
        <div id="viewer" class="js-disabled">
            <a class="wrapper" href="#" title="Apple"><img class="logo" id="apple" src="images/logos/apple.jpg" alt="Apple"></a>
            <a class="wrapper" href="#" title="Firefox"><img class="logo" id="firefox" src="images/logos/firefox.jpg" alt="Firefox"></a>
            <a class="wrapper" href="#" title="jQuery"><img class="logo" id="jquery" src="images/logos/jquery.jpg" alt="jQuery"></a>
            <a class="wrapper" href="#" title="Twitter"><img class="logo" id="twitter" src="images/logos/twitter.jpg" alt="Twitter"></a>
            <a class="wrapper" href="#" title="jQuery UI"><img class="logo" id="jqueryui" src="images/logos/jqueryui.jpg" alt="jQuery UI"></a>
        </div>
    </div>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/scroller.js"></script>
Материалы по теме:

Полноэкранное слайд-шоу с помощью JQuery плагинаПолноэкранное слайд-шоу с помощью J...

Jquery плагин «SuperSized», плагин можно использовать в ранних направлениях, одно с таких, это полно-экранное слайд-шоу....

Текстовый слайдерТекстовый слайдер

Простой текстовый слайдер с прокруткой влево, вправо, не плохо подойдёт для вывода кратких новостей. Имеется три вида слайдера...

Слайдер на jQuery для сайтаСлайдер на jQuery для сайта "Estro ...

Красивый слайдер на jQuery для прокрутки изображения (картинки) на вашем сайте....

Слайдер в стиле AppleСлайдер в стиле Apple

Стильный слайдер в стиле Apple на css и jquery, в слайдере используется красивый эффект перехода между категориями....

Слайдер на jQuery «Featured Content Slider»Слайдер на jQuery «Featured Content...

Лёгкий слайдер с авто-листанием на jquery, в слайдере вы множите полноценно использовать текст, изображения....

Прокручивающиеся картинкиПрокручивающиеся картинки

Если вы ищите способ как плавно прокрутить картинку, или что-то в этом роде, воспользуйтесь представленным способом....

Слайдер (слайд-шоу) на css и jqueryСлайдер (слайд-шоу) на css и jquery

Довольно простой слайдер с предусмотренным слайд-шоу, если вам нужно, что-то простое, без каких либо наворотов (дополнительных панелей, кнопок и т.д)...
Интересные публикации:

LibertyLiberty

Универсальный html шаблон Liberty, созданный с уклоном на интерьер, на главной странице располагается адаптированы слайдер с комментариями к изображен...

Горизонтальное выпадающее меню с помощью jqueryГоризонтальное выпадающее меню с помощью...

Горизонтальное меню в темном стиле с выпадающими пунктами....

Форма регистрации html с валидациейФорма регистрации html с валидацией

Форма регистрации на сайте это неотъемлемая его часть, но ведь не менее важен и дизайна формы, в данном примере......

SonjaSonja

Шаблон Sonja построенный на HTML5, в шаблоне красиво реализована главная страница, имеется оригинальная галерея, стрелка вверх, видео проигрыватель......

Мега cборка социальных кнопок на css +300Мега cборка социальных кнопок на css +30...

Сборка +300 социальных кнопок , это 300 разных социальных кнопок созданных на css, которые без сомнения украсят любой сайт....

Скрипт комментариев на PHPСкрипт комментариев на PHP

Скрипт комментариев написанный на php и работает в связке с MYSQL....

Галерея в сетку с помощью jQueryГалерея в сетку с помощью jQuery

Картинки расположены в ряд по сетке с наложенным на них затемнением, при наведении курсора на картинку, затемнение......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.0/5( Голосов 6 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить