Agregar Play a Slider hecho con Mootools

margancia · #1 (**permalink**) 12/02/2009, 05:56

Hola a todos. Como están?

Estoy creando para mi website un slider que funciona con la librería mootools.

ht tp:// ww w .efectorelativo .net /laboratory/noobSlide/

Estoy utilizando el ejemplo numero 8. Este es el código correspondiente:

Código HTML:

<head>
	<script type="text/javascript">
	window.addEvent('domready',function(){
//SAMPLE 8
		var handles8_more = $$('#handles8_more span');
		var nS8 = new noobSlide({
			box: $('box8'),
			items: $$('#box8 h3'),
			size: 480,
			handles: $$('#handles8 span'),
			addButtons: {previous: $('prev8'), play: $('play8'), stop: $('stop8'), playback: $('playback8'), next: $('next8') },
			onWalk: function(currentItem,currentHandle){
				//style for handles
				$$(this.handles,handles8_more).removeClass('active');
				$$(currentHandle,handles8_more[this.currentIndex]).addClass('active');
				//text for "previous" and "next" default buttons
				$('prev8').set('html','&lt;&lt; '+this.items[this.previousIndex].innerHTML);
				$('next8').set('html',this.items[this.nextIndex].innerHTML+' &gt;&gt;');
			}
		});
		//more "previous" and "next" buttons
		nS8.addActionButtons('previous',$$('#box8 .prev'));
		nS8.addActionButtons('next',$$('#box8 .next'));
		//more handle buttons
		nS8.addHandleButtons(handles8_more);
		//walk to item 3 witouth fx
		nS8.walk(3,false,true);

	});
	</script>
</head>

Código HTML:

<body>
<!-- SAMPLE 8 -->
<h2>Sample 8</h2>
<div class="sample sample8">
	<p class="buttons" id="handles8">
		<span>Pane 1</span>
		<span>Pane 2</span>
		<span>Pane 3</span>
		<span>Pane 4</span>

	</p>

	<div class="mask1">
		<div id="box8">
			<div>
				<p class="buttons"><span class="prev">&lt;&lt; Previous</span> <span class="next">Next &gt;&gt;</span></p>
				<h3>1. Lorem ipsum dolor sit amet</h3>

				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
				<p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem.</p>
			</div>
			<div>
				<p class="buttons"><span class="prev">&lt;&lt; Previous</span> <span class="next">Next &gt;&gt;</span></p>
				<h3>2. Quisque aliquet accumsan</h3>

				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
				<p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi.</p>
			</div>
			<div>
				<p class="buttons"><span class="prev">&lt;&lt; Previous</span> <span class="next">Next &gt;&gt;</span></p>
				<h3>3. Duis consequat laoreet</h3>

				<ul>
					<li>Duis consequat laoreet libero.</li>
					<li>Nullam scelerisque porta arcu.</li>
					<li>Praesent ut tortor quis nunc vehicula interdum.</li>
					<li>Cras ultrices venenatis justo.</li>
				</ul>
			</div>

			<div>
				<p class="buttons"><span class="prev">&lt;&lt; Previous</span> <span class="next">Next &gt;&gt;</span></p>
				<h3>4. Aenean consectetuer</h3>
				<p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem.</p>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>

			</div>
		</div>
	</div>

	<p class="buttons">
		<span id="prev8">&lt;&lt; Previous</span> | <span id="next8">Next &gt;&gt;</span>
	</p>

	<p class="buttons">
		<span id="playback8">&lt;Playback</span>
		<span id="stop8">Stop</span>
		<span id="play8">Play &gt;</span>
	</p>

	<p class="buttons" id="handles8_more">

		<span>1</span>
		<span>2</span>
		<span>3</span>
		<span>4</span>
	</p>

</div>
</body>

Funciona todo correctamente. Lo único que quiero cambiar es que por default, cuando se abra la página, el slider esté funcionando ya (o sea que esté activado el play). Hay manera de resolver ésto?

Desde ya muchas gracias,
Saludos!