Hay tres formas básicas de utilizarlo.

Con una imagen

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

<script src="http://code.jquery.com/jquery-latest.min.js">script>

<script src="js/jquery.backstretch.min.js">script>

<script type="text/javascript">

$(function(){

//invocamos la función y le asignamos una imagen

$.backstretch("imgs/liliesagua.jpg");

});

script>

<title>Imagen de fondo dinamicatitle>

head>

<body>

body>

html>

Mediante Clickshttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <script src="http://code.jquery.com/jquery-latest.min.js">script>
    <script src="js/jquery.backstretch.min.js">script>
    <script type="text/javascript">
        $(function(){
            // Efecto de trasparencia y animación
            $("#galeria").css({ opacity: 0.5 });
             
            $("#galeria").hover(function() {
                $("#galeria").animate({opacity: 1}, 300);
            }, function() {
                $("#galeria").animate({opacity: 0.5}, 300);
            });
 
            // Asignamos una imagen inicial
            $.backstretch("imgs/liliesagua.jpg");
 
            // Detectamos cada que se le de click a cada enlace
            // y se realiza el cambio de la imagen
            $("#piedras").click(function(e) {
                e.preventDefault();
                $.backstretch("imgs/piedras.jpg");
            });
             
            $("#orquideas").click(function(e) {
                e.preventDefault();
                $.backstretch("imgs/orquideas.jpg");
            });
 
            $("#liliesagua").click(function(e) {
                e.preventDefault();
                $.backstretch("imgs/liliesagua.jpg");
            });
 
            $("#zen").click(function(e) {
                e.preventDefault();
                $.backstretch("imgs/zen.jpg");
            });
        });
    script>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
            color: #FFF;
            font-family: Arial, Helvetica, sans-serif;
        }
        /*el Div que contiene las imagenes*/
        #galeria{
            width: 500px;
            height: 120px;
            margin: 0 auto;
            padding: 0;
            background-color: #000;
        }
        #galeria ul{
            width: 400px;
            list-style-type: none;
            margin: 0 auto;
            padding: 20px 0 0 0;
        }
        #galeria li{
            float: left;
            display: inline;
        }
        img{
            border: 0;
        }
        p{
            clear: both;
            text-align: center
        }
    style>
    <title>Imagen de fondo dinamicatitle>
head>
<body>
    <div id="galeria">
        <ul id="minis">
            <li><a href="#" id="piedras"><img src="imgs/piedras_min.jpg" alt="" />a>li>
            <li><a href="#" id="orquideas"><img src="imgs/orquideas_min.jpg" alt="" />a>li>
            <li><a href="#" id="liliesagua"><img src="imgs/liliesagua_min.jpg" alt="" />a>li>
            <li><a href="#" id="zen"><img src="imgs/zen_min.jpg" alt="" />a>li>
        ul>
        <p>Click en la imagenp>
    div>
body>
html>
 
 
Presentación (slideshow):http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <script src="http://code.jquery.com/jquery-latest.min.js">script>
    <script src="js/jquery.backstretch.min.js">script>
    <script type="text/javascript">
        $(function(){
            var imagenes = [
                "imgs/liliesagua.jpg"
                , "imgs/piedras.jpg"
                , "imgs/orquideas.jpg"
                , "imgs/zen.jpg"
            ];
 
            // Precarga de todas la imagenes
            $(imagenes).each(function(){
                $("<img/>")[0].src = this; 
            });
 
            // Almacena cual imagen esta activa
            var index = 0;
 
            // Aplicamos la primera imagen del arreglo 
            // y lo configuramos para que realice un efecto de transición (fadeIn) 
            // de 500 milisegundos entre cada cambio imagen
            $.backstretch(imagenes[index], {speed: 500});
 
            // setInterval es una funcion que se repite determinado tiempo
            // en este caso cada 5000 milisegundos incrementando el index
            // y aplicando una nueva imagen
            setInterval(function() {
                index = (index >= imagenes.length - 1) ? 0 : index + 1;
                $.backstretch(imagenes[index]);
            }, 5000);
        });
    script>
    <title>Imagen de fondo dinamicatitle>
head>
<body>
body>
html>
 
Fuente: WebCodeRecipes.com

Más entradas del Blog

Comercio Electrónico: Qué, Quién, Cómo y Por Qué se compra online

Todo emprendedor que se plantea montar o exportar su negocio online desearía conocer el nicho de mercado más rentable en Internet. Eleme[...] ...mas [+]

Facebook compra WhatsApp por 19000 millones de dólares

Durante meses, se ha estado especulando sobre quién compraría WhatsApp. Era un movimiento que se veía venir: muchas empresas[...] ...mas [+]

Un troyano en las entrañas de WhatsApp

Se trata de un malware que llega desde un servidor de Brasil pero que afecta a todas las regiones y tiene la capacidad de robar información de [...] ...mas [+]