1 <h1>Image viewer</h1>2 3 <div id="container"></div>4 5 <!--6 <input id="slide" type="range"7 min="-240" max="240" step="1" value="0"8 onchange="updateSlider(this.value)" /><label id="slide_label">0</label> -->9 10 11 <button onclick="mi_picvi.select(mi_picvi.getSelectedId()-1);"> < </button>12 <button onclick="mi_picvi.select(mi_picvi.getSelectedId()+1);"> > </button>13 14 <br>15 Select card id<select onchange="mi_picvi.select(this.value);">16 <option value="-1">-1</option>17 <option value="0">0</option>18 <option value="1">1</option>19 <option value="2">2</option>20 <option value="3">3</option>21 <option value="4">4</option>22 <option value="5">5</option>23 <option value="6">6</option>24 <option value="7">7</option>25 <option value="8">8</option>26 <option value="9">9</option>27 <option value="10">10</option>28 <option value="11">11</option>29 <option value="12">12</option>30 </select>31 32 <script type="text/javascript">33 34 var container = document.getElementById('container');35 var mi_picvi = new PicVi(container);36 37 mi_picvi.add('http://quelindoesmipaisaje.files.wordpress.com/2011/02/paisaje.jpg');38 mi_picvi.add('http://www.segurosmoto.com.es/images/motos-bmw-s1000rr-competicion-superbikes-2-seguros-moto.jpg');39 mi_picvi.add('http://www.lasicilia.es/imagenes/mini_coche_por_sicilia.jpg');40 mi_picvi.add('http://static.freepik.com/foto-gratis/ordenador-portatil_17-827044425.jpg');41 mi_picvi.add('http://aulainformatica.files.wordpress.com/2007/10/800px-ibm_pc_5150.jpg');42 mi_picvi.add('http://www.npg.si.edu/exhibit/feature/images/schoeller_full.jpg');43 mi_picvi.add('http://juicy.tuxboard.com/wp-content/uploads/2011/03/Christopher-Walken-portrait.jpg');44 mi_picvi.add('http://1.bp.blogspot.com/-pB9LyJGzjUg/TeXzdLiUyiI/AAAAAAAAAPA/YkpZzdMY25M/s1600/platon_photographer-president-mahmoud-ahmadinejad-portrait.jpg');45 mi_picvi.add('http://www.windows2universe.org/earth/images/apollo8_earth_sm.jpg');46 mi_picvi.add('http://www.entreclick.com/wp-content/uploads/2013/02/Firefox-OS-021.jpg');47 48 mi_picvi.select(3);49 50 function updateSlider(v) {51 document.getElementById('slide_label').innerHTML = v;52 }53 54 55 56 57 58 </script>59 60 <style type="text/css">61 62 #container {63 position: absolute;64 width: 240px;65 height: 320px;66 border: solid 16px #333333;67 left: 400px;68 top: 0;69 }70 </style>Enlace
El enlace para compartir es: