Меню сайта
АКЦИЯ!!!
Категории раздела
Меню [34]
Меню для сайтов на Ucoz
Кнопки [15]
Кнопки для uCoz
Блоки и формы [22]
Блоки и формы для uCoz.
Вид материалов [41]
Вид материалов для uCoz
Мини-Профили [7]
Мини-Профили для uCoz
Переключатели [29]
Переключатели страниц для uCoz
Информеры [35]
Информеры для uCoz
Плейеры для сайта [23]
Аудио, видео, радио плейеры
Слайдеры [21]
Слайдеры и карусели картинок.
Вид опросов [8]
Вид опросов для uCoz
Часы и календари [8]
Часы и календари для uCoz.
Статистика сайта [20]
Статистика сайта для uCoz
Скрипты [25]
Скрипты для uCoz
Виджеты [2]
Виджеты для uCoz
Мини-чаты [6]
Мини-чаты для uCoz
Ajax для uCoz [8]
Ajax для uCoz
Шаблоны сайтов [0]
Шаблоны и шапки для uCoz.
Анимация [3]
Анимация и анимашки для сайтов на Ucoz.
Игры [6]
Игры для uCoz.
Прочее для uCoz [18]
Прочее для uCoz.
Сервис

Translate my page
Выбрать язык / Select language:



   
веб студия Одесса создание интернет магазинов создание каталога товаров Создание сайтов раскрутка сайтов портфолио веб студии продвижение сайтов готовые дизайны сайтов наши заказчики Дизайн макеты для создания сайтов Flash игры для сайтов Мини-Чат для сайтов uCoz Вид опроса для сайта Часы и календари для сайтов дизайн сайтов-визиток онлайн радио для сайта кнопки для сайтов статистика для сайта юкоз мини-профили для сайта Полезное для сайтов переключатели страниц для сайтов ajax окна для сайтов скрипты для сайта информационные блоки для сайтов информеры для сайта Формы для Ucoz слайдер для сайта информеры для юкоз меню для сайта вид материалов для сайтов вид материалов uCoz Готовые сайты Новые Бизнес дизайн макеты Новые дизайн макеты Медицина дизайн макеты интернет магазинов Новые дизайн макеты Рестораны Новые дизайн макеты Музыка и клубы Новые дизайн макеты Отели дизайн макеты производство и услуги дизайн макеты интерьер дизайн макеты строительство дизайн макеты сельское хозяйство Новый дизайн макет Транспорт Новый дизайн макет Образование Новый дизайн макет Мода дизайн макеты компьютеры дизайн макеты мобилки Логотипы портфолио
Бесплатное отправление смс сообщений!
Поиск
Календарь
«  Сентябрь 2014  »
ПнВтСрЧтПтСбВс
1234567
891011121314
15161718192021
22232425262728
2930
Архив записей
Наш опрос
Есть ли у Вас сайт?
Всего ответов: 27
Друзья сайта

МЕТА - Украина. Рейтинг сайтов Рейтинг@Mail.ru
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Реклама

Главная » 2014 » Сентябрь » 12 » Карусель из картинок
20:16
Карусель из картинок


Картинки двигаются друг за другом, как настоящая карусель.
При наведении мышки на любую такую картинку, карусель останавливается.

На странице,где будет карусель,заменяем:

Код
<body>


На:
Код
<body onload="Carousel()">


Это код самой карусели:
Код
<script type="text/javascript">  
var Car_Image_Width=100;  
var Car_Image_Height=100;  
var Car_Border=true;  
var Car_Border_Color="#BCBFFF";  
var Car_Speed=10;  
var Car_Direction=true;  
var Car_NoOfSides=6;  
Car_Image_Sources=new Array(  
"http://ссылка на картинку","",  
"http://ссылка на картинку","",  
"http://ссылка на картинку","",  
"http://ссылка на картинку","",  
"http://ссылка на картинку",""  
  );  
CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);  
C_Coef=new Array(  
3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4, 0,  
Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);  
var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;  
C_Pre_Img=new Array(Car_Image_Sources.length);  
var C_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_TotalW,  
C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;  
функция карусель(){  
if(document.getElementById){  
for(i=0;i<Car_Image_Sources.length;i+=2){  
C_Pre_Img[i]=new Image();C_Pre_Img[i].src=Car_Image_Sources[i]}  
C_MaxW=Car_Image_Width/Math.sin(Math.PI/Car_NoOfSides)+C_HalfNo+1;  
Car_Div=document.getElementById("карусель");//osw  
for(i=0;i<C_HalfNo;i++){  
CW_I[i]=document.createElement("img");Car_Div.appendChild(CW_I[i]);  
CW_I[i].style.position="absolute";  
CW_I[i].style.top=0+"px";  
CW_I[i].Тип=Car_Image_Height+"px";  
если(Car_Border){  
CW_I[i].style.borderStyle="Солид";  
CW_I[i].style.borderWidth=1+"px";  
CW_I[i].style.borderColor=Car_Border_Color}  
CW_I[i].src=Car_Image_Sources[2*i];  
CW_I[i].lnk=Car_Image_Sources[2*i+1];  
CW_I[i].onclick=C_LdLnk;  
CW_I[i].onmouseover=C_Stp;  
CW_I[i].onmouseout=C_Rstrt}  
CarImages()}}  

функция CarImages(){  
if(!C_Stppd){  
C_TotalW=0;  
for(i=0;i<C_HalfNo;i++){  
C_ClcW[i]=Math.round(Math.cos(Math.abs(C_Coef[C_CoefOf+i]+C_Angle))*Car_Image_Width);  
C_TotalW+=C_ClcW[i]}  
C_LeftOffset=(C_MaxW-C_TotalW)/2;  
for(i=0;i<C_HalfNo;i++){  
CW_I[i].style.left=C_LeftOffset+"px";  
CW_I[i].style.width=C_ClcW[i]+"px";  
C_LeftOffset+=C_ClcW[i]}  
C_Angle+=Car_Speed/720*Math.PI*(Car_Direction?-1:1);  
if((Car_Direction&&C_Angle<=0)||(!Car_Direction&&C_Angle>=Math.PI/C_HalfNo)){  
если(C_CrImg==Car_Image_Sources.length)C_CrImg=0;  
если(Car_Direction){  
CW_I[C_HalfNo]=CW_I[0];  
for(i=0;i<C_HalfNo;i++)CW_I[i]=CW_I[i+1];  
CW_I[C_HalfNo-1].src=Car_Image_Sources[C_CrImg];  
CW_I[C_HalfNo-1].lnk=Car_Image_Sources[C_CrImg+1]}  
else{ for(i=C_HalfNo;i>0;i--)CW_I[i]=CW_I[i-1];  
CW_I[0]=CW_I[C_HalfNo];//fantasyflash.ru  
CW_I[0].src=Car_Image_Sources[C_CrImg];  
CW_I[0].lnk=Car_Image_Sources[C_CrImg+1]}  
C_Angle=Car_Direction?Math.PI/C_HalfNo:0;C_CrImg+=2}}  
setTimeout("CarImages()",50)}  
функция C_LdLnk(){if(this.lnk)window.location.href=this.lnk}  
функция C_Stp(){this.style.cursor=this.lnk?"указатель":"default";C_Stppd=true;}  
функция C_Rstrt(){C_Stppd=false}  
</script><div id="Carousel" style="position:relative; Ширина:130; высота:21">


В коде http://ссылка на картинку меняем на свои ссылки на картинки.
var Car_Speed=10; - это скорость вращения карусели,можете изменить на свое.
Категория: Слайдеры | Просмотров: 445 | Добавил: master | Теги: слайдер для сайта | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Copyright "IPC" © 2008
Хостинг от uCoz