|
Answer» how to make slideahow with javascript?I don't know how your layout is, but try this.
Code: [Select]<script TYPE="text/javascript">
<!--
var Current_Picture=0;
//TIME to show each slide for in seconds
var ShowSlideFor=3;
var Repeat=false;
function ChangePicture() {
//Add all your pictures here, relative location from the page in which the script is on or exact location
var Pictures=new Array("picture1.jpg", "picture2.jpg", "etc");
if (Current_Picture >= Pictures.length) {
if (Repeat) {
Current_Picture=0;
}
else {
return;
}
}
//Edit this if you want certain styles, sizing, etc. Make sure to escape your quotes (by using the backslash and the quote \" )
document.getElementById("picturediv").innerHTML="<img SRC=\"" + Pictures[Current_Picture] + "\" alt=\"Picture "+ Current_Picture + "\" />";
Current_Picture++;
var theTimeout = SETTIMEOUT("ChangePicture()", ShowSlideFor*1000);
}
//-->
</script>
and the body tag should look like this:
Code: [Select]<body onload="ChangePicture()">
and this div tag goes whereever you want the picture to appear.
Code: [Select]<div id="picturediv"></div>
That's not really a slideshow, or at least an advanced one, it just cycles through pictures at an even interval (set by you) and will repeat if asked to.What trevorpe says is good.
If you also want a fade-in-and-out, you'll need to look into doing something like:
Code: [Select]function fadeIn(objectID) {
object = document.getElementById(objectID);
object.style.opacity = '0';
animatefadein = function() {
if( object.style.opacity < 1 ){
var current = Number(object.style.opacity);
var newopac = current + 0.1;
object.style.opacity = String(newopac);
//object.style.filter = 'alpha(opacity=' + String(newopac) + ')';
setTimeout("animatefadein()", 50);
}
}
animatefadein();
}
And CALLING it as appropriate.
|
