Блог |
WEB
Слайдер Countdown Image на jQuery
19.01.2012 в 14:12:26 |
|
Просмотров: 1598 |
0 ответов
Смотреть ДЕМО
Очень интересный плагин на основе jQuery. Здесь есть красиво оформленная шкала обратного отсчёта до переключения на следующий слайд, красиво всплывающая подсказка и панель навигации.
Установка:
После /head на нужных страницах вставляйте:
Code
<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>
#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>
Следующий код в то место на странице, где будет размещаться сам слайдер:
Code
<div id="featured">
<img src="Ссылка на картинку" alt="Описание картинки" />
<img src="Ссылка на картинку" alt="Описание картинки" />
<img src="Ссылка на картинку" alt="Описание картинки" />
<img src="Ссылка на картинку" alt="Описание картинки" />
</div>
<img src="Ссылка на картинку" alt="Описание картинки" />
<img src="Ссылка на картинку" alt="Описание картинки" />
<img src="Ссылка на картинку" alt="Описание картинки" />
<img src="Ссылка на картинку" alt="Описание картинки" />
</div>
обсудить на форуме |
1598 визитов ↳ 0 ответов | Ваше мнение о материале | Голосовало: |
