Эффекты на основе Java Script

Горизонтальная прокрутка блоков информации

Sites

Пример организации блока информации.

Или любая другая нужная Вам информация.

Files

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Editor

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Preview

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CSS

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Terminal

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. And some sites

Books

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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

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

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

<STYLE type=text/css>
/* верхняя панель навигации */
#slider {width: 420px; margin: 0 auto; position: relative;}
/* зона скроллинга */
.scroll {height: 250px; width: 420px; overflow: auto; overflow-x: hidden; position: relative; clear: left;     background: #FFFFFF url(http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_bloki/922/img/content_pane-gradient.gif) repeat-x scroll left bottom;}
.scrollContainer div.panel {padding: 20px; height: 210px; width: 380px;}
/* низ */
#shade {background: #EDEDEC url(http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_bloki/922/img/shade1.jpg) no-repeat 0 0; height: 50px;}
/* стиль верхних кнопок навигации во всех режимах */
ul.navigation {list-style: none; margin: 0; padding: 0; padding-bottom: 5px;}
ul.navigation li {display: inline; margin-right: 3px;}
ul.navigation a {padding: 5px; color: #0000ff; text-decoration: none; FONT-WEIGHT: bold;}
ul.navigation a:hover {background-color: #f6f6f6; color: #000;}
ul.navigation a:active {background-color: #f6f6f6; color: #0000ff;}
ul.navigation a.selected {background-color: #fff;}
ul.navigation a:focus {outline: none;}
/* стрелки навигации */
.scrollButtons {position: absolute; top: 150px; cursor: pointer;}
/* положение кнопок */
.scrollButtons.left {left: -20px;}
.scrollButtons.right {right: -20px;}
.hide {display: none;}
</STYLE>
<script type="text/javascript" src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_bloki/922/js/jquery.js"></script>
<script src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_bloki/922/js/jquery_002.js" type="text/javascript"></script>
<script src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_bloki/922/js/jquery_003.js" type="text/javascript" charset="utf-8"></script>
<script src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_bloki/922/js/jquery_004.js" type="text/javascript" charset="utf-8"></script>
<script src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_bloki/922/js/coda-slider1.js" type="text/javascript" charset="utf-8"></script>

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

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

<div id="slider">    
            <ul class="navigation">                                   
                <li><a class="selected" href="#sites">Sites</a></li>
                <li><a class="" href="#files">Files</b></a></li>
                <li><a class="" href="#editor">Editor</a></li>
                <li><a class="" href="#preview">Preview</a></li>
                <li><a class="" href="#css">CSS</a></li>
                <li><a class="" href="#terminal">Terminal</a></li>
                <li><a class="" href="#books">Books</a></li>
            </ul>
            
            <img class="scrollButtons left" 
src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_bloki/922/img/scroll_left.jpg"><div style="overflow: hidden;" 
class="scroll">
                <div style="width: 440px;" class="scrollContainer">
                
                <div style="float: left; position: relative;" 
class="panel" id="sites"><h2>Sites</h2><p>Lorem ipsum dolor sit amet, 
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
dolore eu fugiat nulla pariatur.<img src="esempio_fr_files/scroll_left.jpg"> Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
                <div style="float: left; position: relative;" 
class="panel" id="files"><h2>Files</h2><p>Lorem ipsum dolor sit amet, 
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
dolore eu fugiat nulla pariatur.<input type=text> Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
                <div style="float: left; position: relative;" 
class="panel" id="editor"><h2>Editor</h2><p>Lorem ipsum dolor sit amet, 
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
dolore eu fugiat nulla pariatur.<input type=submit> Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
                <div style="float: left; position: relative;" 
class="panel" id="preview"><h2>Preview</h2><p>Lorem ipsum dolor sit 
amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut 
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
                <div style="float: left; position: relative;" 
class="panel" id="css"><h2>CSS</h2><p>Lorem ipsum dolor sit amet, 
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
                <div style="float: left; position: relative;" 
class="panel" id="terminal"><h2>Terminal</h2><p>Lorem ipsum dolor sit 
amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut 
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 <a href="#sites">And some sites</a></p></div>
                <div style="float: left; position: relative;" 
class="panel" id="books"><h2>Books</h2><p>Lorem ipsum dolor sit amet, 
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
                </div>
            </div><img class="scrollButtons right" 
src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_bloki/922/img/scroll_right.jpg">

Впринципе структура расписана. В блоки информации можно вставлять всё что угодно: картинки, формы, таблички, кнопки, flash и т.д. Колличество блоков на Ваше усмотрение.

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

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