Slideshow con titolo e pulsanti
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 websitevar 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<<" title="Jump to beginning" /> <input type="button" onclick="rotate(x-1);" value="<<" 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=">>" title="Next Picture" /> <input type="button" onclick="rotate(this.form.slide.length-1);" value=">>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>