Эффекты на основе Java Script, jQuery и т.д.

Вернуться в каталог >>>

Переключатель по 4-е элемента

WebKPB
Большая библиотека Flash всевозможного назначения. Для удобства поиска и работы все Flash сведены в тематический каталог.
Каждую Flash можно посмотреть в работе.
К каждой Flash есть fla исходник.
KPBshablon
Сайт посвящен современным, креативным дизайнам и их шаблонам для движка UCOZ.
Отдельные разделы посвящены сайтам-визиткам и сайтам с Flash элементами.
Имеется раздел посвящен элементам дизайна и оформления сайтов. Таким как галереи, слайдеры, переключатели и т.д.
KPBwebStudio
Это моя личная WEBстудия. Здесь Вы можете посмотреть некоторые мои работы. Ознакрмиться с перечнем оказываемых мною услуг и ценами на них.
Сайт создан полностью по Flash тезнологии.
ScriptKPBstudio
Этот сайт посвящен JavaScropt, jQuery, CSS, Mootools, Prototype и т.д.
Для удобства поиска и работы все скрипты помещены в тематический каталог.
Все скрипты можно посмотреть в работе.
К каждому есть описание и инструкция по установке.
Все скрипты распространяются обсолютно бесплатно.
Page 5
Page 6
Page 7
Page 8
Page 9
Page 10
Page 11
Page 12
Page 13
Page 14
Page 15
Page 16
Page 17
Page 18
Page 19
Page 20
Page 21
Page 22
Page 23
Page 24

Скопируйте и вставте

Внутри тега <HEAD> - </HEAD>

<script type="text/javascript" src="http://skriptkpbstudio.ucoz.ru/jq_baza/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_bloki/1052/perekl_na4.js/perekl_na4.js"></script>
<script type="text/javascript">
jQuery(function($){
$('ul#items').easyPaginate({
step:4   // колличество прокручиваемых блоков при переключении
////auto:true // автоматический режим работы
});
});    
</script>
<style>
/* content */
/* переключатель в целом */
ul#items{padding: 0;
margin:0;
height:400px;
width:auto;
overflow:hidden;
border: #ff0000 1px solid;
}
/* блок переключателя */
ul#items li{
list-style:none;
float:left;
width:200px;
height:400px;
overflow:hidden;
margin:0 0 0 1px;
background:#999;
color:#000;
text-align:left;
padding: 5px;
}
/* элементы блока */
ul#items li img {float: left; margin-right: 5px;}
ul#items li div {text-align: center; font-weight:bold;}
ul#items li div a {color: #660000;}
/* кнопки переключения */
ol#pagination{overflow:hidden;}
ol#pagination li{color: #00ffff; font-size: 14px;
float:left;
list-style:none;
cursor:pointer;
margin:0 0 0 .5em;
}
ol#pagination li.current{color:#f00;font-weight:bold;}
</style>

Основное всё подписано. Программирование скрипта и задание его параметров осуществляеться в скрипте perekl_na4.js. Там же Вы можете посмотреть всё параметры скрипта задающиеся програмным путем и их значения по умолчанию.

Внутри тега <BODY> - </BODY> там где у Вас будет переключатель.

<div style="width: 847px;">
<ul id="items">
    <li><img src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_bloki/1052/2.png"><div><a href="http://webkpb.ucoz.ru" title="Открыть сайт" target="_blank">WebKPB</a></div>
	Большая библиотека Flash всевозможного назначения. Для удобства поиска и работы все Flash сведены в тематический каталог.<br> Каждую Flash можно посмотреть в работе.<br> К каждой Flash есть fla исходник. 
	</li>
    <li><img src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_bloki/1052/2.png"><div><a href="http://kpbshablon.ucoz.ru" title="Открыть сайт" target="_blank">KPBshablon</a></div>
	Сайт посвящен современным, креативным дизайнам и их шаблонам для движка UCOZ.<br> Отдельные разделы посвящены сайтам-визиткам и сайтам с Flash элементами.<br> Имеется раздел посвящен элементам дизайна и оформления сайтов. Таким как галереи, слайдеры, переключатели и т.д.</li>
    <li><img src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_bloki/1052/2.png"><div><a href="http://kpbwebstudio.narod.ru" title="Открыть сайт" target="_blank">KPBwebStudio</a></div>
	Это моя личная WEBстудия. Здесь Вы можете посмотреть некоторые мои работы. Ознакрмиться с перечнем оказываемых мною услуг и ценами на них.<br> Сайт создан полностью по Flash тезнологии.</li>
    <li><img src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_bloki/1052/2.png"><div><a href="http://skriptkpbstudio.ucoz.ru" title="Открыть сайт" target="_blank">ScriptKPBstudio</a></div>
	Этот сайт посвящен JavaScropt, jQuery, CSS, Mootools, Prototype и т.д.<br> Для удобства поиска и работы все скрипты помещены в тематический каталог.<br> Все скрипты можно посмотреть в работе.<br> К каждому есть описание и инструкция по установке.<br> Все скрипты распространяются обсолютно бесплатно.</li>
    <li>Page 5</li>
    <li>Page 6</li>
    <li>Page 7</li>
    <li>Page 8</li>
    <li>Page 9</li>
    <li>Page 10</li>
    <li>Page 11</li>
    <li>Page 12</li>
    <li>Page 13</li>
    <li>Page 14</li>
 <li>Page 15</li>
    <li>Page 16</li>
    <li>Page 17</li>
    <li>Page 18</li>
    <li>Page 19</li>
    <li>Page 20</li>
    <li>Page 21</li>
    <li>Page 22</li>
    <li>Page 23</li>
    <li>Page 24</li>
</ul>
</div>

Здесь прописывается структура переключателя и колличество информационных блоков. Колличество блоков в переключателе на Ваше усмотрение. В блоках можно размещать любые теги, т.е. всё что Вам нужно. Можно задавать нужное Вам колличество прокручиваемых блоков при переключении от 1 до любого(в примере 4). Автоматический режим переключения через заданной временной интервал и т.д. Как указано выше все эти параметры задаются в скрипте perekl_na4.js.

И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу.
Вы экономите место и время.

Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера].
Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.