JavaScript DHTML/Page Components/Slide Show
Содержание
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">
- 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">
- 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 }
- titleBar {width:100%;
height:10px }
body {background-color:#339966}
- 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>
</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 = "
";
}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 += " | ";
if(this.lista_imagenes.length != 0)
{
// si hay imágenes definidas
salida += "";
salida += "<a id="primera" href="#" onClick="" + this.nombre_objeto + ".primera(); return false;">:: primera ::</a>";salida +=" | ";
}
// botones de anterior y siguiente
salida += "";
salida += "<a id="anterior" href="#" onClick="" + this.nombre_objeto + ".anterior(); return false;">:: anterior ::</a>";salida += " | ";
salida += "";
salida += "<a id="siguiente" href="#" onClick="" + this.nombre_objeto + ".siguiente(); return false;">:: siguiente ::</a>";salida += " | ";
// botón de última
if(_MODO_SLIDE == "full_mode" )
{
salida += "";
salida += "<a id="ultima" href="#" onClick="" + this.nombre_objeto + ".ultima(); return false;">:: última ::</a>";salida += " | ";
}
// controles de reproducción automática
if(_MODO_SLIDE == "full_mode" )
{
salida += "";
salida += "<a id="auto" href="#" onClick="" + this.nombre_objeto + ".auto();">:: auto ::</a>";salida += " | ";
salida += "";
salida += "<a id="stop" href="#" onClick="" + this.nombre_objeto + ".stop();">:: stop ::</a>";salida += " | ";
}
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>