Слайдшоу с анимацией: плагин CrossSlide для jQuery
CrossSlide - jQuery плагин для демонстрации слайдшоу с эффектами анимации, которые доступны только в Adobe Flash. Посмотреть, как это работает, можно здесь. Как обычно, подключаем библиотеку jQuery и плагин в разделе head HTML-документа:
<script src='js/jquery.js' type='text/javascript'></script>
<script src='js/jquery.cross-slide.js' type='text/javascript'></script>
<script src='js/jquery.cross-slide.js' type='text/javascript'></script>
Размещаем на странице div-элемент, который будет служить контейнером для элементов, участвующих в слайд-шоу:
<div id='test1'>Loading...</div>
CSS:
#test1 {
margin: 1em auto;
border: 2px solid #555;
width: 550px;
height: 200px;
}
margin: 1em auto;
border: 2px solid #555;
width: 550px;
height: 200px;
}
JavaScript:
$(function() {
$('#test1').crossSlide({
speed: 45, //in px/sec
fade: 1 //in sec
}, [
{ src: 'images/sand-castle.jpeg', dir: 'up' },
{ src: 'images/sunflower.jpeg', dir: 'down' },
{ src: 'images/flip-flops.jpeg', dir: 'up' },
{ src: 'images/rubber-ring.jpeg', dir: 'down' }
]);
});
$('#test1').crossSlide({
speed: 45, //in px/sec
fade: 1 //in sec
}, [
{ src: 'images/sand-castle.jpeg', dir: 'up' },
{ src: 'images/sunflower.jpeg', dir: 'down' },
{ src: 'images/flip-flops.jpeg', dir: 'up' },
{ src: 'images/rubber-ring.jpeg', dir: 'down' }
]);
});
Здесь
- speed - скорость движения картинки, пикселей в секунду
- fade - продолжительность эффекта перехода при смене картинок
- src - адрес файла с картинкой
- dir - направление движения картинки (’up’, ‘down’, ‘left’ или ‘right’)
Кроме перечисленных, плагин поддерживает множество других опций.
Денис:
Интересный плагин.
Вот только вопрос: при изменении параметра fade демонстрации слайд-шоу нет. В чем может быть проблема?
При 1 проблем нет
8 Ноябрь 2010, 14:42