Картинки двигаются друг за другом, как настоящая карусель. При наведении мышки на любую такую картинку, карусель останавливается.
На странице,где будет карусель,заменяем:
Код
<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; - это скорость вращения карусели,можете изменить на свое.
Скрипт замечательной карусели изображений, отлично подойдёт для любого сайта: Установка: 1. Открываем: Панель управления ---> Управление дизайном ---> Таблица стилей (CSS), вставляем код в самый вверх:
Вместо надписей Адрес картинки 1, 2, 3, 4 прописываем адреса своих изображений. Количество изображений можно увеличивать, для этого перед </ul> прописать код?
Код
<li> <a href="##up"><img src="Адрес новой картинки" alt=""></a> </li>
Размеры всех картинок должны быть одинаковые. Красным выделены ширина и высота блока слайдера, замените их на ширину и высоту ваших картинок. Синим выделены параметры блока с цифрами-переключателями.
2. Эту часть кода вставляем в место, где должен быть наш слайдер:
Слайдер Slideshow v5 для uCoz. Всем доброе время суток! И так сегодня я хочу предоставить к вашему вниманию - Slideshow v5 Очень хороший и качетсвенный слайдер для вашего сайта в системе ucoz.
Для начала скачиваем архив
После того как вы скачали архив "Распаковываем его" и все что там есть загружаем в свой "Файловый менеджер"
И так, теперь давайте приступим к самой установке кода.
Установка!
Заходим куда вам нужно установить Slideshow v5 и ставим между тегами
Слайдер с эффектом перелистывания страниц, работает на jQuery с применением плагина Flux и эффектом Turn.Всё настроено для работы на сайте uCoz, он будет показывать только на динамических страницах, для работы в материале (как здесь) слайдер нужно поместь в фрейм.В местах регулировок сделаны комментарии выделенные зелёным цветом, можно включить или отключить автовоспроизведение и добавить кнопки управления сменой изображений.Имейте в виду, картинки или фотографии должны быть одного размера, сделать слайдер с автомасштабированием не получится.
Код
<script src="http://delaisait.ucoz.ru/script/js/1/2013/flux.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function(){
if(!flux.browser.supportsTransitions)
alert("Flux Slider requires a browser that supports CSS3 transitions");
window.f = new flux.slider('#dssliderturn', {
pagination: false,
controls: false, // Кнопки управления, можно (true)
transitions: ['turn'],
autoplay: true // Автозапуск, можно (false)
});
});
</script>
<div id="dssliderturn">
<img src="http://delaisait.ucoz.ru/script/img/1/2013/img1.jpg" alt="" />
<img src="http://delaisait.ucoz.ru/script/img/1/2013/img2.jpg" alt="" />
<img src="http://delaisait.ucoz.ru/script/img/1/2013/img3.jpg" alt="" />
</div>
Галерея чередует установленные изображения в виде картинок или фотографий предавая им эффект плавной смены.Настройки предельно просты,компановка так же не обременена километровыми значениями.Добавлены эффекты теней и округления краёв галереи, если Вам не нужны подобные эффекты можете их удалить.В местах настроек сделаны выделенные комментарии, это позволит без определённого навыка настроить галерею как нужно.
Слайдер хоть и маленький но может прокручивать любое количество изображений.У слайдера нет кнопок управления,он работает автоматически.Работать он будет только на динамических страницах (типа главной),в материалах модулей он будет работать не на всех сайтах.На меняющиеся в нём картинки можно прикрепить ссылки и использовать в качестве своеобразного меню.Картинки желательно применять с размерами 320Х240,для изменения разрешения изображений можете воспользоваться специальной программой предназначеной для уменьшения размеров.Программа не сложная,на сайте есть виде по работе с ней. Кстати можно изменить и фоновую картинку слайдера и его размеры на нужные,в нижней части есть редактор для экспериментов с кодами примеров - не забудьте воспользоваться.Если что то не понятно или существуют какие либо предложения,используйте формы комментариев.
Слайдер для воспроизведения изображений работающий с применением jQuery и Mobilyslider. Будет работать на страницах модулей и динамических страницах сайта uCoz,в материале (как здесь) можно подключить только через фрейм. Слайдер можно настроить на три типа воспроизведения,дополнительно можно организовать или отменить автозапуск,а также показ элементов управления и остановку показа во время наведения курсора на рабочую часть.
Пример скрипта с авто масштабированием изображений
Внимание!!! По запросам пользователей материал был расширен, изображениям в слайдере можно придать "резиновые" свойства, т.е картинки и фотографии будут сами подстраиваться под установленные размеры самого слайдера.Вы можете применять разнокалиберные размеры изображений, не забывайте, масштабирование может исказить реальный вид при несопоставимых пропорциях ширины и высоты.В примере ниже слайдеру с изображениями из первого примера скрипта установлен размер 200Х200, напоминаю, для проверки кода скрипта в редакторе понадобится добавить к нему библиотеку jQuery.