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

Варианты переключателей - галерей с разными меню

Demo 1:

4-е элемента контента, отделенных друг от друга элементом DIV.
1 элемент контента отображается на странице.
Два меню пагинации в div определении.

Prev Next

Пример открытия 3-й вкладки из вне переключателя. Открыть вкладку 3

Demo 2:

6 элементов контента, отделенных друг от друга тегом "P".
2 элемента контент отображаются на странице.
Запоминание конечнрго состояния включено.
2-а меню.

RSS Display Boxes Credits: Dynamic Drive
Tme to get your RSS on! Using Ajax, this script makes it easy to display RSS feeds from other sites inside DIV containers, by communicating with a versatile PHP RSS parser called "Simplepie". Each RSS box can be independently tailored, from the RSS feed to fetch, how many items to show (and whether to paginate them), to what portions of each entry (just the "title", or "title" plus "description" etc) to display.

Interstitial Content Box Credits: Dynamic Drive
An interstitial is a container that appears over an entire webpage intermittingly to display content in an eye catching way. This is a Interstitial Box script that uses Ajax to fetch and display the contents of external pages on your server as an interstitial.

Omni Slide Menu Credits: John Scheuer
Omni Slide Menu is an super versatile slideout menu that reacts to the mouse hovering over and out of it. It can be positioned to the left, top, or right edge of the browser window, supports static positioning, plus multiple instances of the same menu on a page and more. Very cool.

Custom Cursor Script II (Crosshair mouse cursor) Credits: Webtoolkit.info
This script adds a custom cursor to your webpage using an interchangeable image. The result is a custom mouse cursor that can be modified in anyway your graphic skills take you. Elegant and non intrusive effect!

Drop Down Tab Menu Credits: Dynamic Drive
This is a lean CSS tab menu that supports a 2nd level drop down menu for any of its tabs. It supports subtle yet helpful features such as the ability to set a default selected tab, hide any element on the page (ie: a form field) when the menu drops down etc.

Featured Content Slider Credits: Dynamic Drive
Featured Content Slider makes a slideshow out of arbitrary content on your page, so users can manually select a content to see or have them rotated automatically. Pagination links let the user quickly pick a content to show. Each content is simply normal HTML wrapped in DIV tags for effortless integration.

F Prev Next L

Demo 3:

6 элементов контента, отделенных друг от друга тегом "P".
2 элемента контент отображаются на странице.
круговое переключение блоков.
1-блок по умолчанию.

Demo 4:

4 элементов контента, отделенных друг от друга тегом "DIV".
1-блок по умолчанию.
меню class="flatview" текстовое

< >

Demo 5:

4 элементов контента, отделенных друг от друга тегом "DIV".
3-блок по умолчанию.
меню текстовое

Prev Next

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

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

/*Style for "disabled" previous or next link (Крайние не активные кнопки)*/
.paginationstyle a.disabled, .paginationstyle a.disabled:hover{ 
background-color: white;
cursor: default;
color: #929292;
border-color: transparent;
}
/*Pagination Image links style (class="imglinks") (Изображение нумерации страниц связывает стиль (класс = "imglinks")) */
.paginationstyle a.imglinks{ 
border: 0;
padding: 0;
}
.paginationstyle a.imglinks img{
vertical-align: bottom;
border: 0;
}
.paginationstyle a.imglinks a:hover{
background: none;
}
/*Pagination div "flatview" links style ( внутренняя нумерация страниц)*/
.paginationstyle .flatview a:hover, .paginationstyle .flatview a.selected{ 
color: #000;
background-color: yellow;
}

</style>

Всё подписано, проблем быть не должно.

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

<h3>Demo 1:</h3>

</div>

<div id="gallerypaginate" class="paginationstyle">
<a href="#" rel="previous">Prev</a>
<span class="flatview"></span> 
<a href="#" rel="next">Next</a>
</div>

<script type="text/javascript">

var gallery=new virtualpaginate({
	piececlass: "virtualpage", //class of container for each piece of content (класс контейнера для каждой части содержания)
	piececontainer: 'div', //container element type (ie: "div", "p" etc)    (контейнерный тип элемента (т.е.: "div", "p" и т.д.))
	pieces_per_page: 1, //Pieces of content to show per page (1=1 piece, 2=2 pieces etc)    (Часть содержания показываемая на страничке (1=1 элемент виден на страничке, 2=2-а и т.д.))
	defaultpage: 0, //Default page selected (0=1st page, 1=2nd page etc). Persistence if enabled overrides this setting. (Отображаемая страница по умолчанию (0=1st страница, 1=2nd страница и т.д.). Постоянство, если позволено отвергает это урегулирование.)
	wraparound: false, // Круговой режим. Т.е., для данного примера, если true то при движении влево после 1-го будет 4-й, если вправо после 4-го будет 1-й. Если false при движении влево будет остановка на 1-м, а в право на 4-м.
	persist: false //Remember last viewed page and recall it when user returns within a browser session?  (Запоминать состояние переключателя при уходе пользователя со странички и востанавливать его при новом заходе в пределах сессии браузера?)
})

gallery.buildpagination(["gallerypaginate", "gallerypaginate2"])  // идентификаторы групп управления. В данном случае их 2-е, т.е. кнопки управления сверху и снизу

</script>   <br>
  Пример открытия 3-й вкладки из вне переключателя.
 <a href="javascript:gallery.navigate(2)">Go to 3rd page within 
"gallery"</a>

<h3>Demo 2:</h3>

<div id="scriptspaginate2" class="paginationstyle" style="width: 
400px"></div>

<p class="virtualpage2 hidepiece">
<b><a href="#">RSS Display Boxes</a></b> 
<span class="credits">Credits: Dynamic 
Drive</span><br>
Tme to get your RSS on! Using Ajax, this script makes it easy to display
 RSS feeds from other sites inside DIV containers, by communicating with
 a versatile PHP RSS parser called "Simplepie". Each RSS box can be 
independently tailored, from the RSS feed to fetch, how many items to 
show (and whether to paginate them), to what portions of each entry 
(just the "title", or "title" plus "description" etc) to display.
</p>

<p class="virtualpage2 hidepiece">
<b><a href="#">Interstitial Content Box</a></b> 
<span class="credits">Credits: Dynamic 
Drive</span><br>
An interstitial is a container that appears over an entire webpage 
intermittingly to display content in an eye catching way. This is a 
Interstitial Box script that uses <b>Ajax</b> to fetch and 
display the contents of external pages on your server as an 
interstitial.
</p>

<p class="virtualpage2 hidepiece">
<b><a href="#">Omni Slide Menu</a></b> <span 
class="credits">Credits: John Scheuer</span><br>
Omni Slide Menu is an super versatile slideout menu that reacts to the 
mouse hovering over and out of it. It can be positioned to the left, 
top, or right edge of the browser window, supports static positioning, 
plus multiple instances of the same menu on a page and more. Very cool.
</p>

<p class="virtualpage2 hidepiece">
<b><a href="#">Custom Cursor Script II (Crosshair mouse 
cursor)</a></b> <span class="credits">Credits: 
Webtoolkit.info</span><br>
This script adds a custom cursor to your webpage using an 
interchangeable image. The result is a custom mouse cursor that can be 
modified in anyway your graphic skills take you. Elegant and non 
intrusive effect!
</p>

<p class="virtualpage2 hidepiece">
<b><a href="#">Drop Down Tab Menu</a></b> 
<span class="credits">Credits: Dynamic 
Drive</span><br>
This is a lean CSS tab menu that supports a 2nd level drop down menu for
 any of its tabs. It supports subtle yet helpful features such as the 
ability to set a default selected tab, hide any element on the page (ie:
 a form field) when the menu drops down etc.
</p>

<p class="virtualpage2 hidepiece">
<b><a href="#">Featured Content Slider</a></b> 
<span class="credits">Credits: Dynamic 
Drive</span><br>
Featured Content Slider makes a slideshow out of arbitrary content on 
your page, so users can manually select a content to see or have them 
rotated automatically. Pagination links let the user quickly pick a 
content to show. Each content is simply normal HTML wrapped in DIV tags 
for effortless integration.
</p>

</div>

<div id="scriptspaginate" class="paginationstyle" style="width: 
400px">
<a href="#" title="Первая вклатка" rel="first">F</a> <a href="#" title="Назад" 
rel="previous">Prev</a> <span class="paginateinfo" 
style="margin: 0 30px; font-weight: bold"></span> <a 
href="#" title="Вперёд" rel="next">Next</a> <a href="#" title="Последняя вкладка" 
rel="last">L</a>
</div>

<script type="text/javascript">

var newscripts=new virtualpaginate({
	piececlass: "virtualpage2",
	piececontainer: 'p', //Let script know you're using "p" tags as separator (instead of default "div") (контейнерный тип элемента (т.е.: "div", "p" и т.д.) в данном примере P)
	pieces_per_page: 2,
	defaultpage: 0,
	wraparound: false,
	persist: true
})

newscripts.buildpagination(["scriptspaginate", "scriptspaginate2"])

</script>

<h3>Demo 3:</h3>

<div id="listingpaginate" class="paginationstyle">
<a href="#" rel="previous" class="imglinks"><img 
src="http://skriptkpbstudio.ucoz.ru/demo_srt/perekluchat/746/35.gif" 
/></a> <select></select> <a href="#" rel="next" 
class="imglinks"><img 
src="http://skriptkpbstudio.ucoz.ru/demo_srt/perekluchat/746/36.gif" 
/></a>
</div>

<p class="virtualpage3 hidepiece">
<b><a href="#">RSS Display Boxes</a></b> 
<span class="credits">Credits: Dynamic 
Drive</span><br>
Tme to get your RSS on! Using Ajax, this script makes it easy to display
 RSS feeds from other sites inside DIV containers, by communicating with
 a versatile PHP RSS parser called "Simplepie". Each RSS box can be 
independently tailored, from the RSS feed to fetch, how many items to 
show (and whether to paginate them), to what portions of each entry 
(just the "title", or "title" plus "description" etc) to display.
</p>

<p class="virtualpage3 hidepiece">
<b><a href="#">Interstitial Content Box</a></b> 
<span class="credits">Credits: Dynamic 
Drive</span><br>
An interstitial is a container that appears over an entire webpage 
intermittingly to display content in an eye catching way. This is a 
Interstitial Box script that uses <b>Ajax</b> to fetch and 
display the contents of external pages on your server as an 
interstitial.
</p>

<p class="virtualpage3 hidepiece">
<b><a href="#">Omni Slide Menu</a></b> <span 
class="credits">Credits: John Scheuer</span><br>
Omni Slide Menu is an super versatile slideout menu that reacts to the 
mouse hovering over and out of it. It can be positioned to the left, 
top, or right edge of the browser window, supports static positioning, 
plus multiple instances of the same menu on a page and more. Very cool.
</p>

<p class="virtualpage3 hidepiece">
<b><a href="#">Custom Cursor Script II (Crosshair mouse 
cursor)</a></b> <span class="credits">Credits: 
Webtoolkit.info</span><br>
This script adds a custom cursor to your webpage using an 
interchangeable image. The result is a custom mouse cursor that can be 
modified in anyway your graphic skills take you. Elegant and non 
intrusive effect!
</p>

<p class="virtualpage3 hidepiece">
<b><a href="#">Drop Down Tab Menu</a></b> 
<span class="credits">Credits: Dynamic 
Drive</span><br>
This is a lean CSS tab menu that supports a 2nd level drop down menu for
 any of its tabs. It supports subtle yet helpful features such as the 
ability to set a default selected tab, hide any element on the page (ie:
 a form field) when the menu drops down etc.
</p>

<p class="virtualpage3 hidepiece">
<b><a href="#">Featured Content Slider</a></b> 
<span class="credits">Credits: Dynamic 
Drive</span><br>
Featured Content Slider makes a slideshow out of arbitrary content on 
your page, so users can manually select a content to see or have them 
rotated automatically. Pagination links let the user quickly pick a 
content to show. Each content is simply normal HTML wrapped in DIV tags 
for effortless integration.
</p>

</div>

<script type="text/javascript">

var whatsnew=new virtualpaginate({
	piececlass: "virtualpage3",
	piececontainer: 'p', //Let script know you're using "p" tags as separator (instead of default "div") 
	pieces_per_page: 2,
	defaultpage: 0,
	wraparound: false,
	persist: true
})

whatsnew.buildpagination(["listingpaginate"])

</script>

<h3>Demo 4:</h3>

<div style="width: 300px; height: 230px;">

</div>

<div id="galleryalt" class="paginationstyle" style="width: 300px; text-align: left">
<a href="#" rel="previous"><</a> <span class="flatview"></span> <a href="#" rel="next">></a>
</div>

<script type="text/javascript">

var gallery4=new virtualpaginate({
	piececlass: "virtualpage4",
	piececontainer: 'div',
	pieces_per_page: 1,
	defaultpage: 0,
	wraparound: false,
	persist: true
})
// мнемоника ([идентификатор группы кнопок управления],[названия кнопок управления через запятую]) в данном случае группа управления одна
gallery4.buildpagination(["galleryalt"], ["castle", "park", "harvest", "country"])

</script>

<h3>Demo 5:</h3>

</div>

<div id="galleryselect" class="paginationstyle">
<a href="#" rel="previous">Prev</a> <select style="width: 120px"></select> <a href="#" rel="next">Next</a>
</div>

<script type="text/javascript">

var gallery5=new virtualpaginate({
	piececlass: "virtualpage5",
	piececontainer: 'div',
	pieces_per_page: 1,
	defaultpage: 0,
	wraparound: false,
	persist: true
})

gallery5.buildpagination(["galleryselect"], ["castle", "park", "harvest", "country"])

</script>

Здесь приведено 5-ь разных примеров создания меню переключения страниц переключателей-галерей и 5-ь вариантов переключателей-галерей к ним. Всё достаточно подробно описано. У Вас проблем, думаю, быть не должно. Вы будете использовать только устраивающий Вас переключатель-галерею. Переключение содержимого переключателей-галерей производится в ручную, но при необходимости можно сделать и автоматические режимы.

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

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