JavaScript DHTML/Page Components/Slide Show
Содержание
Animal Kingdom Slideshow
/*
JavaScript Application Cookbook
By Jerry Bradenbaugh
Publisher: O"Reilly
Series: Cookbooks
ISBN: 1-56592-577-7
*/
<HTML>
<HEAD>
<TITLE>The Slideshow</TITLE>
<!-- Define style sheet for simple height control //-->
<STYLE TYPE="text/css">
#menuConstraint { height: 800; }
</STYLE>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
// Set window- and layer-related variables
var dWidLyr = 450;
var dHgtLyr = 450;
var curSlide = 0;
var zIdx = -1;
var isVis = false;
// Set browser-determined global variables
var NN = (document.layers ? true : false);
var sWidPos = ((NN ? outerWidth : screen.availWidth) / 2) - (dWidLyr / 2);
var sHgtPos = ((NN ? outerHeight : screen.availHeight) / 2) - (dHgtLyr / 2);
var hideName = (NN ? "hide" : "hidden");
var showName = (NN ? "show" : "visible");
//Set image-related variables
var img = new Array();
var imgOut = new Array();
var imgOver = new Array();
var layerList = new Array();
var imgPath = "images/";
// Set tour-realted variables
var showSpeed = 3500;
var tourOn = false;
// Define a function to generate layers
function genLayer(sName, sLeft, sTop, sWdh, sHgt, sVis, copy) {
if (NN) {
document.writeln("<LAYER NAME="" + sName + "" LEFT=" + sLeft + " TOP=" + sTop +
" WIDTH=" + sWdh + " HEIGHT=" + sHgt + " VISIBILITY="" + sVis + """ +
" z-Index=" + (++zIdx) + ">" + copy + "</LAYER>");
}
else {
document.writeln("<DIV ID="" + sName + "" STYLE="position:absolute; overflow:none; left:" +
sLeft + "px; top:" + sTop + "px; width:" + sWdh + "px; height:" + sHgt + "px;" +
" visibility:" + sVis + "; z-Index=" + (++zIdx) + "">" +
copy + "</DIV>"
);
}
}
// Define an object constructor for each slide
function slide(imgStr, scientific, copy) {
this.name = imgStr;
this.copy = copy;
this.structure =
"<TABLE WIDTH=500 CELLPADDING=10><TR><TD WIDTH=60% VALIGN=TOP>" +
"<IMG SRC=" + imgPath + imgStr + ".gif></TD>" +
"<TD WIDTH=40% VALIGN=TOP><H2>Common Name:</H2><H2><I>" +
camelCap(imgStr) + "</I></H2><H3>Scientific Name: </H3><H3><I>" +
scientific + "</I></H3>" + "<B>Abstract:</B><BR>" + copy + "</TD></TR></TABLE>";
// Preload corresponding images while we"re at it
imagePreLoad(imgStr);
return this;
}
// Define a function to preload the images
function imagePreLoad(imgStr) {
// Images for the slides
img[img.length] = new Image();
img[img.length - 1].src = imgPath + imgStr + ".gif";
// Primary images for the slide menu
imgOut[imgOut.length] = new Image();
imgOut[imgOut.length - 1].src = imgPath + imgStr + "out.gif";
// Rollover images for the slide menu
imgOver[imgOver.length] = new Image();
imgOver[imgOver.length - 1].src = imgPath + imgStr + "over.gif";
}
// Define an array to store all of the slide objects
var slideShow = new Array(
new slide("bird", "Bomb-zis Car-zes", "This winged creature has been known to seek out and soil freshly-washed vehicles."),
new slide("walrus", "Verius Clueless", "These big fellas good fishers, but toothbrushing is another story."),
new slide("gator", "Couldbeus Luggajus", "These reptiles often play mascots for large college sporting events."),
new slide("dog", "Makus Messus", "Man\"s best friend? Yeah, right. No wonder these mammals get a bad rep."),
new slide("pig", "Oinkus Lotsus", "Humans with questionable eating habits are often compared to these farm creatures."),
new slide("snake", "Groovius Dudis", "Slick and sly with a watchful eye."),
new slide("reindeer", "Redius Nosius", "Though co-workers used to laugh and call him names, he eventually won the respect of the entire team."),
new slide("turkey", "Goosius Is Cooktis", "Celebrated and revered for an entire year, then served as dinner shortly after."),
new slide("cow", "Gotius Milkus", "This animal is considered a moover and shaker, and tends to milk things for all they\"re worth. Utterly shameful."),
new slide("crane", "Whooping It Upus", "Not to be confused with a piece of heavy construction equipment. Rumored as the source of the nickname <I>birdlegs</I>.")
);
// Capitalize the first letter of the word passed
// Makes for better looking copy
function camelCap(str) {
return str.substring(0, 1).toUpperCase() + str.substring(1);
}
// This generates all layers (or styles) to display for the screen
function genScreen() {
var menuStr = "";
for (var i = 0; i < slideShow.length; i++) {
// Create all of the animal slide layers
genLayer("slide" + i, sWidPos, 45, dWidLyr, dHgtLyr, (i == 0 ? showName : hideName), slideShow[i].structure);
// While iterating, build the HTML string for the menu layer
menuStr += "<A HREF="" onMouseOver="hideStatus(); if(!tourOn) { setSlide(" + i + ");" +
" imageSwap(\"" + slideShow[i].name + "\", " + i + ", true)}; return true;"" +
" onMouseOut="hideStatus(); if(!tourOn) { setSlide(" + i + ");" +
" imageSwap(\"" + slideShow[i].name + "\", " + i + ", false)}; return true;"" +
" onClick="return false;"><IMG NAME="" + slideShow[i].name + "" SRC="" + imgPath + slideShow[i].name + "out.gif" BORDER=0></A><BR>";
}
// Create the automation layer
genLayer("automation", sWidPos - 100, 11, 100, 200, showName,
"<DIV ID="menuConstraint">" +
"<A HREF="javascript: autoPilot();" onMouseOver="hideStatus(); return true;">" +
"<IMG SRC="images/automate.gif" BORDER=0></A>" +
"</DIV>"
);
// Create the guide layer (with the arrows)
genLayer("guide", sWidPos - 100, 30, 100, 200, showName,
"<DIV ID="menuConstraint">" +
"<A HREF="javascript: if(!tourOn) { changeSlide(-1); }" onMouseOver="hideStatus(); return true;">" +
"<IMG SRC="images/leftout.gif" BORDER=0></A>" +
"<A HREF="javascript: if(!tourOn) { menuManager(); }" onMouseOver="hideStatus(); return true;">" +
"<IMG SRC="images/guideout.gif" BORDER=0></A>" +
"<A HREF="javascript: if(!tourOn) { changeSlide(1); }" onMouseOver="hideStatus(); return true;">" +
"<IMG SRC="images/rightout.gif" BORDER=0></A></DIV>"
);
// Create the menu
genLayer("menu", sWidPos - 104, 43, 100, 200, hideName,
"<DIV ID="menuConstraint"><TABLE><TD>" +
menuStr + "</TD></TABLE></DIV>"
);
}
// Define a function to hide layers
function hideLayer(name) {
refLayer(name).visibility = hideName;
}
// Define a function to reveal layers
function showLayer(name) {
refLayer(name).visibility = showName;
}
// Define a central function to reference layers
function refLayer(name) {
if (NN) { return document.layers[name]; }
else { return eval("document.all." + name + ".style"); }
}
// Hide or show the animal guide
function menuManager() {
if (isVis) { hideLayer("menu"); }
else { showLayer("menu"); }
isVis = !isVis;
}
// Function to change slides if the user navigates with the arrows
function changeSlide(offset) {
// Hide the existing Layer
hideLayer("slide" + curSlide);
// Calculate the next layer index number
curSlide = (curSlide + offset < 0 ? slideShow.length - 1 :
(curSlide + offset == slideShow.length ? 0 : curSlide + offset));
// Show the desired layer
showLayer("slide" + curSlide);
}
// Function to change the slide if user navigates with the menu
function setSlide(ref) {
if (tourOn) { return; }
hideLayer("slide" + curSlide);
curSlide = ref;
showLayer("slide" + curSlide);
}
// Image rollover function
function imageSwap(imagePrefix, imageIndex, isOver) {
if (isOver) { document[imagePrefix].src = imgOver[imageIndex].src; }
else { document[imagePrefix].src = imgOut[imageIndex].src; }
}
// Places an empty string in the status bar to avoid annoying URL displays
function hideStatus() { window.status = ""; }
// Start or stop the automated tour
function autoPilot() {
// Stop the tour if it is running
if (tourOn) {
clearInterval(auto);
imageSwap(slideShow[curSlide].name, curSlide, false);
}
// Otherwise begin the tour from the currently viewed slide
else {
auto = setInterval("automate()", showSpeed);
imageSwap(slideShow[curSlide].name, curSlide, true);
// Show the menu if it is not currrently visible
showLayer("menu");
visible = true;
}
tourOn = !tourOn;
}
// Automate the slideshow
function automate() {
// Incite the image rollver
imageSwap(slideShow[curSlide].name, curSlide, false);
// Incite the slide change
changeSlide(1);
// Incite the image rollver
imageSwap(slideShow[curSlide].name, curSlide, true);
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=WHITE>
<CENTER>
<FONT FACE=Arial>
<H2>Animal Kingdom Slideshow</H2>
</FONT>
</CENTER>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
genScreen();
//-->
</SCRIPT>
</FONT>
</BODY>
</HTML>
Creating a Slide Show Using a Random Number Generator
/*
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>
<H1>View a slide show of our garden today!</H1>
<FORM>
<TABLE cellpadding=20 cellspacing=2 0>
<TR>
<TD>
<INPUT type=button value="Show in Order" name=theButton
onClick="inOrder();">
</TD>
<TD>
<INPUT type=button value="Random and Repeat"
name=theButton onClick="showRandom();">
</TD>
<TD>
<INPUT type=button value="Stop" name=theButton
onClick="clearTimeout(timeOutId);">
</TD>
</TR>
</TABLE>
<BR>
</FORM>
<IMG name=slideshow src="http://www.bearhome.ru/garden/images/gard6.jpg"
width=500 border=5>
</BODY>
</HTML>
DHTML Slide Show
<!--
Example File From "JavaScript and DHTML Cookbook"
Published by O"Reilly & Associates
Copyright 2003 Danny Goodman
-->
<!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()">
<h1>U.S. Bill of Rights</h1>
<hr id="titleBar" />
<div id="controller">
<form>
<input type="button" value="Prev" onclick="prev()" />
<input type="button" value="Next" onclick="next()" />
</form>
</div>
<div id="slides">
<div id="slide1" class="slide">
<h2>ARTICLE I</h2>
<hr />
<p>
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.
</p>
<ul>
<li>Note 1</li>
<li>Note 2</li>
<li>Note 3</li>
</ul>
</div>
<div id="slide2" class="slide">
<h2>ARTICLE II</h2>
<hr />
<p>
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.
</p>
<ul>
<li>Note 1</li>
<li>Note 2</li>
<li>Note 3</li>
</ul>
</div>
<div id="slide3" class="slide">
<h2>ARTICLE III</h2>
<hr />
<p>
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.
</p>
<ul>
<li>Note 1</li>
<li>Note 2</li>
<li>Note 3</li>
</ul>
</div>
<div id="slide4" class="slide">
<h2>ARTICLE IV</h2>
<hr />
<p>
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.
</p>
<ul>
<li>Note 1</li>
<li>Note 2</li>
<li>Note 3</li>
</ul>
</div>
<div id="slide5" class="slide">
<h2>ARTICLE V</h2>
<hr />
<p>
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.
</p>
<ul>
<li>Note 1</li>
<li>Note 2</li>
<li>Note 3</li>
</ul>
</div>
<div id="slide6" class="slide">
<h2>ARTICLE VI</h2>
<hr />
<p>
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.
</p>
<ul>
<li>Note 1</li>
<li>Note 2</li>
<li>Note 3</li>
</ul>
</div>
<div id="slide7" class="slide">
<h2>ARTICLE VII</h2>
<hr />
<p>
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.
</p>
<ul>
<li>Note 1</li>
<li>Note 2</li>
<li>Note 3</li>
</ul>
</div>
<div id="slide8" class="slide">
<h2>ARTICLE VIII</h2>
<hr />
<p>
Excessive bail shall not be required, nor excessive fines imposed, nor cruel and unusual punishments inflicted.
</p>
<ul>
<li>Note 1</li>
<li>Note 2</li>
<li>Note 3</li>
</ul>
</div>
<div id="slide9" class="slide">
<h2>ARTICLE IX</h2>
<hr />
<p>
The enumeration in the Constitution, of certain rights, shall not be construed to deny or disparage others retained by the people.
</p>
<ul>
<li>Note 1</li>
<li>Note 2</li>
<li>Note 3</li>
</ul>
</div>
<div id="slide10" class="slide">
<h2>ARTICLE X</h2>
<hr />
<p>
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.
</p>
<ul>
<li>Note 1</li>
<li>Note 2</li>
<li>Note 3</li>
</ul>
</div>
</div>
</body>
</html>
slide show Demo
<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 = "<table border="1" cellspacing="0" cellpadding="10" align="center">";
salida += "<tr>";
salida += "<td align="center" valign="middle"";
if( _MODO_SLIDE == "normal" )
{
salida += " colspan="2">";
}else{
salida += " colspan="6">";
}
if(this.lista_imagenes.length == 0)
{
salida += "<b>:: Imágenes todavía sin definir ::</b>";
}else{
salida += "<img border="0"id=""+ this.nombre_imagen +"" src="" + _RUTA_FOTOS + this.lista_imagenes[this.posicion] +"">";
}
salida += "</td>";
if(this.lista_imagenes.length != 0)
{
// si hay imágenes definidas
salida += "</tr>";
// botón de primera
if(_MODO_SLIDE == "full_mode" )
{
salida += "<td align="center">";
salida += "<a id="primera" href="#" onClick="" + this.nombre_objeto + ".primera(); return false;">:: primera ::</a>";
salida +="</td>";
}
// botones de anterior y siguiente
salida += "<td align="center">";
salida += "<a id="anterior" href="#" onClick="" + this.nombre_objeto + ".anterior(); return false;">:: anterior ::</a>";
salida += "</td>";
salida += "<td align="center">";
salida += "<a id="siguiente" href="#" onClick="" + this.nombre_objeto + ".siguiente(); return false;">:: siguiente ::</a>";
salida += "</td>";
// botón de última
if(_MODO_SLIDE == "full_mode" )
{
salida += "<td align="center">";
salida += "<a id="ultima" href="#" onClick="" + this.nombre_objeto + ".ultima(); return false;">:: última ::</a>";
salida += "</td>";
}
// controles de reproducción automática
if(_MODO_SLIDE == "full_mode" )
{
salida += "<td align="center">";
salida += "<a id="auto" href="#" onClick="" + this.nombre_objeto + ".auto();">:: auto ::</a>";
salida += "</td>";
salida += "<td align="center">";
salida += "<a id="stop" href="#" onClick="" + this.nombre_objeto + ".stop();">:: stop ::</a>";
salida += "</td>";
}
salida += "<tr>";
}
salida += "</table>";
document.writeln(salida);
}
/***** END *****/
</script>
</head>
<body>
<h3 align="center">ejemplo de utilización del slideshow</h3>
<hr noshade>
<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>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/slideshow.zip">slideshow.zip( 285 k)</a>
Slide Show: Mixed Slides, Next Slide, Previous Slide
<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>
<p><font face="Arial" size="4">ImageClip Slide Show</font></p>
<a href="javascript:;" onclick="projector.playAnimation(false,"1>5");">Show Slides >></a><br>
<a href="javascript:;" onclick="projector.playAnimation(false,"1<5");"> << Show Slides</a><br><br>
<a href="javascript:;" onclick="projector.playAnimation(false,"1<3,5,2,1,4,2,4");"> Mixed Slides</a><br><br>
<a href="javascript:;" onclick="slide++;if(slide>5) slide=5;projector.setFrame(slide);"> Next Slide ></a><br>
<a href="javascript:;" onclick="slide--;if(!slide) slide=1;projector.setFrame(slide);"> < Previous Slide</a>
<script>
dynapi.document.insertAllChildren();
</script>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
