Roller (banner rotation)

Es necesaria la versión 1.2.4 de Mootools.

Este script está probado en Firefox 3.5, Internet Explorer 6, Google Chrome y Opera 9.

Para esta demo se han usado los siguientes dos ficheros

Aquí tienes un par de ejemplos. Pulsa en “Start!” y “Stop!” para hacer que empiece o pare de funcionar contínuamente o a “Roll!” para hacer que cambie una sola vez.

Este es el código HTML

<link rel="stylesheet" type="text/css" href="/examples/css/Roller.css" />
<ul id="roller">
	<li class="error">First error message</li>
	<li class="error">Second error message</li>
	<li class="warning">First warning message</li>
	<li class="warning">Second warning message</li>
	<li class="info">Info message</li>
</ul>

<p><a id="start" href="#">Start!</a> <a id="stop" href="#">Stop!</a></p>

<ul id="roller2">
	<li class="error">First error message</li>
	<li class="error">Second error message</li>
	<li class="warning">First warning message</li>
	<li class="warning">Second warning message</li>
	<li class="info">Info message</li>
</ul>

<p><a id="roll" href="#">Roll!</a></p>

Este es el código javascript

<script src="/examples/js/mootools-1.2.4-core.js" type="text/javascript"></script>
<script src="/examples/js/mootools-1.2.4.1-more.js" type="text/javascript"></script>
<script src="/examples/js/Roller.js" type="text/javascript"></script>
<script type="text/javascript">
var a = new Roller($('roller'));
$('start').addEvent('click', function(e) { new Event(e).stop(); a.startRoll();});
$('stop').addEvent('click', function(e) {new Event(e).stop(); a.stopRoll();});

var b = new Roller($('roller2'));
$('roll').addEvent('click', function(e) {new Event(e).stop();b.roll();});
</script>

Este es el código css

ul, li{margin:0;padding:0;list-style:none;}
li {border:1px solid #fff;width:300px;padding:2px 5px;}
li.error {background-color:#ef4141;color:#fff;}
li.warning {background-color:#ded830;}
li.info {background-color:#3072de;}