jQuery 3D карусель изображений на основе системного jQuery
fon
Загружается . . . Ждите . . .
It is loaded . . . Wait . . .
Wird beladen . . . Warten Sie . . .
Es cargado . . . Esperen . . .
Est chargé . . . Attendez . . .
QR код

jQuery 3D карусель изображений на основе системногоь jQuery с выводом изображения в полный размер из первью карусели по клику .

Главная страница сайта .
HTML примерa .
<script type="text/javascript" charset="utf-8" src="http://runettex.clan.su/JSC/Tween.js"></script>
<script type="text/javascript" charset="utf-8" src="http://runettex.clan.su/JSC/jquery.carousel3d_m.js"></script>
<div id="carousel" style="position: relative; top: 0px; left: 0px;"></div>
<div id="holEsQ" style="display: none;">
<img title="" src="http://runettex.clan.su/FPC/FPAptic.jpg" alt="1">
<img title="" src="http://runettex.clan.su/FPC/FPBptic.jpg" alt="2">
<img title="" src="http://runettex.clan.su/FPC/FPCptic.jpg" alt="3">
<img title="" src="http://runettex.clan.su/FPD/WDM.jpg" alt="3">
<img title="" src="http://runettex.clan.su/FPC/FPAptic.jpg" alt="4">
<img title="" src="http://runettex.clan.su/FPC/FPBptic.jpg" alt="5">
<img title="" src="http://runettex.clan.su/FPC/FPCptic.jpg" alt="6">
<img title="" src="http://runettex.clan.su/FPD/WDM.jpg" alt="3">
<img title="" src="http://runettex.clan.su/FPC/FPAptic.jpg" alt="7">
<img title="" src="http://runettex.clan.su/FPC/FPBptic.jpg" alt="8">
<img title="" src="http://runettex.clan.su/FPC/FPCptic.jpg" alt="1">
<img title="" src="http://runettex.clan.su/FPD/WDM.jpg" alt="3">
</div>
<script type="text/javascript" charset="utf-8">
jQuery(function($) {$("#carousel").html($("#holEsQ").html()).carousel3d({ centerX: $('#carousel').offset().left + $('#carousel').width()/2 });});
</script>
Значения настройки параметров карусели изображений в скрипте jquery.carousel3d_m.js , находится в самом конце скрипта .
speed: 1, - значение скорости вращения карусели
radiusX: 450, - радиус по оси Х ( по горизонтали )
radiusY: 60, - радиус по оси Y ( по вертикали )
centerX: 0, - координаты позиции центра вращения по горизонтали
centerY: 100, - координаты позиции центра вращения по вертикали
perspective: 600, - значение угла перспективы карусели
Значения настройки отображаемых в карусеоли размеров изображений в скрипте jquery.carousel3d_m.js , находится в строке № 20 .
var w_h = resize( im.orig_w, 200, im.orig_h, 250).split('|'); - 200 - значение ширины , 250 - высоты отображения изображений в карусели
В данном примере количество изображений в HTML некритично и может быть любым . Так же могут быть изменены исходный размер изображений в стилях изображений . Настраивается скорость вращения карусели . Клик по изображению выведет его в полном размере . одновременно скрывая карусель . Для работы карусели требуется установка - jquery-1.3.2.min.js с одновременной блокировкой системного jQuery условными операторами для страницы установки карусели ....
скачать архив Javascript
Реальный пример .
1 2 3 3 4 5 6 3 7 8 1 3

Non-Commercial Use: Free Runettex_team_ESQ © 2009 - 2024 Хостинг от uCoz