Главная » Файлы » Прочие скрипты » jQuery |
Качественный слайдер через плагин Countdown Image на jQuery
23.06.14, 11:30:45 | |
Очень интересный плагин на основе jQuery. Здесь есть красиво оформленная шкала обратного отсчёта до переключения на следующий слайд, красиво всплывающая подсказка и панель навигации Для начала посмотрите ДЕМО Установка: После /head на нужных страницах вставляйте: Код <style type="text/css"> #featured { width: 565px; height: 290px; background: #009cff url('/images/loading.gif') no-repeat center center; overflow: hidden; } </style> <link rel="stylesheet" href="/css/orbit.css"> <style type="text/css"> .timer { display: none !important; } div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; } </style> <script type="text/javascript" src="/js/jquery.orbit.min.js"></script> <script type="text/javascript"> $(window).load(function() { $('#featured').orbit({ 'bullets': true, 'timer' : true, 'animation' : 'horizontal-slide' }); }); </script> Следующий код в то место на странице, где будет размещаться сам слайдер: Код <div id="featured"> <img src="Ссылка на картинку" alt="Описание картинки" /> <img src="Ссылка на картинку" alt="Описание картинки" /> <img src="Ссылка на картинку" alt="Описание картинки" /> <img src="Ссылка на картинку" alt="Описание картинки" /> </div> Нам осталось лишь залить скрипт из прикреплённого архива в папку js, стиль в папку css и все картинки в папку images Материал подготовлен ECCO | |
Просмотров: 359 | Загрузок: 0 | |
Всего комментариев: 0 | |
| |