Slideshow con titolo e pulsanti



Titolo slide




Codice HTML con javascript incorporato

<script type="text/javascript">
// Author: ricocheting.com
// Description: slideshow that allows visitors to flip through a series of images on your website

var x=0;

function rotate(num){ fs=document.ff.slide; x=num%fs.length; if(x<0) x=fs.length-1; document.images.show.src=fs.options[x].value; fs.selectedIndex=x;}

function auto() { if(document.ff.fa.value == "Stop"){ rotate(++x);setTimeout("auto()", 5000);}} </script>

<form name="ff"> <table cellpadding="3" style="border:1px black solid;border-collapse:collapse;"> <tr><th align="center">Titolo slide</th></tr>

<tr><td align="center"> <img src="http://www.puntoinformaticofree.it/guida_css/resources/foto/foto1.jpg" name="show"> </td></tr>

<tr><td align="center" style="border:1px black solid;"> <select name="slide" onChange="rotate(this.selectedIndex);"> <option value="http://www.puntoinformaticofree.it/guida_css/resources/foto/foto1.jpg">testo foto 1</option> <option value="http://www.puntoinformaticofree.it/guida_css/resources/foto/foto2.jpg">testo foto 2</option> <option value="http://www.puntoinformaticofree.it/guida_css/resources/foto/foto3.jpg">testo foto 3</option> </select> </td></tr>

<tr><td align="center" style="border:1px black solid;"> <input type="button" onclick="rotate(0);" value="ll&lt;&lt;" title="Jump to beginning" /> <input type="button" onclick="rotate(x-1);" value="&lt;&lt;" title="Last Picture" /> <input type="button" name="fa" onClick="this.value=((this.value=='Stop')?'Start':'Stop');auto();" value="Start" title="Autoplay" style="width:75px;" /> <input type="button" onclick="rotate(x+1);" value="&gt;&gt;" title="Next Picture" /> <input type="button" onclick="rotate(this.form.slide.length-1);" value="&gt;&gt;ll" title="Jump to end" /> </td></tr></table></form> <br>

<!-- The dots/circles --> <div style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div>