« 1 2 3 4 5 6 ... 33 34 »
Набор разноцветных меню для сайтов
Скопируйте содержимое поля CSS в таблицу стилей Вашего сайта,если у Вас сайт в системе uCoz,измените значение margin-top,свойство находится в верхней части кода CSS на 30px,для места под админ панель.Установите пути для пунктов меню и установите код там где хотите видеть меню.Если у Вас возникли вопросы по настройке кода меню - опишите их в комментариях к материалу.
Javascript (для всех цветов меню):
Код
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script><script type="text/javascript">var search_input= $('домен .search input[type=text]');var search_input_size = 120; var search_large_size = 180; var Ratio = 3; var термоусаживаемые = "";$(document).ready(function(){search_input.click(function(){сжать();}).focus(function(){сжать();});search_input.blur(function(){ if(термоусаживаемые=="YES")normal();});$('.button').hover(function(){if(термоусаживаемые=="YES")normal();}); });функция shrink(){if(search_input_size < search_large_size ){$('.button').each(function(){$(this).animate({'padding-left': обивка+'px','padding-right': обивка+'px'},'fast');});search_input.animate({'width': search_large_size+'px'},'fast'); термоусаживаемые="YES";}return false;}function нормальный(){search_input.animate({'width':search_input_size+'px'},'fast'); $('.button').animate({'padding-left':'10px','padding-right':'10px'},'fast');термоусаживаемые="";search_input.blur();return false;}</script>
Для КРАСНОГО меню вставляем в любое место HTML-страницы:
Код
<ul id="menu_wrap" class="Red"><li class="button"><a href="#">Главная</a></li><li class="button"><a href="#">CSS3</a></li><li class="button"><a href="#">HTML5</a></li><li class="button"><a href="#">Скрипты</a></li><li class="button"><a href="#">Фоны для сайта</a></li><li class="button"><a href="#">Ресурсы</a></li><li class="button"><a href="#">Форум</a></li> <li class="search"><a href="#"></a><input type="text" placeHolder="поиск" /></li></ul>
Для КРАСНОГО меню вставляем в CSS
Код
body{background: #ededed;margin:0;padding:0;}#menu_wrap{position:relative;margin-top:20px;margin-left:auto;margin-right:auto;padding:0; padding-right:10px;width:799.888888835907px;высота:40px;list-style-type:none;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.2);-moz-box-shadow:0 1px 3px rgba(0,0,0,.2);box-shadow:0 1px 3px rgba(0,0,0,.2)}.button a{cursor:pointer;text-align:center;font:13px/100% Arial, Helvetica, sans-serif;font-weight:bold;position:relative;min-width:50px;height:20px;float:left;padding:10px;padding-top:10px;padding-bottom:10px;text-decoration:none;text-shadow:0 1px 1px rgba(0,0,0,.3)}.button:first-child a{-webkit-border-top-left-radius:10px;-webkit-border-bottom-left-radius:10px;-moz-border-topleft-radius:10px;-moz-border-bottomleft-radius:10px;border-top-left-radius:10;border-bottom-left-radius:10px}.Red,.Red .button a{color:#faddde;background: #ed1c24;border-right:solid 1px #aa1317;background: -moz-linear-gradient(top, #ed1c24 0%, #aa1317 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ed1c24), color-stop(100%,#aa1317));background: -webkit-linear-gradient(top, #ed1c24 0%,#aa1317 100%);background: -o-linear-gradient(top, #ed1c24 0%,#aa1317 100%);background: -ms-linear-gradient(top, #ed1c24 0%,#aa1317 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed1c24', endColorstr='#aa1317',GradientType=0 );background: linear-gradient(top, #ed1c24 0%,#aa1317 100%);}.Red .button a:hover,.Red .button a:focus{background: #c9151b;background: -moz-linear-gradient(top, #c9151b 0%, #a11115 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c9151b), color-stop(100%,#a11115));background: -webkit-linear-gradient(top, #c9151b 0%,#a11115 100%);background: -o-linear-gradient(top, #c9151b 0%,#a11115 100%);background: -ms-linear-gradient(top, #c9151b 0%,#a11115 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9151b', endColorstr='#a11115',GradientType=0 );background: linear-gradient(top, #c9151b 0%,#a11115 100%);}.Red .button a:active{color:#de898c;background: #aa1317;background: -moz-linear-gradient(top, #aa1317 0%, #ed1c24 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aa1317), color-stop(100%,#ed1c24));background: -webkit-linear-gradient(top, #aa1317 0%,#ed1c24 100%);background: -o-linear-gradient(top, #aa1317 0%,#ed1c24 100%);background: -ms-linear-gradient(top, #aa1317 0%,#ed1c24 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aa1317', endColorstr='#ed1c24',GradientType=0 );background: linear-gradient(top, #aa1317 0%,#ed1c24 100%);}домен .search{position:relative;float:right;margin-top:10px;}домен .search input[type=text]{width:120px;height:20px;padding-left:18px;margin-left:10px;padding-right:4px;outline:none;border: none;-webkit-border-radius: 20px; -moz-border-radius: 20px;border-radius: 20px;-moz-box-shadow: 1px inset 1px 3px #7a7a7a;box-shadow: inset 1px 1px 3px #7a7a7a;}домен .search:before {width:6px;height:6px;border:2px solid #000;background:transparent;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;}домен .search a:after {left:24;width:2px;height:7px;margin-top:0;-webkit-transform:rotate(-45 градусов);-moz-transform:rotate(-45 градусов);-o-transform:rotate(-45 градусов);transform:rotate(-45 градусов);}li:before, li a:after {content:"";position:absolute;top:50%;left:15px;}li:before, li a:after {margin:-7px 0 0;фон: #000;}
Категория: Меню |
Просмотров: 586 |
Добавил: master |
Дата: 13.09.2014
|
|
Аудиоплеер голубого цвета с плейлистом Голубой аудиоплеер имеет размеры 400Х420 и оснащён плейлистом в который может быть вписано любое количество аудио композиций или радиопотоков, а так же ссылкой на скачивание аудио файла. При воспроизведении происходит автоматическое переключение на следующую композицию. Для установки скопируйте весь код из примера, создайте текстовый документ для плейлиста или скачайте готовый, впишите название и ссылки аудиокомпозицый. Составив список воспроизведения закачайте готовый файл файл плейлиста на ФТП сервер своего сайта и укажите путь к нему в коде плеера , а весь код плеера установите там где хотите его видеть. Установка кода аудиоплеера производится в любом месте поддерживающем HTML редактирование. Аудиоплеер голубого цвета может использоваться без плейлиста, для проигрывания одной композиции. Размеры аудиоплеера без плейлиста 400Х90 и он так же оснащён кнопкой для скачивания, можно использовать аудиоплеер для воспроизведения отдельной музыки, всё зависит от целесообразности использования. HTML код для установки аудиоплеера с плейлистом Измените ссылку на Ваш плейлист и установите HTML код там где будет находиться аудиоплеер с плейлистом. Код <script language="JavaScript" src="//delaisait.ucoz.ru/script/audio/end-playlist/swfobject.js"></script> <div id="blueaudioplayer"></div> <script> var flashvars = {"uid":"blueaudioplayer","m":"audio","st":"http://delaisait.ucoz.ru/script/audio/end-playlist/style/s-dw-400X420.txt","pl":"http://delaisait.ucoz.ru/script/audio/end-playlist/pl/playlist-demo.txt"}; var params = {id:"blueaudioplayer",allowFullScreen:"true",allowScriptAccess:"always",wmode:"transparent"}; new swfobject.embedSWF("http://delaisait.ucoz.ru/script/audio/end-playlist/uppod.swf", "blueaudioplayer", "400", "420", "10.0.0", "expressInstall.swf", flashvars, params); </script> Добавьте адрес к композиции, количество аудио ссылок в плейлисте может быть безграничным, так же можно использовать радиопотоки, адреса радиопотоков указываются в плейлисте аналогично обычным ссылкам. При формировании плейлиста нельзя создавать пробелы и переносы в строках. Ячейка одной композиции выглядит так: {"comment":"НАЗВАНИЕ","file":"ССЫЛКА НА МУЗЫКУ"} Обратите внимание, между ячейками стоит запятая, её нет только после последней. Код {"playlist":[{"comment":"ВПИШИТЕ НАЗВАНИЕ ЗДЕСЬ","file":"ВПИШИТЕ ССЫЛКУ НА МУЗЫКУ ЗДЕСЬ"},{"comment":"ВПИШИТЕ НАЗВАНИЕ ЗДЕСЬ","file":"ВПИШИТЕ ССЫЛКУ НА МУЗЫКУ ЗДЕСЬ"},{"comment":"ВПИШИТЕ НАЗВАНИЕ ЗДЕСЬ","file":"ВПИШИТЕ ССЫЛКУ НА МУЗЫКУ ЗДЕСЬ"}]} Аудиоплеер с размерами 400Х90 будет играть одну мелодию или радиопоток, для добавления измените ссылку выделенную краным цветом на свою. Аудиоплеер с индивидуальной ссылкой будет отображать название выделенное в коде зелёным цветом. Код <script language="JavaScript" src="//delaisait.ucoz.ru/script/audio/end-playlist/swfobject.js"></script> <div id="blueaudioplayer"></div> <script> var flashvars = {"uid":"blueaudioplayer","m":"audio","st":"http://delaisait.ucoz.ru/script/audio/end-playlist/style/s-dw-400X420.txt",comment:"Ramshtain","file":"http://delaisait.ucoz.ru/Ramshtain.mp3"}; var params = {id:"blueaudioplayer",allowFullScreen:"true",allowScriptAccess:"always",wmode:"transparent"}; new swfobject.embedSWF("http://delaisait.ucoz.ru/script/audio/end-playlist/uppod.swf", "blueaudioplayer", "400", "90", "10.0.0", "expressInstall.swf", flashvars, params); </script> Аудиоплеер без плейлиста в подключенном состоянии 
|
Аудиоплеер серого цвета с плейлистом Аудиоплеер имеет размеры 305Х235 и оснащён плейлистом который может содержать любое количество музыкальных композиций или радиопотоков. Воспроизведение музыки автоматически не переключается на следующую, каждую мелодию нужно включать индивидуально. Для установки понадобится скопировать весь код из примера, создать текстовый документ для плейлиста или скачать готовый и составить список воспроизводимых композиций. После составления списка воспроизведения закачайте готовый файл файл плейлиста на сервер своего сайта и укажите путь к нему в коде плеера и поместите весь код плеера там где хотите его видеть. Установка кода аудиоплеера производится в любом месте поддерживающем HTML редактирование. Аудиоплеер может работать без плейлиста, воспроизводя одну композицию. Код для установки аудиоплеера с плейлистом Вам потребуется заменить ссылку на Ваш плейлист и установить код там где будет находиться аудиоплеер с плейлистом. Код <script language="JavaScript" src="//delaisait.ucoz.ru/script/audio/end-playlist/swfobject.js"></script> <div id="audioplayer"></div> <script> var flashvars = {"uid":"audioplayer","m":"audio","st":"http://delaisait.ucoz.ru/script/audio/end-playlist/style/whiteaudio-pl-305X36.txt","pl":"http://delaisait.ucoz.ru/script/audio/end-playlist/pl/playlist-demo.txt"}; var params = {id:"audioplayer",allowFullScreen:"true",allowScriptAccess:"always",wmode:"transparent"}; new swfobject.embedSWF("http://delaisait.ucoz.ru/script/audio/end-playlist/uppod.swf", "audioplayer", "305", "235", "10.0.0", "expressInstall.swf", flashvars, params); </script> Впишите название композиции и ссылку на неё, количество песен в плейлисте может быть любым, можно использовать радиопотоки, они вписываются аналогично музыкальным ссылкам. При формировании плейлиста нельзя создавать пробелы и переносы в строках. Ячейка одной композиции выглядит так: {"comment":"НАЗВАНИЕ","file":"ССЫЛКА НА МУЗЫКУ"} Обратите внимание, между ячейками стоит запятая, её нет только после последней. Код {"playlist":[{"comment":"ВПИШИТЕ НАЗВАНИЕ ЗДЕСЬ","file":"ВПИШИТЕ ССЫЛКУ НА МУЗЫКУ ЗДЕСЬ"},{"comment":"ВПИШИТЕ НАЗВАНИЕ ЗДЕСЬ","file":"ВПИШИТЕ ССЫЛКУ НА МУЗЫКУ ЗДЕСЬ"},{"comment":"ВПИШИТЕ НАЗВАНИЕ ЗДЕСЬ","file":"ВПИШИТЕ ССЫЛКУ НА МУЗЫКУ ЗДЕСЬ"}]} Аудиоплеер с размерами 305Х36 будет оснащён только одной музыкальной композицией или радиопотоком, для добавления измените ссылку выделенную краным цветом на свою. Код <script language="JavaScript" src="//delaisait.ucoz.ru/script/audio/end-playlist/swfobject.js"></script> <div id="audioplayerds"></div> <script> var flashvars = {"uid":"audioplayerds","m":"audio","st":"http://delaisait.ucoz.ru/script/audio/end-playlist/style/whiteaudio-pl-305X36.txt","file":"http://delaisait.ucoz.ru/Ramshtain.mp3"}; var params = {id:"audioplayerds",allowFullScreen:"true",allowScriptAccess:"always",wmode:"transparent"}; new swfobject.embedSWF("http://delaisait.ucoz.ru/script/audio/end-playlist/uppod.swf", "audioplayerds", "305", "36", "10.0.0", "expressInstall.swf", flashvars, params); </script> Аудиоплеер без плейлиста в подключенном состоянии 
|
Видеоплеер для сайта uCoz с плейлистом без рекламы Видеоплеер ► подойдёт не только для сайта uCoz,его можно установить на любой сайт.Этот видеоплеер имеет размер 500 X 375 и он не может быть изменён.Видеоплеер поддерживает ссылки на видео в форматах .flv, .mp4, YouTube .Видеоплеер поддерживает воспроизведение файлов в плейлисте,ниже описывается установка плейлиста в плеер.Вы можете создать на его базе вид материалов,используя для этого один модуль. Основным элементом в работе плеера является тег Что это?Почитать что делает и как работает этот тег.<object>.Для изменения видеофайла,замените адрес выделенный красным цветом на свой.Для изменения плейлиста,замените адрес выделенный красным цветом на свой.Устанавливаемый плейлист выглядит следующим образом: Код {"playlist":[ {"comment":"Название","file":"Ссылка на видеофайл"},{"comment":"Название","file":"Ссылка на видеофайл"},{"comment":"Название","file":"Ссылка на видеофайл"},{"comment":"Название","file":"Ссылка на видеофайл"}]} Вам потребуется создать текстовый документ,с английским названием например ( pleylist.txt ).В него установить содержимое описанное выше,внести изменения в названия и пути к файлам.Количество композиций не ограничивается указанным количеством,можете добавить пунктов по существующему примеру.Закачайте изменённый файл плейлиста на ФТП сервер своего сайта и укажите к нему путь в коде видеоплеера Установка видеоплеера с плейлистом Код <center> <object type="application/x-shockwave-flash" data="http://delaisait.ucoz.ru/script/video/uppod/uppod.swf" width="500" height="375"> <param name="allowFullScreen" value="true" /> <param name="allowScriptAccess" value="always" /> <param name="wmode" value="transparent" /> <param name="movie" value="http://delaisait.ucoz.ru/script/video/uppod/uppod.swf" /> <param name="flashvars" value="st=http://delaisait.ucoz.ru/script/video/uppod/pb500x375.txt&pl=Ссылка на плейлист" /></object> </center> Код <center> <object type="application/x-shockwave-flash" data="http://delaisait.ucoz.ru/script/video/uppod/uppod.swf" width="500" height="375"> <param name="allowFullScreen" value="true" /> <param name="allowScriptAccess" value="always" /> <param name="wmode" value="transparent" /> <param name="movie" value="http://delaisait.ucoz.ru/script/video/uppod/uppod.swf" /> <param name="flashvars" value="st=http://delaisait.ucoz.ru/script/video/uppod/pb500x375.txt&file=Ссылка на видеофайл" /></object> </center>
|
Видеоплеер для сайта uCoz с плейлистом без рекламы Видеоплеер ► подойдёт не только для сайта uCoz,его можно установить на любой сайт.Этот видеоплеер имеет размер 500 X 281 и он не может быть изменён.Видеоплеер поддерживает ссылки на видео в форматах .flv, .mp4, YouTube .Видеоплеер поддерживает воспроизведение файлов в плейлисте,ниже описывается установка плейлиста в плеер.Вы можете создать на его базе вид материалов,используя для этого один модуль.Вы можете заказать изготовление вида материалов для сайта uCoz посетив страницу Услуга по изготовлению вида материаловМы предлагаем различные услуги,посетите страницу чтобы быть в курсепредлагаемых услуг.Основным элементом в работе плеера является тег Что это?Почитать что делает и как работает этот тег.<object>.Для изменения видеофайла,замените адрес выделенный красным цветом на свой.Для изменения плейлиста,замените адрес выделенный красным цветом на свой.Устанавливаемый плейлист выглядит следующим образом Код {"playlist":[ {"comment":"Название","file":"Ссылка на видеофайл"},{"comment":"Название","file":"Ссылка на видеофайл"},{"comment":"Название","file":"Ссылка на видеофайл"},{"comment":"Название","file":"Ссылка на видеофайл"}]} Вам потребуется создать текстовый документ,с английским названием например ( pleylist.txt ).В него установить содержимое описанное выше,внести изменения в названия и пути к файлам.Количество композиций не ограничивается указанным количеством,можете добавить пунктов по существующему примеру.Закачайте изменённый файл плейлиста на ФТП сервер своего сайта и укажите к нему путь в коде видеоплеера. Установка видеоплеера с плейлистом Код <center> <object type="application/x-shockwave-flash" data="http://delaisait.ucoz.ru/script/video/uppod/uppod.swf" width="500" height="281"> <param name="allowFullScreen" value="true" /> <param name="allowScriptAccess" value="always" /> <param name="wmode" value="transparent" /> <param name="movie" value="http://delaisait.ucoz.ru/script/video/uppod/uppod.swf" /> <param name="flashvars" value="st=http://delaisait.ucoz.ru/script/video/uppod/f500x281.txt&pl=Ссылка на плейлист" /></object> </center> Код <center> <object type="application/x-shockwave-flash" data="http://delaisait.ucoz.ru/script/video/uppod/uppod.swf" width="500" height="281"> <param name="allowFullScreen" value="true" /> <param name="allowScriptAccess" value="always" /> <param name="wmode" value="transparent" /> <param name="movie" value="http://delaisait.ucoz.ru/script/video/uppod/uppod.swf" /> <param name="flashvars" value="st=http://delaisait.ucoz.ru/script/video/uppod/f500x281.txt&file=Ссылка на видеофайл" /></object> </center>
|
Текст по верх изображения Код <div style="width:500px"> <img src="ссылка на картинку" alt="" /> <div style="position:relative;bottom:100px;">Текст поверх картинки</div></div>
Категория: Скрипты |
Просмотров: 525 |
Добавил: master |
Дата: 13.09.2014
|
|
Закругление углов у картинок через css Очень простое настраиваемое закругление краёв любых картинок через css Установка: После /head на нужных страницах вставляйте: Код <style type="text/css">
.normal-img {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
}
</style> Цитата -webkit-border-radius: 15px; - Степень закругления углов для Вебкит браузеров
-moz-border-radius: 15px; - Степень закругления углов для браузеров на движке Mozilla
border-radius: 15px; - Степень закругления углов для всех остальных браузеров
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .4); - Параметры настройки тени вокруг картинки для Вебкит браузеров
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, .4); - Параметры настройки тени вокруг картинки для браузеров на движке Mozilla
box-shadow: 0 1px 5px rgba(0, 0, 0, .4); - Параметры настройки тени вокруг картинки для всех остальных браузеров Для того, чтобы придать картинке эффект закруглённых углов, достаточно присвоить ей класс "normal-img" Код <img src="Ссылка на картинку" width="100" height="100" class="normal-img" />
Категория: Скрипты |
Просмотров: 477 |
Добавил: master |
Дата: 13.09.2014
|
|
Карусель картинок для Dominion
Скрипт берет картинки из модуля фотоальбом.
Установка:
Создаем информер: Фотоальбомы · Материалы · В случайном порядке · Материалы: 20 · Колонки: 20
Вставляем в информер код:
Код
<div class="panel" align="center"><div style=" background:#282828; border-top:1px solid #303030;border-right:1px solid #222222;border-bottom:1px solid #222222;border-left:1px solid #222222;padding: 4px 4px 4px 4px;color:#999;"><a href="$PHOTO_URL$"><img src="$PHOTO_DIRECT_URL$" height="80" width="110"
border="0"/></div></a></div>
На страницах где будет стоять карусель между:
Код
<!-- Демо --> <!-- /Демо -->
Ставим код:
Код
<style type="text/css" media="screen">
.stepcarousel {position: relative;overflow: scroll;width: 920px;height: 104px;}
.stepcarousel .belt {position: relative;left: 0;top: 0;}
.stepcarousel .panel {float: left;overflow: hidden;margin-right: 6px;margin-top: 1px;}
.stepcarousel .panel img {width: 100px; height: 80px;}
</style>
<script type="text/javascript" src="/js/stepcarousel.js"></script>
<div align="center">
<div id="mygallery" class="stepcarousel">
<div class="belt">
<!-- СЛАЙДШОУ -->
$MYINF_XX$
</div>
</div>
<!-- /СЛАЙДШОУ -->
<script type="text/javascript">
stepcarousel.setup({
galleryid: 'mygallery',
beltclass: 'belt',
panelclass: 'panel',
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:300, wraparound:false, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['/images/left.png', -35, -1], rightnav: ['/images/right.png', 5, -1]},
statusvars: ['statusA', 'statusB', 'statusC'],
contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>
</div>
$MYINF_XX$ меняем на свой созданный информер!
Скачиваем архив и заливаем файлы в одноименные папки.
СКАЧАТЬ
Категория: Слайдеры |
Просмотров: 510 |
Добавил: master |
Дата: 13.09.2014
|
|
Картинки двигаются друг за другом, как настоящая карусель. При наведении мышки на любую такую картинку, карусель останавливается. На странице,где будет карусель,заменяем: На: Код <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; - это скорость вращения карусели,можете изменить на свое.
Категория: Слайдеры |
Просмотров: 446 |
Добавил: master |
Дата: 12.09.2014
|
|
|
