Там же возможно посмотреть демо, примеры, и выбрать для себя наиболее понравившееся.
Рабочий пример реализации может выглядеть следующим образом; качаем архив и распаковываем его в корень вашего сайта.
На страничку вставляем такой примерно код и редактируем как душе угодно... это все. Enjoy!
<link rel="stylesheet" href="/_ImageFlow/imageflow.css" type="text/css" />
<style>
#xStep{
background-image: url(http://path_k_vashej_kartinke.jpg);
background-repeat: no-repeat;
background-position: 50% top;
}
#xStep{
height: 670px !important;
}
#xStep_images {
height: 585px !important;
top: 96px;
position: relative;
}
#xStep_navigation {
}
</style>
<script src="/_ImageFlow/imageflow.js" type="text/javascript"></script>
<div id="xStep" class="imageflow">
<img src="/path_k_vashej_kartinke.jpg" longdesc="Some desc1" width="400" height="300" alt="Image 1" />
<img src="/path_k_vashej_kartinke.jpg" longdesc="Some desc2" width="300" height="400" alt="Image 2" />
<img src="/path_k_vashej_kartinke.jpg" longdesc="Some desc3" width="400" height="400" alt="Image 3" />
<img src="/path_k_vashej_kartinke.jpg" longdesc="Some desc4" width="300" height="400" alt="Image 4" />
<img src="/path_k_vashej_kartinke.jpg" longdesc="http://finnrudolph.de/content/imageflow/example_1.png" width="400" height="300" alt="Image 5" />
</div>
<script language="javascript" type="text/javascript">
domReady(function()
{
var iflow = new ImageFlow();
iflow.init({ ImageFlowID: 'xStep', xStep: 300, reflections: false, slideshow: true, slideshowAutoplay: true, opacity: true, circular: true, glideToStartID: false, opacityArray: [9,4,3,1,1] });
});
</script>
Небольшое пояснение; первая сссылка указывает, как видите, на распакованный каталог _ImageFlow в корне сайта. Background-image прописываете какой вам захочется, img src - разумеется, произвольные изображения, которые будут двигаться на фоне основного, там же проставляем и размеры. SlideshowAutoplay: true можете сменить на false, если не хотите, чтобы карусель крутилась сама. Ну и все, остальное - дело вкуса и самостоятельно.
Ну и - соответственно, небольшая же, на скорую руку демка. Покрутите колесико мышки, поводите курсор вдоль горизонтальной линии либо просто кликните одно из "не в фокусе" изображений.
Примечание. Данный код оптимизирован под задачи конкретного web-проекта и опубликован "как есть", вы можете использовать его либо оригинальный код, взятый с сайта девелопера; как вам удобнее.
