Меню сайта
АКЦИЯ!!!
Категории раздела
Меню [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  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
25262728293031
Архив записей
Наш опрос
Есть ли у Вас сайт?
Всего ответов: 27
Друзья сайта

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

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

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

JQuery слайдер изображений и контента с автоматической прокруткой

Очень стильный слайдер с автоматической прокруткой слайдов с разнообразной анимацией смены изображений. Этот слайдер также прокручивает и контент (текст) вместе с изображением. Слайдер работает на jQuery версии 1.6.1. Вы его можете использовать в качестве слайд-шоу на главной странице вашего сайта. Вес данного jQuery слайдера небольшой, так что загружатся он будет очень быстро, а версия jQuery 1.6.1 не будет конфликтовать с другими скриптами вашего сайта.
Смена слайдов происходит довольно плавно и подкреплена анимацией, в основном построенной на исчесзновении в разные стороны частей изображения. Думаю этот слайдер может приглянуться вам. Смотрим демонстрацию, качаем архив. Всем советую просмотреть другие слайдеры, которые есть в моем блоге.

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

Слайд-шоу фоновых изображений с использованием css3

Очень красивое слайд-шоу фоновых изображений с автоматической прокруткой слайдов и css3 анимацией. Фоновый слайдер работает на скриптовом языке программирования javascript - modernizr. В данном плагине имеется 4 варианта прокрутки фоновых изображений: просто плавное появление и прокрутка с таким же плавным появлением текста, приближение картинки и ее поворот, а также вариациии появления заголовков слайдов - с боку, с верху и с низу. Данный слайдер подойдет к любому сайту. Также его можно использовать как фоновое портфолио работ художника, фотографа и так далее.

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

Легкий слайдер контента с текстовой анимацией на CSS3 и jQuery

Очень практичный, легкий слайдер контента на CSS3 и jQuery. Отличительная особенность данного слайдера - текстовая анимация при переходе с одного слайда на другой. В любой слайд можно воткнуть любой html код. То есть в лайдере могут прокручиваться изображения, текста, заголовки, видео и так далее. Работает слайдер во всех современных браузерах последних версиях. К сожалению в версиях которые вышли 3-6 месяцев назад слайдер работает не корректно, поэтому не все посетители вашего сайта смогут насладиться этим слайд-шоу.
В этом слайдере применен атрибут css3 - animation. Советую подробнее ознакомиться с этим параметром css, так как с помощью него можно делать великолепные вещи.
На демонстрационной странице вы можете детально рассмотреть данный слайдер контента. Он представлен в двух версиях: статичный - с возможность прокрутки слайдов с помощью буллитов снизу или стрелочек по бокам, и автоматический - с автоматической прокруткой слайдов.

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



Горизонтальный резиновый jQuery слайдер изображений на сайт



Превосходная простая реализация резинового слайдера изображений. Слайдер крутится справа на лево по всей ширине монитора. Если вы посмотрите html код слайдера - вы обрадуетесь. Он очень легкий и понятный. Слайды идут друг за другом с равномерной скоростью (небольшой, но это можно изменить в файле js). Вся анимация работает на jQuery версии 1.3.2. Сам скрипт резинового слайдера называется jquery flexislider. Для одного моего проекта нужен был как раз такой слайдер (резиновый и сплошной, без рамок и расстояний между изображениями), я сначала поискал в интернете что-то типа этого, но не нашел. Начал делать сам, но неожиданно наткнулся на это решение.

Слайдер действительно очень легкий, аккуратный и неброский. Его можно использовать на сайте, как превьюшку ваших товаров. можно даже не ставит ссылки на них - это просто будет визуальная презентация вашей продукции, как бы вскользь. Такой слайдер служит на сайте для придания сайту динамики, живости. Он не прокручивается ни скролом, ни кнопками и может выступать как фоновый слайдер с резиновой растяжкой по ширине экрана. Этот jQuery слайдер можно применить, конечно же, не только к резиновым сайтам, но и сайтам с фиксированной шириной. Я собираюсь ешще немного переделать эту карусель изображений и использовать ее, как портфолио с ссылками на работы и слайд-шоу. Зделаю - выложу. А пока смотрите этот слайдер в работе и скачивайте его бесплатно с моего сайта.

Установка на сайт:

1. Скачайте архив и поместите папки их этого архива в корень вашего сайта.

2. Поместите вот этот код к себе на сайт между и , тем самом вы подключите js и css файлы::


Код
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><script src="js/jquery.flexislider.js" type="text/javascript"></script>


3. Там где вы хотите видеть свой слайдер разместите вот этот html код:
Код
<div id="slider">
<div id="imageloader">
<img src="images/ajax-loader.gif" />
</div>
<img src="images/sample1.jpg" />
<img src="images/sample2.jpg" />
<img src="images/sample3.jpg" />
<img src="images/sample4.jpg" />
<img src="images/sample5.jpg" />
<img src="images/sample6.jpg" />
<img src="images/sample7.jpg" />
<img src="images/sample8.jpg" />
<img src="images/sample9.jpg" />
<img src="images/sample10.jpg" />
<img src="images/sample11.jpg" />
<img src="images/sample12.jpg" />
</div>
Категория: Слайдеры | Просмотров: 1222 | Добавил: Chif | Дата: 13.09.2014 | Комментарии (1)

Слайдер-просмотрщик изображений на jQuery для интернет-магазина

Потрясный по стилю и функционалу слайдер для интернет магазина. Удобный в установке на сайт и в пользовании посетителем. Слайдер представляет из себя главное изображение 366 на 200 пикселей и миниатюры отстальных изображений. При нажатии на миниатюру в главном окошке плавно меняется изображение на то, которое соответствует миниатюре. Также есть другой способ просмотра изображений: по правую и левую стороны от главного изображения есть небольшие стрелочки. Нажимая на них, вы можете просматривать изображения, не пользуясь миниатюрами (как говорится, кто как привык).
Слайдер-просмотрщик работает в любом современном браузере. Код этого слайд-шоу товаров в интернет магазине очень легкий и вам не составит труда поставить его на ваш сайт. Слайдер работает на jquery версии 1.4.4. Если у вас есть интернет магазин (или вы создаете его в это время) и планируется размещать товары с несколькими изображениями, то вам это слайдер придется к кстати. У меня уже была одна сборка, посвященная слайдеру-зуммеру для интернет магазина, вот ссылка на эту статью. Возможно тот слайдер вам тоже пригодится.
В демо версии очень хорошо показано как можно с помощью изображений шикарно показать и представить свой товар. В демо версии изображения посвящены кедам (7 изображений кед с разных ракурсов). Думаю вам захочется также хорошо представить клиенту товар, так точ качайте этот слайдер для интернет магазина и будет вам счастье)) Кстати, как вы уже видите - я поставил рекламу на свой блог и я буду очень признателен, если вы перейдете с моего сайт на нужное или понравившееся объявление)))) Тем самом вы можете сказать мне "Спасибо". Всего хорошего!))

СКАЧАТЬ АРХИВ

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

Великолепный jQuery слайдер с плавным увеличением и уменьшением изображения

Отличный слайдер для сайта с автоматической прокруткой изображений и потрясным эффектом плавующий картинки. Изображения в слайдере двигаются снизу вверх, увеличиваются и уменьшаются. Все эффекты анимации идут в произвольном порядке. Я нашел этот слайдер на одном из шаблоне сайта, решил вытащить от туда (кстати вытащить у меня почему то не получилось)))), нарыл документацию по этой версии слайдера и вот готовый и свежий архив лежит перед вами.

Я разложил все по папочкам, убрал ненужный код, ссылки и так далее. Имея столь богатый функционал и несколько анимационных jQuery фишек, при всем при этом слайдер замечательно отображается во всех современных браузерах. управлять слайдером можно с помощью файла demo (советую вынести его в html файл):

Код
$(document).ready(function(){
$('.slider')._TMS({
посмотреть:0,
pauseOnHover:false,
prevBu:'.prev',
nextBu:'.next',
playBu:'играть',
Продолжительность:10000,
preset:'zoomer',
pagination:true,//'.pagination',true,"
pagNums:false,
слайд-шоу:7000,
numStatus:true,
баннеры:'fromRight',// fromLeft, fromRight, fromTop, fromBottom
waitBannerAnimation:false,
progressBar:"
})  
})

Очень крутой слайдер!  Он украсит любой сайт, любое портфолио, его можно поставить на главную страницу в качестве превью услуг или самых главных товаров. Слайдер прокручивает любой контент, а превью к тексту очень эффектно выезжает с боку (кстати есть 4 режима выезда этой текстовой панели. Также есть стрелочки для навигации по слайдеру, буллиты и табло с инфомрацией какой по счету сейчас показывается слайд. Не забываем кликать по яндекс-рекламке)) Всего хорошего!

Установка этого слайдера на сайт:
1. Качаем архив
2. Распаковываем его в корень вашего сайта через FTP менеджер
3. На странице вызова этого слайдера между тегами <head> и </head> прописываем следующий код:

Код
<link rel="stylesheet" href="css/demo.css" type="text/css" media="all">
  <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
  <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
  <script type="text/javascript" src="js/tms-0.4.1.js"></script>
  <!-- демо -->
  <script type="text/javascript" src="js/demo.js"></script>
  <!-- конец демо -->
  <script src="js/highlight.js"></script>
  <script src="js/html5.js"></script>
  <script src="js/html-xml.js"></script>
  <script src="js/css.js"></script>
  <script src="js/javascript.js"></script>
  <script>
  hljs.tabReplace = ' ';
  hljs.initHighlightingOnLoad();
  </script>
  <!--[if lt IE 7]> <link rel="stylesheet" href="css/ie/ie6.css" type="text/css" media="screen">
  <![endif]--> <!--[if lt IE 9]> <script type="text/javascript" src="js/html5.js"></script> <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">
  <![endif]-->

4. В тело сайта (там где мы хотим видеть слайдер) записываем следующий html код:

Код
<div id="main">
  <div id="slide">
  <!-- slider -->
  <div class="slider">
  <ul class="items">
  <li><img src="images/slide-3.jpg" alt="" /><div class="banner"><span>Unde omnis iste natus errsit rem aperiam, eaque ipsa quae. Woluptatem accusantium </span></div></li>
  <li><img src="images/slide-4.jpg" alt="" /><div class="banner"><span>Nearuasi architecto beatae faserse vitaerspiciat kerusler miase lerosnr lertyseras</span></div></li>
  <li><img src="images/slide-1.jpg" alt="" /><div class="banner"><span>Unde omnis iste natus errsit rem aperiam, eaque ipsa quae. Woluptatem accusantium </span></div></li>
  <li><img src="images/slide-2.jpg" alt="" /><div class="banner"><span>Unde omnis iste natus errsit rem aperiam, eaque ipsa quae. Woluptatem accusantium </span></div></li>
  <li><img src="images/slide-5.jpg" alt="" /><div class="banner"><span>Nearuasi architecto beatae faserse vitaerspiciat kerusler miase lerosnr lertyseras.</span></div></li>
  <li><img src="images/slide-6.jpg" alt="" /><div class="banner"><span>Woluptatem accusantium dolor масса astumosto Unde omnis iste natus errsit rem апера</span></div></li>
  <li><img src="images/slide-7.jpg" alt="" /><div class="banner"><span>Unde omnis iste natus errsit rem aperiam, eaque ipsa quae. Woluptatem accusantium </span></div></li>
  </ul>
  </div>
  <a href="#" class="prev"><</a>
  <a href="#" class="play"><em>stop</em><span>play</span></a>
  <a href="#" class="next">></a>
  <!-- ползунок end -->
  </div>
  </div>

Слайдер готов!

СКАЧАТЬ АРХИВ

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

Слайдер для сайта с постепенным появлением элементов слайда

Здравствуйте! Хочу представить вашему вниманию потрясающий анимационный баннер для сайта на CSS3. Его можно использовать как слайдер презентации продукта или услуг на главной странице сайта. Это не просто анимациооно перелистование слайдов: это пошаговое появление изображений и текста, которые есть в слайде. Именно поэтому я назвал это анимационным баннером. Мало того, что данный скрипт сложен в визуальзации, что придает дороговизну вашему сайту, но он еще и легок в установке на сайт. В нем один js-файл и один css-файл.
Сейчас я подробно распишу, как работает слайдер, а потом расскажу, как его поставить на сайт и что нужно знать, что бы поменять картинку или изменить динамику и сюжет каждого слайда. Во первых скажу, что я достаточно много провозился с этим слайдером, очищал его от кучи ненужного мусора (в виде картинов, css и js-файлов и лишнего кода). Во вторых скажу, что данный анимационный слайдер помог мне сделать презентацию на одном сайте, которая получилась достаточно неплохой и функциональной. Баннер представляет из себя четыре слайда, в котором есть некая инфомрация в виде текста и картинок. Каждая картинка и блок с текстом плавно выезжают сверху, снизу, справа или слева, и у каждого элемента задано свое время для появления. И так показаны четыре слайда с разной анимацией выезда информации.
Из навигации есть стрелочки, чтобы посмотреть следующий слайд или вернуться к предыдущему. Также есть буллиты, с помощью которых тоже можно управлять баннером, и индикатор времени смены слайдов в виде круга с движущейся красной полоской.

Установка анимационного баннера на сайт
1. Скачиваем архив с моего сайта, нажав кнопку "Скачать"
2. Распаковываем архив в корень вашего сайта
3. Прописываем пути к css и js файлам на странице, где у вас будет размещен этот баннер. Между <head> и </head> вставляем следующий код:

Код

<link href="css/allinone_contentSlider.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Cabin' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="js/allinone_contentSlider.js" type="text/javascript"></script>
<script> jQuery(function() {
  jQuery('#allinone_contentSlider_surprise').allinone_contentSlider({
  skin: 'surprise',  
  width: 960,  
  height: 384,  
  autoHideBottomNav:false,  
  showPreviewThumbs:false,  
  autoHideNavArrows:false  
  });  
  });  
</script>

В последующем строки:

Код

<link href='http://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Cabin' rel='stylesheet' type='text/css'>

можно бужет удалить, так как это идет подключение латинских шрифтов, а у вас в слайдере скорее всего будут русские шрифты

4. Вставляем этот код, туда, где у вас будет находиться слайдер:

Код

<div style="width:960px;margin: 0 auto; padding:10px 0 0 0;">
  <div id="allinone_contentSlider_surprise">
  <ul class="allinone_contentSlider_list">
  <li data-text-id="#allinone_contentSlider_photoText1"></li>
  <li data-text-id="#allinone_contentSlider_photoText2"></li>
  <li data-text-id="#allinone_contentSlider_photoText3"></li>
  <li data-text-id="#allinone_contentSlider_photoText6"></li>
  </ul>
  <!-- TEXTS -->
  <div id="allinone_contentSlider_photoText1" class="allinone_contentSlider_texts">
  <div class="allinone_contentSlider_text_line" data-initial-left="150" data-initial-top="10" data-final-left="30" data-final-top="10" data-duration="0.5" data-fade-start="0" data-delay="1.1"><img src="img/surprise1.png" width="444" height="364" alt=""/></div>
  <div class="allinone_contentSlider_text_line textElement11_surprise" data-initial-left="0" data-initial-top="25" data-final-left="380" data-final-top="25" data-duration="0.5" data-fade-start="0" data-delay="0.3">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
  <div class="allinone_contentSlider_text_line textElement12_surprise" data-initial-left="0" data-initial-top="50" data-final-left="378" data-final-top="50" data-duration="0.5" data-fade-start="0" data-delay="0.5">Et harum quidem
rerum facilis</div>
  <div class="allinone_contentSlider_text_line textElement13_surprise" data-initial-left="420" data-initial-top="180" data-final-left="420" data-final-top="170" data-duration="0.5" data-fade-start="0" data-delay="0.5">Temporibus autem quibusdam et aut officiis debitis
aut rerum necessitatibus saepe eveniet ut et voluptates</div>
  <div class="allinone_contentSlider_text_line textElement13_surprise" data-initial-left="420" data-initial-top="230" ... Читать дальше »
Категория: Слайдеры | Просмотров: 1176 | Добавил: Chif | Дата: 13.09.2014 | Комментарии (0)

5 вариантов горизонтальной прокрутки изображений. jQuery карусель

Очень красивая реализация карсели на сайте. А тот факт, что в архиве 5 варинтов горизонтальной прокрутки изображений делает эту сборку обязательной для скачивания)) Конечно эти варианты мало чем отличаются друго от друга, но там присутствует немного различная анимация прокрутки изображений. Вообще карусель очень нужная вещь в web-хозяйстве, так как частенько кучу изображений на странице нужно кудо деть и web-разработчик прибегает к решению ставить карусель, которая скроет часть изображений и будет их выводить поочередно. кстати карусель называется "Elastislide".

СКАЧАТЬ

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

jQuery карусель для новостного блога или интернет-газеты

Функциональная jQuery карусель для вывода краткой информации с картинкой и текстом. Эту карусель можно поместить на главную страницу вашего новостного блога. Получится очень хорошее решение для вывода последних новостей с ссылкой на саму новость. В данном архиве карусель представлена в двух видах, которые отличаются только цветом рамки и фона. Динамичная прокрутка изображений и текста осуществляется при помощи jQuery. Мне кажется, что на новостных сайтах нужно обязательно выводить превью новостей именно таким образом, так как этот плагин позволяет экономить место, а сами знаете - в новостных проектах (особенно на главной странице) места итак не хватает. Надеюсь данный плагин вам пригодиться.

СКАЧАТЬ АРХИВ

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

Карусель картинок для 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$ меняем на свой созданный информер!
Скачиваем архив и заливаем файлы в одноименные папки.
СКАЧАТЬ

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

1-10 11-20 21-21

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