<script language="javascript" type="text/javascript" src="script/mootools-1.2.1-core.js"></script>    
    <script language="javascript" type="text/javascript" src="script/mootools-1.2-more.js"></script>    
    <script language="javascript" type="text/javascript" src="script/slideitmoo-1.1.js"></script>

<script language="javascript" type="text/javascript">    
window.addEvents({    
'domready': function(){    
/* thumbnails example , div containers */    
new SlideItMoo({    
overallContainer: 'SlideItMoo_outer',    
elementScrolled: 'SlideItMoo_inner',    
thumbsContainer: 'SlideItMoo_items',    
itemsVisible:3,    
itemsSelector: '.SlideItMoo_element',    
itemWidth: 158,    
showControls:1});    

}    
});    
</script>

<div id="SlideItMoo_outer">    
<div id="SlideItMoo_inner">    
<div id="SlideItMoo_items">    
<div class="SlideItMoo_element"></p>    
    

<strong>1: Address</strong>    
    <a href="http://www.ruseller.com/" target="_blank">    
    <img src="gallery/thumb/address_128.png" /></a>    
    Nam porta tellus ac urna    
    </div>    
    <div class="SlideItMoo_element">    
    <strong>2: Ads</strong>    
    <a href="http://www.ruseller.com/" target="_blank">    
    <img src="gallery/thumb/ads_128.png" /></a></p>    
    

Praesent pellentesque eros nec nisl    
    </div>    
    <div class="SlideItMoo_element">    
    <strong>3: Calendar</strong>    
    <a href="http://www.ruseller.com/" target="_blank">    
    <img src="gallery/thumb/calendar_128.png" /></a>    
    Vestibulum eleifend scelerisque purus    
    </div>    
    <div class="SlideItMoo_element"></p>    
    

<strong>4: Comment</strong>    
    <a href="http://www.ruseller.com/" target="_blank">    
    <img src="http://www.ruseller.com/" /></a>    
    Felis nulla iaculis lacus    
    </div>    

    <div class="SlideItMoo_element">    
    <strong>5: Home</strong>    
    <a href="http://www.ruseller.com/" target="_blank"></p>    
    

<img src="gallery/thumb/home_128.png" /></a>    
    Quisque neque. Donec quam ante, pulvinar vitae    
    </div>    

    <div class="SlideItMoo_element">    
    <strong>6: Mail</strong>    
    <a href="http://www.ruseller.com/" target="_blank">    
    <img src="gallery/thumb/mail_128.png" /></a>    
    Suspendisse sodales turpis. Aliquam lectus    
    </div></p>    
    

<div class="SlideItMoo_element">    
    <strong>7: News</strong>    
    <a href="http://www.ruseller.com/" target="_blank">    
    <img src="gallery/thumb/news_128.png" /></a>    
    Praesent pellentesque eros nec nisl    
    </div>    
    <div class="SlideItMoo_element">    
    <strong>8: RSS</strong></p>    
    

<a href="http://www.ruseller.com/" target="_blank">    
    <img src="gallery/thumb/rss2_128.png" /></a>    
    Nam porta tellus ac urna    
    </div>    
    <div class="SlideItMoo_element">    
    <strong>9: Search</strong>    
    <a href="http://www.ruseller.com/" target="_blank">    
    <img src="gallery/thumb/search_128.png" /></a>    
    Praesent pellentesque eros nec nisl    
    </div></p>    
    

<div class="SlideItMoo_element">    
    <strong>10: Sign</strong>    
    <a href="http://www.ruseller.com/" target="_blank">    
    <img src="gallery/thumb/sign_128.png" /></a>    
    Vestibulum eleifend scelerisque purus    
    </div>    
    </div>    
    </div>    
    </div>  

<script language="javascript" type="text/javascript">    
window.addEvents({    
'domready': function(){    
       
    /* banner rotator example */    
    new SlideItMoo({overallContainer: 'SlideItMoo_banners_outer',    
    elementScrolled: 'SlideItMoo_banners_inner',    
    thumbsContainer: 'SlideItMoo_banners_items',    
    itemsVisible:1,    
    itemsSelector: '.banner',    
    showControls:0,    
    autoSlide: 3000,    
    transition: Fx.Transitions.Bounce.easeOut,    
    duration: 1800,    
    direction:-1});    

    }    
    });    
    </script>

<div id="SlideItMoo_banners_outer">    
<div id="SlideItMoo_banners_inner">    
<div id="SlideItMoo_banners_items">    
<a class="banner" href="#" target="_blank"><img src="banners/1.jpg" width="557" height="134" /></a>    
<a class="banner" href="#" target="_blank"><img src="banners/2.jpg" width="557" height="134" /></a>    
<a class="banner" href="#" target="_blank"><img src="banners/3.jpg" width="557" height="134" /></a>    
</div>    
</div>    
</div>

Стили оформления находятся во внешнем файле (см. пример 1)   

3. Ротатор с текстом и изображениями   

Нам понадобится:   

а) Внешние файлы с Mootools - см. 1 пример.   

б) Javascript код с настройками в начале документа сразу после верхнего кода также между <head></head>.

<script language="javascript" type="text/javascript">    
window.addEvents({    
'domready': function(){    
/* thumbnails example , div containers */    
    /* info rotator example */    
    new SlideItMoo({overallContainer: 'SlideItMoo_info_outer',    
    elementScrolled: 'SlideItMoo_info_inner',    
    thumbsContainer: 'SlideItMoo_info_items',    
    itemsVisible:1,    
    itemsSelector: '.info_item',    
    itemWidth:557,    
    showControls:0,    
    autoSlide: 5000,    
    transition: Fx.Transitions.Sine.easeIn,    
    duration: 1800,    
    direction:1});    
    }    
    });    
    </script>

<div id="SlideItMoo_info_outer">    
<div id="SlideItMoo_info_inner">    
<div id="SlideItMoo_info_items">    
<div class="info_item">    
    <a href="http://www.php-help.ro/php-tutorials/javascript-chained-select-with-mootools-12/"><img src="info_images/chained_select.jpg" /></a>    
    <h1>Chained drop down boxes, the neat way</h1>    
    Ever had a problem displaying the relationships of hierarchical data? Tons of drop downs displaying data according to what the user selected? Not any more. ChainedSelect comes to your aid with a neat display of your data. Easy to use and to implement.    
    <a href="http://www.php-help.ro/php-tutorials/javascript-chained-select-with-mootools-12/">more details</a>    
    </div>    
    <div class="info_item">    
    <h1><a href="http://www.php-help.ro/mootools-12-javascript-examples/sifr-titles-generated-using-mootools-12/"><img src="info_images/moo_sifr-300x154.jpg" /></a>MooTools and SiFR - cool, antialiased text</h1>    
    Tired of the same boring look of your text? With the help of this script, your titles will look neat! Try it out.    
    <a href="http://www.php-help.ro/mootools-12-javascript-examples/sifr-titles-generated-using-mootools-12/">more details</a>    
    </div>    
    <div class="info_item">    
    <a href="http://www.php-help.ro/mootools-12-javascript-examples/moohover-css-hover-mootools-way/"><img src="info_images/moohover-300x139.jpg" /></a>    
    <h1>MooHover - cool looking links and buttons</h1>    
    How about some cool hover effects on your links and buttons? You want it? You got it!    
    <a href="http://www.php-help.ro/mootools-12-javascript-examples/moohover-css-hover-mootools-way/">more details</a>    
    </div>    
    <div class="info_item">    
    <a href="http://www.php-help.ro/mootools-12-javascript-examples/mootools-12-javascript-image-zoom/"><img src="info_images/zoomer-225x300.jpg" /></a>    
    <h1>MooTools image zoom</h1>    
    Got really large images that your client wants you to use? No room in the page for them? Need a solution? Got one! Go get it tiger!    
    <a href="http://www.php-help.ro/mootools-12-javascript-examples/mootools-12-javascript-image-zoom/">more details</a>    
    </div>    
    </div>    
    </div>    
    </div>