JavaScript DHTML/Page Components/Slide Show

Материал из Web эксперт
Перейти к: навигация, поиск

Animal Kingdom Slideshow

   <source lang="html4strict">

/* JavaScript Application Cookbook By Jerry Bradenbaugh Publisher: O"Reilly Series: Cookbooks ISBN: 1-56592-577-7

  • /
<HTML>

<HEAD> <TITLE>The Slideshow</TITLE>

<STYLE TYPE="text/css">

  1. menuConstraint { height: 800; }

</STYLE> <SCRIPT LANGUAGE="JavaScript1.2">

</SCRIPT> </HEAD> <BODY BGCOLOR=WHITE>

Animal Kingdom Slideshow

<SCRIPT LANGUAGE="JavaScript1.2">

</SCRIPT> </FONT> </BODY> </HTML>

      </source>
   
  


Creating a Slide Show Using a Random Number Generator

   <source lang="html4strict">

/* Learn How to Program Using Any Web Browser by Harold Davis Apress CopyRight 2004 ISBN: 1590591135

  • /

<HTML> <HEAD> <TITLE>Slide Show</TITLE> </HEAD> <BODY bgcolor=black text=white> <SCRIPT> var gardenPix = new Array ("","http://www.bearhome.ru/garden/images/gard1.jpg", "http://www.bearhome.ru/garden/images/gard2.jpg", "http://www.bearhome.ru/garden/images/gard3.jpg", "http://www.bearhome.ru/garden/images/gard4.jpg", "http://www.bearhome.ru/garden/images/gard5.jpg", "http://www.bearhome.ru/garden/images/gard6.jpg", "http://www.bearhome.ru/garden/images/gard7.jpg", "http://www.bearhome.ru/garden/images/gard8.jpg", "http://www.bearhome.ru/garden/images/gard9.jpg", "http://www.bearhome.ru/garden/images/gard10.jpg"); var whichPic = 1; var timeOutId; function inOrder() {

  showPic(whichPic); 
  whichPic ++; 
  if (whichPic > 10) 
     whichPic = 1; 
  status = whichPic; 
  timeOutId=setTimeout("inOrder();",1000); 

} function showRandom() {

  whichPic = Math.floor(Math.random() * 11); 
  if (whichPic == 0) 
     whichPic = 1; 
  showPic(whichPic); 
  status = whichPic; 
  timeOutId=setTimeout("showRandom();",1000); 

} function showPic(i) {

  document.images[0].src=gardenPix[i]; 

} // End code hiding from ancient browsers --> </SCRIPT>

View a slide show of our garden today!

<FORM>

<INPUT type=button value="Show in Order" name=theButton onClick="inOrder();">

<INPUT type=button value="Random and Repeat" name=theButton onClick="showRandom();">

<INPUT type=button value="Stop" name=theButton onClick="clearTimeout(timeOutId);">


</FORM> <IMG name=slideshow src="http://www.bearhome.ru/garden/images/gard6.jpg"

  width=500 border=5>

</BODY> </HTML>

      </source>
   
  


DHTML Slide Show

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

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

<html> <head> <title>DHTML Slide Show</title> <style type="text/css">

  1. slides {font-family:Verdana, Arial, sans-serif;
        position:absolute; 
        top:40px; 
        width:90%
       }

.slide {position:absolute;

       top:0px; 
       left:0px; 
       display:none; 
       width:80%; 
       height:500px; 
       overflow:hidden; 
       background-color:#ccffcc; 
       font-size:18px; 
       padding:20px; 
       border:5px solid #ff9900; 
       margin:10%
      }

h1 {text-align:right;

   padding-right:10%
  }

h2 {font-size:36px;

   text-align:center
  }

li {list-style-image:url(end.gif);

   list-style-position:outside
  }

hr {width:60%;

   height:5px; 
   background-color:#ff9900
  }
  1. titleBar {width:100%;
          height:10px
         }

body {background-color:#339966}

  1. controller {position:absolute;
            top:30px; 
            left:10%
           }

</style> <script type="text/javascript"> /* *********************************************************** Example 4-3 (DHTMLAPI.js) "Dynamic HTML:The Definitive Reference" 2nd Edition by Danny Goodman Published by O"Reilly & Associates ISBN 1-56592-494-0 http://www.oreilly.ru Copyright 2002 Danny Goodman. All Rights Reserved.

                                                                                                                        • */

// DHTMLapi.js custom API for cross-platform // object positioning by Danny Goodman (http://www.dannyg.ru). // Release 2.0. Supports NN4, IE, and W3C DOMs. // Global variables var isCSS, isW3C, isIE4, isNN4, isIE6CSS; // Initialize upon load to let all browsers establish content objects function initDHTMLAPI() {

   if (document.images) {
       isCSS = (document.body && document.body.style) ? true : false;
       isW3C = (isCSS && document.getElementById) ? true : false;
       isIE4 = (isCSS && document.all) ? true : false;
       isNN4 = (document.layers) ? true : false;
       isIE6CSS = (document.rupatMode && document.rupatMode.indexOf("CSS1") >= 0) ? true : false;
   }

} // Set event handler to initialize API window.onload = initDHTMLAPI; // Seek nested NN4 layer from string name function seekLayer(doc, name) {

   var theObj;
   for (var i = 0; i < doc.layers.length; i++) {
       if (doc.layers[i].name == name) {
           theObj = doc.layers[i];
           break;
       }
       // dive into nested layers if necessary
       if (doc.layers[i].document.layers.length > 0) {
           theObj = seekLayer(document.layers[i].document, name);
       }
   }
   return theObj;

} // Convert object name string or object reference // into a valid element object reference function getRawObject(obj) {

   var theObj;
   if (typeof obj == "string") {
       if (isW3C) {
           theObj = document.getElementById(obj);
       } else if (isIE4) {
           theObj = document.all(obj);
       } else if (isNN4) {
           theObj = seekLayer(document, obj);
       }
   } else {
       // pass through object reference
       theObj = obj;
   }
   return theObj;

} // Convert object name string or object reference // into a valid style (or NN4 layer) reference function getObject(obj) {

   var theObj = getRawObject(obj);
   if (theObj && isCSS) {
       theObj = theObj.style;
   }
   return theObj;

} // Position an object at a specific pixel coordinate function shiftTo(obj, x, y) {

   var theObj = getObject(obj);
   if (theObj) {
       if (isCSS) {
           // equalize incorrect numeric value type
           var units = (typeof theObj.left == "string") ? "px" : 0 
           theObj.left = x + units;
           theObj.top = y + units;
       } else if (isNN4) {
           theObj.moveTo(x,y)
       }
   }

} // Move an object by x and/or y pixels function shiftBy(obj, deltaX, deltaY) {

   var theObj = getObject(obj);
   if (theObj) {
       if (isCSS) {
           // equalize incorrect numeric value type
           var units = (typeof theObj.left == "string") ? "px" : 0 
           theObj.left = getObjectLeft(obj) + deltaX + units;
           theObj.top = getObjectTop(obj) + deltaY + units;
       } else if (isNN4) {
           theObj.moveBy(deltaX, deltaY);
       }
   }

} // Set the z-order of an object function setZIndex(obj, zOrder) {

   var theObj = getObject(obj);
   if (theObj) {
       theObj.zIndex = zOrder;
   }

} // Set the background color of an object function setBGColor(obj, color) {

   var theObj = getObject(obj);
   if (theObj) {
       if (isNN4) {
           theObj.bgColor = color;
       } else if (isCSS) {
           theObj.backgroundColor = color;
       }
   }

} // Set the visibility of an object to visible function show(obj) {

   var theObj = getObject(obj);
   if (theObj) {
       theObj.visibility = "visible";
   }

} // Set the visibility of an object to hidden function hide(obj) {

   var theObj = getObject(obj);
   if (theObj) {
       theObj.visibility = "hidden";
   }

} // Retrieve the x coordinate of a positionable object function getObjectLeft(obj) {

   var elem = getRawObject(obj);
   var result = 0;
   if (document.defaultView) {
       var style = document.defaultView;
       var cssDecl = style.getComputedStyle(elem, "");
       result = cssDecl.getPropertyValue("left");
   } else if (elem.currentStyle) {
       result = elem.currentStyle.left;
   } else if (elem.style) {
       result = elem.style.left;
   } else if (isNN4) {
       result = elem.left;
   }
   return parseInt(result);

} // Retrieve the y coordinate of a positionable object function getObjectTop(obj) {

   var elem = getRawObject(obj);
   var result = 0;
   if (document.defaultView) {
       var style = document.defaultView;
       var cssDecl = style.getComputedStyle(elem, "");
       result = cssDecl.getPropertyValue("top");
   } else if (elem.currentStyle) {
       result = elem.currentStyle.top;
   } else if (elem.style) {
       result = elem.style.top;
   } else if (isNN4) {
       result = elem.top;
   }
   return parseInt(result);

} // Retrieve the rendered width of an element function getObjectWidth(obj) {

   var elem = getRawObject(obj);
   var result = 0;
   if (elem.offsetWidth) {
       result = elem.offsetWidth;
   } else if (elem.clip && elem.clip.width) {
       result = elem.clip.width;
   } else if (elem.style && elem.style.pixelWidth) {
       result = elem.style.pixelWidth;
   }
   return parseInt(result);

} // Retrieve the rendered height of an element function getObjectHeight(obj) {

   var elem = getRawObject(obj);
   var result = 0;
   if (elem.offsetHeight) {
       result = elem.offsetHeight;
   } else if (elem.clip && elem.clip.height) {
       result = elem.clip.height;
   } else if (elem.style && elem.style.pixelHeight) {
       result = elem.style.pixelHeight;
   }
   return parseInt(result);

} // Return the available content width space in browser window function getInsideWindowWidth() {

   if (window.innerWidth) {
       return window.innerWidth;
   } else if (isIE6CSS) {
       // measure the html element"s clientWidth
       return document.body.parentElement.clientWidth
   } else if (document.body && document.body.clientWidth) {
       return document.body.clientWidth;
   }
   return 0;

} // Return the available content height space in browser window function getInsideWindowHeight() {

   if (window.innerHeight) {
       return window.innerHeight;
   } else if (isIE6CSS) {
       // measure the html element"s clientHeight
       return document.body.parentElement.clientHeight
   } else if (document.body && document.body.clientHeight) {
       return document.body.clientHeight;
   }
   return 0;

}

</script> <script type="text/javascript"> // Array of all slides var allSlides; // Slide counter var currSlide = -1; // Set global with array of slide elements function getAllSlides() {

   var allChildren = document.getElementById("slides").childNodes;
   var slideElems = new Array();
   for (var i = 0; i < allChildren.length; i++) {
       if (allChildren[i].nodeType == 1) {
            slideElems[slideElems.length] = allChildren[i];
       }
   }
   allSlides = slideElems;

} // Set pixel heights of slide elements to fit window function setHeights() {

   for (var i = 0; i < allSlides.length; i++) {
       allSlides[i].style.height = getInsideWindowHeight() - 200 + "px";
   }

} // Advance to next slide function next() {

   if (currSlide < 0) {
       allSlides[++currSlide].style.display = "block";
   } else if (currSlide < allSlides.length - 1) {
       allSlides[currSlide].style.display = "none";
       allSlides[++currSlide].style.display = "block";
   } else if (currSlide == allSlides.length - 1) {
       allSlides[currSlide++].style.display = "none";
   }

} // Go to previous slide function prev() {

   if (currSlide > allSlides.length - 1) {
       allSlides[--currSlide].style.display = "block";
   } else if (currSlide > 0) {
       allSlides[currSlide].style.display = "none";
       allSlides[--currSlide].style.display = "block";
   } else if (currSlide == 0) {
       allSlides[currSlide--].style.display = "none";
   }

} // Initialize slide show function initSlides() {

   getAllSlides();
   setHeights();

} </script> </head> <body onload="initDHTMLAPI(); initSlides()" onresize="setHeights()">

U.S. Bill of Rights


<form> <input type="button" value="Prev" onclick="prev()" /> <input type="button" value="Next" onclick="next()" /> </form>

ARTICLE I


Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the government for a redress of grievances.

  • Note 1
  • Note 2
  • Note 3

ARTICLE II


A well regulated militia, being necessary to the security of a free state, the right of the people to keep and bear arms, shall not be infringed.

  • Note 1
  • Note 2
  • Note 3

ARTICLE III


No soldier shall, in time of peace, be quartered in any house, without the consent of the owner, nor in time of war, but in in a manner to be prescribed by law.

  • Note 1
  • Note 2
  • Note 3

ARTICLE IV


The right of the people to be secure in their persons, houses, papers, and effects, against unreasonable searches and seizures shall not be violated, and no warrants shall issue, but upon probable cause, supported by oath or affirmation, and particularly describing the place to be searched, and the persons or things to be seized.

  • Note 1
  • Note 2
  • Note 3

ARTICLE V


No person shall be held to answer for a capital, or otherwise infamous crime, unless on a presentment or indictment of a grand jury, except in cases arising in the land or naval forces, or in the militia, when in actual service in time of war or public danger; nor shall any person be subject for the same offense to be twice put in jeopardy of life or limb; nor shall be compelled in any criminal case to be a witness against himself, nor be deprived of life, liberty, or property, without due process of law; nor shall private property be taken for public use, without just compensation.

  • Note 1
  • Note 2
  • Note 3

ARTICLE VI


In all criminal prosecutions the accused shall enjoy the right to a speedy and public trial, by an impartial jury of the state and district wherein the crime shall have been committed, which district shall have been previously ascertained by law, and to be informed of the nature and cause of the accusation; to be confronted with the witnesses against him; to have compulsory process for obtaining witnesses in his favor, and to have the assistance of counsel for his defense.

  • Note 1
  • Note 2
  • Note 3

ARTICLE VII


In suits at common law, where the value in controversy shall exceed twenty dollars, the right of trial by jury shall be preserved, and no fact tried by a jury shall be otherwise re-examined in any court of the United States, than according to the rules of the common law.

  • Note 1
  • Note 2
  • Note 3

ARTICLE VIII


Excessive bail shall not be required, nor excessive fines imposed, nor cruel and unusual punishments inflicted.

  • Note 1
  • Note 2
  • Note 3

ARTICLE IX


The enumeration in the Constitution, of certain rights, shall not be construed to deny or disparage others retained by the people.

  • Note 1
  • Note 2
  • Note 3

ARTICLE X


The powers not delegated to the United States by the Constitution, nor prohibited by it to the states, are reserved to the states respectively, or the the people.

  • Note 1
  • Note 2
  • Note 3

</body> </html>


      </source>
   
  


slide show Demo

   <source lang="html4strict">

<html> <head>

 <title>Demostración de diapositivas</title>

<script language="javascript"> //*************** CONFIGURACI�N ***************// //***** Ruta de las fotografías *****// var _RUTA_FOTOS = "slide_fotos/"; // guarda la ruta (relativa) donde se encuentran las fotografías.

             // Por defecto, slide_fotos

//***** Rutas de las imágenes del slideshow y de las css *****// var _SLIDE_IMG = "slide_img/"; var _SLIDE_CSS = "slide_css/"; //***** Nombre del campo imagen a utilizar, por defecto *****// var _SLIDE_NOMBRE_IMG = "_SLIDE_NOMBRE_IMG"; //***** Modos del slide *****// var _MODO_SLIDE = "normal"; // normal - Solo anterior y siguiente

           // full_mode - Muestra todos los controles

//***** velocidad del slide *****// var _VELOCIDAD_SLIDE = 1000; // en milisegundos //******************* MOTOR *******************// // constructor function Slideshow(nombre_objeto) {

 if(nombre_objeto == null)
 {
   this.nombre_objeto = "mySlide";
 }else{
   this.nombre_objeto = nombre_objeto;
 }
 this.lista_imagenes = new Array(); // lista de imágenes a usar
 this.posicion = 0; // posición de inicio
 // métodos
 this.agregar_imagen = agregar_imagen;
 this.en_marcha = false;
 
 this.siguiente = siguiente;
 this.anterior = anterior;
 this.primera = primera;
 this.ultima = ultima;
 this.auto = auto;
 this.stop = stop;
 
 this.crear_slide = crear_slide;

} // agregar imagen // se pueden agragar varias imágenes a la vez, separadas por comas (,) function agregar_imagen(lista) {

 for(i = this.lista_imagenes.length; i < agregar_imagen.arguments.length; i++)
 {
   this.lista_imagenes[i] = agregar_imagen.arguments[i];
 }

} // anterior y siguiente function siguiente() {

 this.posicion++;
 if(this.posicion >= this.lista_imagenes.length)
 {
   this.posicion = 0;
 }
 document.getElementById(this.nombre_imagen).src = _RUTA_FOTOS + this.lista_imagenes[this.posicion];

} function anterior() {

 this.posicion--;
 if(this.posicion < 0)
 {
   this.posicion = this.lista_imagenes.length - 1;
 }
 document.getElementById(this.nombre_imagen).src = _RUTA_FOTOS + this.lista_imagenes[this.posicion];

} // primera y última function primera() {

 this.posicion = 0;
 document.getElementById(this.nombre_imagen).src = _RUTA_FOTOS + this.lista_imagenes[this.posicion];

} function ultima() {

 this.posicion = this.lista_imagenes.length - 1;
 document.getElementById(this.nombre_imagen).src = _RUTA_FOTOS + this.lista_imagenes[this.posicion];

} // stop y auto function auto() {

 this.en_marcha = true;
 if( this.posicion >= this.lista_imagenes.length-1 )
 {
   this.posicion = 0;
 }else{
   this.posicion++;
 }
 document.getElementById(this.nombre_imagen).src = _RUTA_FOTOS + this.lista_imagenes[this.posicion];
 slide_id = setTimeout(this.nombre_objeto + ".auto()", _VELOCIDAD_SLIDE);

} function stop() {

 if( this.en_marcha )
   clearTimeout(slide_id);

} // crear slide // crea el slide con todos sus comportamientos function crear_slide() {

 salida = "";
salida = ""; salida += ""; salida += ""; if(this.lista_imagenes.length != 0) { // si hay imágenes definidas salida += ""; // botón de primera if(_MODO_SLIDE == "full_mode" ) { salida += ""; } // botones de anterior y siguiente salida += ""; salida += ""; // botón de última if(_MODO_SLIDE == "full_mode" ) { salida += ""; } // controles de reproducción automática if(_MODO_SLIDE == "full_mode" ) { salida += ""; salida += ""; } salida += ""; } salida += "
";
 }else{
   salida += " colspan="6">";
 }
 if(this.lista_imagenes.length == 0)
 {
   salida += ":: Imágenes todavía sin definir ::";
 }else{
   salida += "<img border="0"id=""+ this.nombre_imagen +"" src="" + _RUTA_FOTOS + this.lista_imagenes[this.posicion] +"">";
 }
salida += "
";
     salida += "<a id="primera" href="#" onClick="" + this.nombre_objeto + ".primera(); return false;">:: primera ::</a>";
salida +="
";
   salida += "<a id="anterior" href="#" onClick="" + this.nombre_objeto + ".anterior(); return false;">:: anterior ::</a>";
salida += "
";
   salida += "<a id="siguiente" href="#" onClick="" + this.nombre_objeto + ".siguiente(); return false;">:: siguiente ::</a>";
salida += "
";
     salida += "<a id="ultima" href="#" onClick="" + this.nombre_objeto + ".ultima(); return false;">:: última ::</a>";
salida += "
";
     salida += "<a id="auto" href="#" onClick="" + this.nombre_objeto + ".auto();">:: auto ::</a>";
salida += "
";
     salida += "<a id="stop" href="#" onClick="" + this.nombre_objeto + ".stop();">:: stop ::</a>";
salida += "
";
 document.writeln(salida);

} /***** END *****/ </script> </head> <body>

ejemplo de utilización del slideshow


<script> var presentacion = new Slideshow("presentacion"); _MODO_SLIDE = "full_mode"; _VELOCIDAD_SLIDE = 1500; presentacion.agregar_imagen("a.jpg", "b.jpg", "c.jpg", "d.jpg"); presentacion.crear_slide(); </script> </body> </html>

      </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/slideshow.zip">slideshow.zip( 285 k)</a>


Slide Show: Mixed Slides, Next Slide, Previous Slide

   <source lang="html4strict">

<html> <head> <title>DynAPI Examples - Slide Show</title> <script language="Javascript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript">

 dynapi.library.setPath("./dynapisrc/")
 dynapi.library.include("dynapi.api")
 dynapi.library.include("ImageClip");

</script> <script language="Javascript">

 projector = new ImageClip({x:200,y:100,w:32,h:32,cols:5,rows:1,speed:400});
 projector.addImage(dynapi.functions.getImage("./dynapiexamples/images/file.gif"));
 projector.addImage(dynapi.functions.getImage("./dynapiexamples/images/eicon1.gif"));
 projector.addImage(dynapi.functions.getImage("./dynapiexamples/images/eicon3.gif"));
 projector.addImage(dynapi.functions.getImage("./dynapiexamples/images/calc.gif"));
 projector.addImage(dynapi.functions.getImage("./dynapiexamples/images/eicon2.gif"));
 dynapi.document.addChild(projector);
 var slide=1;

</script> </head> <body>

ImageClip Slide Show

<a href="javascript:;" onclick="projector.playAnimation(false,"1>5");">Show Slides >></a>
<a href="javascript:;" onclick="projector.playAnimation(false,"1<5");"> << Show Slides</a>

<a href="javascript:;" onclick="projector.playAnimation(false,"1<3,5,2,1,4,2,4");"> Mixed Slides</a>

<a href="javascript:;" onclick="slide++;if(slide>5) slide=5;projector.setFrame(slide);"> Next Slide ></a>
<a href="javascript:;" onclick="slide--;if(!slide) slide=1;projector.setFrame(slide);"> < Previous Slide</a> <script>

 dynapi.document.insertAllChildren();

</script> </body> </html>

      </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>