HTML5 Slideshow es una implementación de una presentación de imágenes con controles de avance y retroceso bajo HTML5 que utiliza el elemento canvas y la biblioteca jQuery.
Implementación
Como se trata de HTML5, se aprecia que todo es mucho más sencillo de lo que era, el siguiente es el código HTML:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>An HTML5 Slideshow w/ Canvas & jQuery | Tutorialzine Demo</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body>
Aquí comienza la estructura que muestra el slideshow:
<div id="slideshow"> <ul class="slides"> <li><img src="img/photos/1.jpg" width="620" height="320" alt="Marsa Alam underawter close up" /></li> <li><img src="img/photos/2.jpg" width="620" height="320" alt="Turrimetta Beach - Dawn" /></li> <li><img src="img/photos/3.jpg" width="620" height="320" alt="Power Station" /></li> <li><img src="img/photos/4.jpg" width="620" height="320" alt="Colors of Nature" /></li> </ul> <span class="arrow previous"></span> <span class="arrow next"></span> </div> <p class="tzine"><a href="http://tutorialzine.com/2010/09/html5-canvas-slideshow-jquery /">Read & Download on Tutorialzine</a></p> <p class="credit">Photos by <a href="http://www.flickr.com/photos/ac_theart/3835954685/# /">Andrea Costa</a>, <a href="http://www.flickr.com /photos/7818801@N03/4996330017">Big Jobs</a>, <a href="http://www.flickr.com/photos/jbgoblin/4160580726 /">johnb/uk</a>, <a href="http://www.flickr.com/photos/gorditojaramillo /368461921/">gorditojaramillo</a></p>
Por último se enlazan los archivos de la biblioteca jQuery y el que contiene la implementación del slideshow, en el sitio de este tutorial está el archivo JS explicado (en inglés) paso a paso:
<script src="http://ajax.googleapis.com/ajax/ libs/jquery/1.4.2/jquery.min.js"></script> <script src="script.js"></script> </body> </html>
HTML5 Slideshow vith Canvas & jQuery
Sitio: tutorialzine.com/2010/09/html5-canvas-slideshow-jquery
