HTML5 Slideshow con Canvas & jQuery



Slideshow HTML5 con Canvas y jQuery

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 
&amp; 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 &amp; 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

Related Posts Plugin for WordPress, Blogger...


Desarrollador de software egresado de la Universidad Católica de Argentina, blogger, entusiasta del diseño y trabajador independiente.