Очень интересный плагин на основе jQuery. Здесь есть красиво оформленная шкала обратного отсчёта до переключения на следующий слайд, красиво всплывающая подсказка и панель навигации
Для начала посмотрите
ДЕМО
Установка:
1#: В самый низ вашего CSS вставляйте:
|
|
#featured { width: 565px; height: 290px; background: #009cff url('/images/loading.gif') no-repeat center center; overflow: hidden;} .timer { display: none !important; } div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; } |
2#: После /head на нужных страницах вставляйте:
|
|
<link rel="stylesheet" href="/css/orbit.css"> <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> |
3#: Следующий код в то место на странице, где будет размещаться сам слайдер:
|
|
<div id="featured"> <img src="Ссылка на картинку" alt="Описание картинки" /> <img src="Ссылка на картинку" alt="Описание картинки" /> <img src="Ссылка на картинку" alt="Описание картинки" /> <img src="Ссылка на картинку" alt="Описание картинки" /> </div> |
Нам осталось лишь залить JS файл из прикреплённого архива в папку
js, CSS файл в папку
css и все картинки в папку images
Автор публикации
12
Я не понял вашего вопроса, но постараюсь на него ответить...
