Меню сайта
АКЦИЯ!!!
Категории раздела
Меню [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 Готовые сайты Новые Бизнес дизайн макеты Новые дизайн макеты Медицина дизайн макеты интернет магазинов Новые дизайн макеты Рестораны Новые дизайн макеты Музыка и клубы Новые дизайн макеты Отели дизайн макеты производство и услуги дизайн макеты интерьер дизайн макеты строительство дизайн макеты сельское хозяйство Новый дизайн макет Транспорт Новый дизайн макет Образование Новый дизайн макет Мода дизайн макеты компьютеры дизайн макеты мобилки Логотипы портфолио
Бесплатное отправление смс сообщений!
Поиск
Календарь
«  Апрель 2024  »
ПнВтСрЧтПтСбВс
1234567
891011121314
15161718192021
22232425262728
2930
Архив записей
Наш опрос
Есть ли у Вас сайт?
Всего ответов: 27
Друзья сайта

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

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

Главная » Слайдеры
« 1 2 3 »


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

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

Код
<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; - это скорость вращения карусели,можете изменить на свое.
Категория: Слайдеры | Просмотров: 443 | Добавил: master | Дата: 12.09.2014 | Комментарии (0)



Скрипт замечательной карусели изображений, отлично подойдёт для любого сайта:
Установка:
1. Открываем:
Панель управления ---> Управление дизайном ---> Таблица стилей (CSS), вставляем код в самый вверх:

Код
div.slideshow {display: block; margin: 0px 0px 20px 0px; padding: 0px 0px 0px 0px; height: 329px;}  
ul.carousel {display: block; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; list-style: none; width: 513px; height: 329px; float: left;}  
ul.carousel li {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; width: 513px; height: 329px;}  
ul.carousel li a {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; text-decoration: none;}  
ul.carousel li a img {border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border: solid 0.6em rgb(113,91,99); width: 100%; height: 100%;}  
.roundabout-holder {}  
.roundabout-moveable-item {cursor: pointer; background: none;}  
.roundabout-in-focus {cursor: auto;}  
.prev {display: block; margin: 150px 157px 0px 60px; padding: 0px 0px 0px 0px; text-decoration: none; width: 23px; height: 46px; background: url("http://fotki.ucoz.ua/file_forum/carousel/button-prev.png") no-repeat left top; float: left;}  
.next {display: block; margin: 150px 0px 0px 163px; padding: 0px 0px 0px 0px; text-decoration: none; width: 23px; height: 46px; background: url("http://fotki.ucoz.ua/file_forum/carousel/button-next.png") no-repeat left top; float: left;}


2. Эту часть кода вставляем в место, где должна быть наша карусель:
Код
<script src="http://fotki.ucoz.ua/file_forum/carousel/carousel.js"></script>  
<script>  
$(document).ready(function() {  
$('ul.carousel').roundabout({  
btnPrev: ".next",  
btnNext: ".prev",  
minScale: 0.4,  
maxScale: 1.0,  
minOpacity: 1.0,  
maxOpacity: 1.0,  
tilt: 0.0  
});  
});  
</script>  
<div class="slideshow">  
<a href="#" class="prev"></a>  
<ul class="carousel">  
<li>  
<a href="##up"><img src="Адрес картинки 1" alt=""></a>  
</li>  
<li>  
<a href="##up"><img src="Адрес картинки 2" alt=""></a>  
</li>  
<li>  
<a href="##up"><img src="Адрес картинки 3" alt=""></a>  
</li>  
<li>  
<a href="##up"><img src="Адрес картинки 4" alt=""></a>  
</li>  
</ul>  
<a href="#" class="next"></a>  
<div style="clear: both;"></div>  
</div>


Вместо надписей Адрес картинки 1, 2, 3, 4 прописываем адреса своих изображений.
Количество изображений можно увеличивать, для этого перед </ul> прописать код?

Код
<li>  
<a href="##up"><img src="Адрес новой картинки" alt=""></a>  
</li>
Категория: Слайдеры | Просмотров: 756 | Добавил: master | Дата: 12.09.2014 | Комментарии (0)



Установка:
1. Открываем:
Панель управления ---> Управление дизайном ---> Таблица стилей (CSS), вставляем код в самый вверх:

Код
#preview-contanier {background-attachment: scroll; background-color: transparent; background-image: url("http://fotki.ucoz.ua/script/primery/slider_ucoz/bg_preview.png"); background-position: 0% 0%; background-repeat: repeat-x;}  
#preview-contanier {padding-bottom: 15px; height: 200px; width: 961px; margin: 0 auto 20px auto; text-align: center; position: relative;}  
#preview {width: 900px; padding-top: 40px; margin: 0 auto; text-align: left;}  
#preview-contanier div.arrow-left {position: absolute; top: 95px; left: -10px; width: 28px; height: 28px; display: block; overflow: hidden; text-indent: -9999px; background: url('http://fotki.ucoz.ua/script/primery/slider_ucoz/arrow_left.png') no-repeat; cursor: pointer;}  
#preview-contanier div.arrow-right {position: absolute; top: 95px; right: -10px; width: 28px; height: 28px; display: block; overflow: hidden; text-indent: -9999px; background: url('http://fotki.ucoz.ua/script/primery/slider_ucoz/arrow_right.png') no-repeat; cursor: pointer;}  
li.preview-tumb {padding-left: 0 !important;}  
.preview-tumb {width: 170px; float: left; display: inline; text-align: center; overflow: hidden; margin: 0 5px;}  
.preview-tumb a {display: block; padding: 8px 8px 5px 8px; background: #fff; text-decoration: none; color: #9f9f9f; font-size: 9pt;}  
.preview-tumb a:hover {display: block; padding: 8px 8px 5px 8px; background: #51b5ea; text-decoration: none; color: #fff; font-size: 9pt;}  
.arrow-left, .arrow-right {padding:2px;filter:alpha(opacity=100); ..-opacity:1.0; opacity:1.0; -khtml-opacity:1.0;}  
.arrow-left:hover, .arrow-right:hover {filter:alpha(opacity=80); ..-opacity:0.8; opacity:0.8; -khtml-opacity:0.8;}


2. Эту часть кода вставляем в место, где должен быть наш слайдер:

Код
<script type="text/javascript" src="http://fotki.ucoz.ua/script/primery/slider_ucoz/main.js"></script>  
<div id="preview-contanier">  
<div class="arrow-left"></div>  
<div id="preview" class="ie6">  
<ul>  
<li class="preview-tumb panel"><a href="javascript://" onclick="window.open('Адрес сайта 1');return false;" rel="nofollow"><img alt="" style="border: 0 none; width: 150px; height: 110px;" src="Изображение 1"><br>Название 1</a></li>  
<li class="preview-tumb panel"><a href="javascript://" onclick="window.open('Адрес сайта 2');return false;" rel="nofollow"><img alt="" style="border: 0 none; width: 150px; height: 110px;" src="Изображение 2"><br>Название 2</a></li>  
<li class="preview-tumb panel"><a href="javascript://" onclick="window.open('Адрес сайта 3');return false;" rel="nofollow"><img alt="" style="border: 0 none; width: 150px; height: 110px;" src="Изображение 3"><br>Название 3</a></li>  
<li class="preview-tumb panel"><a href="javascript://" onclick="window.open('Адрес сайта 4');return false;" rel="nofollow"><img alt="" style="border: 0 none; width: 150px; height: 110px;" src="Изображение 4"><br>Название 4</a></li>  
<li class="preview-tumb panel"><a href="javascript://" onclick="window.open('Адрес сайта 5');return false;" rel="nofollow"><img alt="" style="border: 0 none; width: 150px; height: 110px;" src="Изображение 5"><br>Название 5</a></li>  
<li class="preview-tumb panel"><a href="javascript://" onclick="window.open('Адрес сайта 6');return false;" rel="nofollow"><img alt="" style="border: 0 none; width: 150px; height: 110px;" src="Изображение 6"><br>Название 6</a></li>  
<li class="preview-tumb panel"><a href="javascript://" onclick="window.open('Адрес сайта 7');return false;" rel="nofollow"><img alt="" style="border: 0 none; width: 150px; height: 110px;" src="Изображение 7"><br>Название 7</a></li>  
<li class="preview-tumb panel"><a href="javascript://" onclick="window.open('Адрес сайта 8');return false;" rel="nofollow"><img alt="" style="border: 0 none; width: 150px; height: 110px;" src="Изображение 8"><br>Название 8</a></li>  
<li class="preview-tumb panel"><a href="javascript://" onclick="window.open('Адрес сайта 9');return false;" rel="nofollow"><img alt="" style="border: 0 none; width: 150px; height: 110px;" src="Изображение 9"><br>Название 9</a></li>  
<li class="preview-tumb panel"><a href="javascript://" onclick="window.open('Адрес сайта 10');return false;" rel="nofollow"><img alt="" style="border: 0 none; width: 150px; height: 110px;" src="Изображение 10"><br>Название 10</a></li>  
</ul>  
</div>  
<div class="arrow-right"></div>  
</div>  
<div style="clear:both;height:10px;"></div>


Адрес сайта 1, 2, 3... - адреса сайтов.
Изображение 1, 2, 3... - адреса картинок.
Название 1, 2, 3... - названия.
Категория: Слайдеры | Просмотров: 494 | Добавил: master | Дата: 12.09.2014 | Комментарии (0)



Представляю вашему вниманию ещё один скрипт замечательного слайдера изображений, подойдёт для сайтов с различной тематикой.

Установка:
1. Открываем:
Панель управления ---> Управление дизайном ---> Таблица стилей (CSS), вставляем код в самый вверх:

Код
.container1 {width: [color=red]500px[/color]; padding: 0; margin: 0 auto;}  
.main_view {float: left; position: relative; margin-bottom: 25px; border-bottom:1px solid black; border-right:1px solid black; border-left:1px solid black;}  
.window {height:[color=red]367px[/color]; width: [color=red]500px[/color]; border: 6px solid #FFFFFF; overflow: hidden; position: relative;}  
.image_reel {position: absolute; top: 0; left: 0;}  
.image_reel img {float: left;}  
.paging {position: absolute; bottom: [color=blue]10[/color]px; right: [color=blue]-7px[/color]; width: 178px; height:47px; z-index: 100; text-align: center; line-height: 40px; background: url(http://fotki.ucoz.ua/script/primery/slider/paging_bg2.png) no-repeat; display: none;}  
.paging a {padding: 5px; text-decoration: none; color: #fff;}  
.paging a.active {font-weight: bold; background: #920000; border: 1px solid #610000; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px;}


Размеры всех картинок должны быть одинаковые. Красным выделены ширина и высота блока слайдера, замените их на ширину и высоту ваших картинок.
Синим выделены параметры блока с цифрами-переключателями.

2. Эту часть кода вставляем в место, где должен быть наш слайдер:
Код
<div class="container1">  
<div class="main_view">  
<div class="window">  
<div class="image_reel">  
<a href="Ссылка 1"><img src="Ссылка на картинку 1"></a>  
<a href="Ссылка 2"><img src="Ссылка на картинку 2"></a>  
<a href="Ссылка 3"><img src="Ссылка на картинку 3"></a>  
<a href="Ссылка 4"><img src="Ссылка на картинку 4"></a>  
<a href="Ссылка 5"><img src="Ссылка на картинку 5"></a>  
<a href="Ссылка 6"><img src="Ссылка на картинку 6"></a>  
</div>  
</div>  
<div class="paging" style="display: block">  
<a href="#" rel="1" class="">1</a>  
<a href="#" rel="2" class="">2</a>  
<a href="#" rel="3" class="">3</a>  
<a href="#" rel="4" class="">4</a>  
<a href="#" rel="5" class="">5</a>  
<a href="#" rel="6" class="active">6</a>  
</div>  
</div>  
</div>  
<script type="text/javascript" src="http://fotki.ucoz.ua/script/primery/slider/slider.js"></script>  
<div style="clear:both;height:10px;"></div>
Категория: Слайдеры | Просмотров: 510 | Добавил: master | Дата: 12.09.2014 | Комментарии (0)



Красивый слайдер изображении для ucoz. подойдет для сериалов. также можете переделать под себя.

скачать : Красивый слайдер изображении для ucoz
Категория: Слайдеры | Просмотров: 492 | Добавил: master | Дата: 12.09.2014 | Комментарии (0)



Слайдер Slideshow v5 для uCoz. Всем доброе время суток! И так сегодня я хочу предоставить к вашему вниманию - Slideshow v5 Очень хороший и качетсвенный слайдер для вашего сайта в системе ucoz.

Для начала скачиваем архив

После того как вы скачали архив "Распаковываем его" и все что там есть загружаем в свой "Файловый менеджер"

И так, теперь давайте приступим к самой установке кода.

Установка!

Заходим куда вам нужно установить Slideshow v5 и ставим между тегами

Код
<body> и </body>


Код
<div id="flashContent">  
  <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="860" height="350" id="home" align="middle">  
  <param name="movie" value="home.swf" />  
  <param name="quality" value="high" />  
  <param name="bgcolor" value="#000000" />  
  <param name="play" value="true" />  
  <param name="loop" value="true" />  
  <param name="wmode" value="window" />  
  <param name="scale" value="showall" />  
  <param name="menu" value="true" />  
  <param name="devicefont" value="false" />  
  <param name="salign" value="" />  
  <param name="allowScriptAccess" value="sameDomain" />  
  <!--[if !IE]>-->  
  <object type="application/x-shockwave-flash" data="home.swf" width="860" height="350">  
  <param name="movie" value="home.swf" />  
  <param name="quality" value="high" />  
  <param name="bgcolor" value="#000000" />  
  <param name="play" value="true" />  
  <param name="loop" value="true" />  
  <param name="wmode" value="window" />  
  <param name="scale" value="showall" />  
  <param name="menu" value="true" />  
  <param name="devicefont" value="false" />  
  <param name="salign" value="" />  
  <param name="allowScriptAccess" value="sameDomain" />  
  <!--<![endif]-->  
  <a href="http://www.adobe.com/go/getflash">  
  <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Загрузить Adobe Flash Player" />  
  </a>  
  <!--[if !IE]>-->  
  </object>  
  <!--<![endif]-->  
  </object>  
  </div>


СКАЧАТЬ
Категория: Слайдеры | Просмотров: 496 | Добавил: master | Дата: 12.09.2014 | Комментарии (0)

Слайдер с перелистывающим эффектом

Слайдер с эффектом перелистывания страниц, работает на 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>
Категория: Слайдеры | Просмотров: 788 | Добавил: RedStar | Дата: 17.08.2014 | Комментарии (0)

Галерея для сайта с плавной сменой изображений

Галерея чередует установленные изображения в виде картинок или фотографий предавая им эффект плавной смены.Настройки предельно просты,компановка так же не обременена километровыми значениями.Добавлены эффекты теней и округления краёв галереи, если Вам не нужны подобные эффекты можете их удалить.В местах настроек сделаны выделенные комментарии, это позволит без определённого навыка настроить галерею как нужно.

Код



<style>
#panel {
position:relative;
/* - Ширина галереи - */
width: 650px;
/* - Высота галереи - */
height: 450px;
overflow: hidden;
/* - Тени краёв галереи (можно удалить) - */
-o-box-shadow:0px 0px 7px rgba(0,0,0,0.2),  
0px 0px 0px 1px rgba(188,188,188,0.1);
box-shadow:0px 0px 7px rgba(0,0,0,0.2),  
0px 0px 0px 1px rgba(188,188,188,0.1);
/* - Округление краёв галереи (можно удалить) - */
border-radius: 8px;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;  
/* - Если удалите тени это тоже удаляйте - */
-webkit-transition:box-shadow 0.3s ease-in-out;
-moz-transition:box-shadow 0.3s ease-in-out;
-o-transition:box-shadow 0.3s ease-in-out;
transition:box-shadow 0.3s ease-in-out;
}
/* - Если удалите тени это тоже удаляйте - */
#panel:hover {
-o-box-shadow:0px 0px 9px rgba(0,0,0,0.4),  
0px 0px 0px 1px rgba(188,188,188,0.1);
box-shadow:0px 0px 9px rgba(0,0,0,0.4),  
0px 0px 0px 1px rgba(188,188,188,0.1);
}
#panel img {
position: absolute;
-ms-interpolation-mode:nearest-neighbor;
image-rendering: optimizeSpeed;
}
</style>
<script src="http://delaisait.ucoz.ru/js/gallery/dsgalery.js"></script>
<div id="panel"></div>
<div id="imgsource" style="display:none;">
<img src="http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_1.jpg" />
<img src="http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_2.jpg" />
<img src="http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_3.jpg" />
<img src="http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_4.jpg" />
<img src="http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_5.jpg" />
<img src="http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_6.jpg" />
<img src="http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_7.jpg" />
<img src="http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_8.jpg" />
</div>

 

Категория: Слайдеры | Просмотров: 699 | Добавил: RedStar | Дата: 17.08.2014 | Комментарии (0)

Компактный слайдер работающий автоматически

Слайдер хоть и маленький но может прокручивать любое количество изображений.У слайдера нет кнопок управления,он работает автоматически.Работать он будет только на динамических страницах (типа главной),в материалах модулей он будет работать не на всех сайтах.На меняющиеся в нём картинки можно прикрепить ссылки и использовать в качестве своеобразного меню.Картинки желательно применять с размерами 320Х240,для изменения разрешения изображений можете воспользоваться специальной программой предназначеной для уменьшения размеров.Программа не сложная,на сайте есть виде по работе с ней. Кстати можно изменить и фоновую картинку слайдера и его размеры на нужные,в нижней части есть редактор для экспериментов с кодами примеров - не забудьте воспользоваться.Если что то не понятно или существуют какие либо предложения,используйте формы комментариев.

Код


<style>  
#dsminigalerea {  
padding:0;  
margin:0;  
list-style-type:none;  
position:relative;  
overflow:hidden;  
width:396px;  
height:396px;  
margin:0 auto 20px auto;  
background:url(http://delaisait.ucoz.ru/script/img/1/galerea/fondsminigalerea.jpg);  
}  
#dsminigalerea img {  
border:0;  
}  
#dsminigalerea li {  
float:left;  
width:396px; height:396px;  
display:none;  
}  
#dsminigalerea li a {display:block; width:396px; height:396px; border:0;}  
#dsminigalerea li a img {  
display:block;  
border:0;  
}  
#dsminigalerea li a img.landscape {  
margin:74px auto;  
border:4px solid #fff;  
border-width:1px 4px;  
border-color:#444 #ccc #fff #ccc;  
}  
#dsminigalerea li a img.portrait {  
margin:34px auto;  
border:4px solid #fff;  
border-width:4px 1px;  
border-color:#444 #ccc #fff #ccc;  
}  
#dsminigalerea li.current {display:block;}  
</style>  
<script type="text/javascript" src="http://delaisait.ucoz.ru/script/js/1/galerea/dsminigalerea.js"></script>  
<ul id="dsminigalerea">  
<li class="current"><a href="#"><img class="landscape" src="http://delaisait.ucoz.ru/script/img/1/galerea/dsminigalerea_1.jpg" alt="Композиция-1" title="Композиция-1" /></a></li>  
<li><a href="#"><img class="landscape" src="http://delaisait.ucoz.ru/script/img/1/galerea/dsminigalerea_2.jpg" alt="Композиция-2" title="Композиция-2" /></a></li>  
<li><a href="#"><img class="portrait" src="http://delaisait.ucoz.ru/script/img/1/galerea/dsminigalerea_3.jpg" alt="Композиция-3" title="Композиция-3" /></a></li>  
<li><a href="#"><img class="portrait" src="http://delaisait.ucoz.ru/script/img/1/galerea/dsminigalerea_4.jpg" alt="Композиция-4" title="Композиция-4" /></a></li>  
<li><a href="#"><img class="landscape" src="http://delaisait.ucoz.ru/script/img/1/galerea/dsminigalerea_5.jpg" alt="Композиция-5" title="Композиция-5" /></a></li>  
<li><a href="#"><img class="portrait" src="http://delaisait.ucoz.ru/script/img/1/galerea/dsminigalerea_6.jpg" alt="Композиция-6" title="Композиция-6" /></a></li>  
<li><a href="#"><img class="landscape" src="http://delaisait.ucoz.ru/script/img/1/galerea/dsminigalerea_7.jpg" alt="Композиция-7" title="Композиция-7" /></a></li>  
<li><a href="#"><img class="landscape" src="http://delaisait.ucoz.ru/script/img/1/galerea/dsminigalerea_8.jpg" alt="Композиция-8" title="Композиция-8" /></a></li>  
</ul>  

 

Категория: Слайдеры | Просмотров: 570 | Добавил: RedStar | Дата: 16.08.2014 | Комментарии (0)

Слайдер для воспроизведения изображений работающий с применением jQuery и Mobilyslider. Будет работать на страницах модулей и динамических страницах сайта uCoz,в материале (как здесь) можно подключить только через фрейм. Слайдер можно настроить на три типа воспроизведения,дополнительно можно организовать или отменить автозапуск,а также показ элементов управления и остановку показа во время наведения курсора на рабочую часть. 

Код
<style>
.slider {
float:left;
/* Ширина слайдера */
width:600px;
/* Высота слайдера */
height:350px;
position:relative;
padding-bottom:26px;
background:url(http://delaisait.ucoz.ru/img/1/1/dsslider/bottom_shadow.png) no-repeat bottom center;
}
.sliderContent {
float:left;
/* Ширина слайдера */
width:600px;
/* Высота слайдера */
height:350px;
clear:both;
position:relative;
overflow:hidden;
}
.sliderArrows a {
display:block;
text-indent:-9999px;
outline:none;
z-index:50;
background-image:url(http://delaisait.ucoz.ru/img/1/1/dsslider/prev_next.png);
width:42px;
height:42px;
position:absolute;
top:50%;
margin-top:-34px;
}
.prev {
background-position:0 0;
left:15px;
}
.prev:hover {
background-position:0 -44px;
}
.next {
right:15px;
background-position:-44px 0;
}
.next:hover {
background-position:-44px -44px;
}
.sliderContent .item {
position:absolute;
/* Ширина слайдера */
width:600px;
/* Высота слайдера */
height:350px;
background:#fff;
}
.sliderBullets {
position:absolute;
bottom:0;
left:50%;
z-index:50;
margin-left:-45px;
}
.sliderBullets a {
display:block;
float:left;
text-indent:-9999px;
outline:none;
margin-left:5px;
width:10px;
height:11px;
background:url(http://delaisait.ucoz.ru/img/1/1/dsslider/bullets.png) no-repeat;
}
.sliderBullets .active {
background-position:0 -11px;
}
.sliderContent a {
outline:none;
}
</style>
<div class="slider dsslider">
<div class="sliderContent">
<div class="item">
<img src="http://delaisait.ucoz.ru/img/1/1/dsslider/1.jpg" alt="" />
</div>
<div class="item">
<img src="http://delaisait.ucoz.ru/img/1/1/dsslider/2.jpg" alt="" />
</div>
<div class="item">
<img src="http://delaisait.ucoz.ru/img/1/1/dsslider/3.jpg" alt="" />
</div>
<div class="item">
<img src="http://delaisait.ucoz.ru/img/1/1/dsslider/4.jpg" alt="" />
</div>
<div class="item">
<img src="http://delaisait.ucoz.ru/img/1/1/dsslider/5.jpg" alt="" />
</div>
<div class="item">
<img src="http://delaisait.ucoz.ru/img/1/1/dsslider/6.jpg" alt="" />
</div>
</div>
</div>
<script src="http://delaisait.ucoz.ru/js/jQuery/mobilyslider.js" type="text/javascript">
</script>
<script type="text/javascript">
$('.dsslider').mobilyslider({
// Тип воспроизведения (vertical) или удалить всю строку
transition: 'fade',
// Скорость перелистывания
animationSpeed: 800,
// Автовоспроизведение включено
autoplay: true,
// Скорость автовоспроизведения
autoplaySpeed: 3000,
// Остановка во время наведения курсора (false)
pauseOnHover: true,
// Показывать кнопки вперёд назад (false)
bullets: true,
// Показывать нижние кнопки управления (false)
arrowsHide: true  
});
</script>

Пример скрипта с авто масштабированием изображений 

Внимание!!! По запросам пользователей материал был расширен, изображениям в слайдере можно придать "резиновые" свойства, т.е картинки и фотографии будут сами подстраиваться под установленные размеры самого слайдера.Вы можете применять разнокалиберные размеры изображений, не забывайте, масштабирование может исказить реальный вид при несопоставимых пропорциях ширины и высоты.В примере ниже слайдеру с изображениями из первого примера скрипта установлен размер 200Х200, напоминаю, для проверки кода скрипта в редакторе понадобится добавить к нему библиотеку jQuery.

Код

<style>
.slider {
float:left;
/* Ширина слайдера */
width:200px;
/* Высота слайдера */
height:200px;
position:relative;
padding-bottom:26px;
background:url(http://delaisait.ucoz.ru/img/1/1/dsslider/bottom_shadow.png) no-repeat bottom center;
}
.sliderContent {
float:left;
/* Ширина слайдера */
width:200px;
/* Высота слайдера */
height:200px;
clear:both;
position:relative;
overflow:hidden;
}
.sliderArrows a {
display:block;
text-indent:-9999px;
outline:none;
z-index:50;
background-image:url(http://delaisait.ucoz.ru/img/1/1/dsslider/prev_next.png);
width:42px;
height:42px;
position:absolute;
top:50%;
margin-top:-34px;
}
.prev {
background-position:0 0;
left:15px;
}
.prev:hover {
background-position:0 -44px;
}
.next {
right:15px;
background-position:-44px 0;
}
.next:hover {
background-position:-44px -44px;
}
.sliderContent .item img{
position:absolute;
/* Ширина слайдера */
width:200px;
/* Высота слайдера */
height:200px;
background:#000;
background-size:100% 100%;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
-o-background-size:100% 100%;
-ms-background-size:100% 100%;
}
.sliderBullets {
position:absolute;
bottom:0;
left:50%;
z-index:50;
margin-left:-45px;
}
.sliderBullets a {
display:block;
float:left;
text-indent:-9999px;
outline:none;
margin-left:5px;
width:10px;
height:11px;
background:url(http://delaisait.ucoz.ru/img/1/1/dsslider/bullets.png) no-repeat;
}
.sliderBullets .active {
background-position:0 -11px;
}
.sliderContent a {
outline:none;
}
</style>
<div class="slider dsslider">
<div class="sliderContent">
<div class="item">
<img src="http://delaisait.ucoz.ru/img ... Читать дальше »
Категория: Слайдеры | Просмотров: 678 | Добавил: RedStar | Дата: 16.08.2014 | Комментарии (0)

1-10 11-20 21-21

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