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

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

Сэндвич с томатами

Ingredients
- 1 bagel, split and toasted
- 2 tablespoons cream cheese
- 1 roma (plum) tomatoes, thinly sliced
- salt and pepper to taste
- 4 leaves fresh basil
Принимаю заказы на изготовление Flash любого назначения: шапки, заставки, банеры, слайдеры, галереи, меню и т.д.
Делаю качественно и дёшево!

И целиком Flash сайтов-визиток

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

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

<STYLE type=text/css>
/* стили содержимого страниц(если нужно) */
/* страница 2 id=textSlide */
#textSlide {PADDING-RIGHT: 30px; PADDING-LEFT: 30px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; color: #fff;}
#textSlide H3 {FONT: 20px Georgia, Serif}
#textSlide H4 {MARGIN: 10px 0px; FONT: 15px Georgia, Serif; TEXT-TRANSFORM: uppercase}
#textSlide UL {MARGIN: 0px 0px 0px 25px; LIST-STYLE-TYPE: disc}
#textSlide UL LI {DISPLAY: list-item}
/* страница 5 id=quoteSlide */
#quoteSlide {PADDING-RIGHT: 30px; PADDING-LEFT: 30px; PADDING-BOTTOM: 30px; PADDING-TOP: 30px}
#quoteSlide BLOCKQUOTE {MARGIN: 0px 0px 10px; FONT: italic 24px/1.5 Georgia, Serif; COLOR: #000; TEXT-ALIGN: center}
#quoteSlide P {TEXT-ALIGN: center}
/* стили и параметры самого slidera */
.anythingSlider {MARGIN: 0px auto 15px; WIDTH: 760px; POSITION: relative; HEIGHT: 360px}
.anythingSlider .wrapper {LEFT: 0px; MARGIN: 0px 40px; OVERFLOW: auto; WIDTH: 680px; POSITION: absolute; TOP: 0px; HEIGHT: 341px}
.anythingSlider .wrapper UL {BORDER-TOP: #e0a213 3px solid; BACKGROUND: #888; LEFT: -40px; MARGIN: 0px; WIDTH: 9999px; BORDER-BOTTOM: #e0a213 3px solid; LIST-STYLE-TYPE: none; POSITION: absolute; TOP: 0px}
.anythingSlider .wrapper UL UL {BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px; OVERFLOW: visible; WIDTH: auto; POSITION: static; BORDER-RIGHT-WIDTH: 0px}
.anythingSlider .wrapper UL UL LI {BACKGROUND: none transparent scroll repeat 0% 0%; FLOAT: none; WIDTH: auto; HEIGHT: auto}
.anythingSlider UL LI {PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 680px; PADDING-TOP: 0px; HEIGHT: 317px}
/* стрелки прокрутки */
.anythingSlider .arrow {DISPLAY: block; BACKGROUND: url(http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/904/images/arrows1.png) no-repeat 0px 0px; WIDTH: 67px; CURSOR: pointer; TEXT-INDENT: -9999px; POSITION: absolute; TOP: 65px; HEIGHT: 200px}
.anythingSlider .forward {BACKGROUND-POSITION: 0px 0px; RIGHT: -27px}
.anythingSlider .back {BACKGROUND-POSITION: -67px 0px; LEFT: -27px}
.anythingSlider .forward:hover {BACKGROUND-POSITION: 0px -200px}
.anythingSlider .back:hover {BACKGROUND-POSITION: -67px -200px}
/* клавиши выбора и переключения страници */
#thumbNav {POSITION: relative; TOP: 323px; TEXT-ALIGN: center}
#thumbNav A {PADDING-RIGHT: 8px; DISPLAY: inline-block; PADDING-LEFT: 8px; BACKGROUND: url(http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/904/images/cellshade.png) #c58b04 repeat-x; PADDING-BOTTOM: 2px; MARGIN: 0px 5px 0px 0px; COLOR: black; PADDING-TOP: 2px; HEIGHT: 18px; TEXT-ALIGN: center; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px}
#thumbNav A:hover {BACKGROUND-IMAGE: none}
#thumbNav A.cur {BACKGROUND: #e0a213}
/* клавиша Старт-Стоп */  
#start-stop {PADDING-RIGHT: 5px; PADDING-LEFT: 5px; RIGHT: 45px; BACKGROUND: url(http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/904/images/cellshade.png) green repeat-x; PADDING-BOTTOM: 2px; WIDTH: 40px; COLOR: black; PADDING-TOP: 2px; POSITION: absolute; TOP: 323px; TEXT-ALIGN: center; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px;}
.playing#start-stop {BACKGROUND-COLOR: red}
#start-stop:hover {BACKGROUND-IMAGE: none}
</STYLE>
<SCRIPT src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/904/js/jquery-1.3.2.min.js" type=text/javascript></SCRIPT>
<SCRIPT src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/904/js/jquery.easing.1.2.js" type=text/javascript></SCRIPT>
<SCRIPT src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/904/js/jquery.anythingslider.js" type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
            function formatText(index, panel) {
		  return index + "";
	    }
            $(function () {
            $('.anythingSlider').anythingSlider({
                easing: "easeInOutExpo",
                autoPlay: true,
                delay: 3000,                    // интервал между сменами картинок
                startStopped: false,            // если false - то при загрузке сразу включается автоматический режим, если true - то при загрузке ручной режим и чтобы включить автоматический надо нажать кнопку "Старт"
                animationTime: 600,             // скорость смены картинок
                hashTags: true,
                buildNavigation: true,
        		pauseOnHover: true,
        		startText: "Старт",             // название кнопки Старт
		        stopText: "Стоп",               // название кнопки Стоп
		        navigationFormatter: formatText
            });
            $("#slide-jump").click(function(){
                $('.anythingSlider').anythingSlider(6);
            });
        });
    </SCRIPT>

Что посчитал нужным, я подписал. Думаю, Вы легко разберётесь.

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

<DIV class=anythingSlider>
<DIV class=wrapper>
<UL>
  <LI><IMG alt="" src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/904/images/slide-civil-1.jpg"> </LI>     
  <LI>                                                          
  <DIV id=textSlide><IMG style="FLOAT: right; MARGIN: 0px 0px 2px 10px" 
  alt="tomato sandwich" src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/904/images/251356.jpg"> 
  <H3>Сэндвич с томатами</H3>
  <H4>Ingredients</H4>
  <UL>
    <LI>1 bagel, split and toasted 
    <LI>2 tablespoons cream cheese 
    <LI>1 roma (plum) tomatoes, thinly sliced 
    <LI>salt and pepper to taste 
    <LI>4 leaves fresh basil </LI></UL></DIV></LI>
  <LI><IMG alt="" src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/904/images/slide-env-1.jpg"> </LI>         
  <LI><IMG alt="" src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/904/images/slide-civil-2.jpg"> </LI>       
  <LI>                                                            
  <DIV id=quoteSlide>
  <BLOCKQUOTE>Принимаю заказы на изготовление Flash любого назначения: шапки, заставки, банеры, слайдеры, галереи, меню и т.д.<br> Делаю дёшево и качественно!<div style="border: #ffff00 1px solid; width: 470px;">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="470" height="60">
<param name="src" value="http://skriptkpbstudio.ucoz.ru/flash/studio_kruglaj_ok_mal24.swf" />
<PARAM NAME="bgcolor" VALUE="#444444">
<embed name="gallery" type="application/x-shockwave-flash" src="http://skriptkpbstudio.ucoz.ru/flash/studio_kruglaj_ok_mal24.swf" width="470" height="60"></embed></object></div></BLOCKQUOTE>
  </DIV></LI>
  <LI><IMG alt="" src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_slajder/904/images/slide-env-2.jpg">               
</LI></UL></DIV></DIV>

Здесь тоже всё подписано и должно быть всё понятно. Колличество страниц на Ваше усмотрение. На них может содержаться любая информация. Если нужно распологать текст, картинки или другие элементы, расположенные на страничке произвольно, то это можно делать в теге DIV через атрибут style (пример: страничка 2 и 5).

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

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