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>
Размещаем на странице div-элемент, который будет служить контейнером для элементов, участвующих в слайд-шоу:
<div id='test1'>Loading…</div>
CSS:
#test1 {
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' }
]);
});
Здесь
speed — скорость движения картинки, пикселей в секунду
fade — продолжительность эффекта перехода при смене картинок
src — адрес файла с картинкой
dir — направление движения картинки (’up’, ‘down’, ‘left’ или ‘right’)
Кроме перечисленных, плагин поддерживает множество других опций.
