Criando um Slideshow usando Mootools - Tutorial Mootools
Antes de tudo...Recomendo assinar meu Feed RSS!
, então bora manda bala que esse tutorial esta demais, muito bom mesmo:
O slideshow utiliza o o script criado pelo site creativeponey e, este script só funciona em Mootools 1.11.
Demonstração / Download dos Arquivos
HTML
Vamos colocar logo tudo de uma vez para agilizar o processo
<script type=”text/javascript” src=”/js/mootools.js”></script>
<script type=”text/javascript” src=”/js/compatmootools.js”></script>
<script type=”text/javascript” src=”/js/slider.js”></script><script type=”text/javascript” >
window.addEvent(’load’, function () {
slidingtabs = new SlidingTabs(’feature_buttons’, ’slider_wrap’);
$(’previous’).addEvent(’click’, slidingtabs.previous.bind(slidingtabs));
$(’next’).addEvent(’click’, slidingtabs.next.bind(slidingtabs));
});
</script><link rel=”stylesheet” href=”/style.css” type=”text/css” media=”screen” />
</head>
<body>
<div id=”feature_wrap”>
<div id=”feature_title”>weblouca slide</div>
<a title=”Previous” id=”previous”>anterior</a><a title=”Next” id=”next”>proximo</a>
<div id=”slider_wrap”>
<div id=”slider”>
<div><a href=”/link” class=”feature”><img src=’img1.jpg’ alt=’img1′ /></a></div>
<div><a href=”/link” class=”feature”><img src=’img2.jpg’ alt=’img2′ /></a></div>
<div><a href=”/link” class=”feature”><img src=’img3.jpg’ alt=’img3′ /></a></div>
<div><a href=”/link” class=”feature”><img src=”/img4.jpg” alt=”img4″/></a></div>
<div><a href=”/link” class=”feature”><img src=”/img5.jpg” alt=”img5″/></a></div>
</div>
</div>
<ul id=”feature_buttons”>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
Acabou 
.É muito simples, nõa tem segredo, agora so falta você estilizar e deixar com a sua cara ou com a cara do cliente…
Até a proxima
Postado em November 30th, 2008 as 10:18 pm
eh valeu pelo elogio ai e sobre o “Deus seja louvado” eu num vo tirar ele não, se isso queima o filme, que o meu TORRE!!!!
Postado em December 1st, 2008 as 8:26 am