Text Slide Show
In this tutorial I'll show you how to create a text slideshow in javascript
This script will rotate display a different message after a certain amount of time, in an infinite loop.
I included only 6 quotations but you can add as many as you want just adding a line where the array elemetns are declared.
<SCRIPT type="text/javascript">
var quotations = new Array()
quotations[0]= "I have not failed. I've just found 10,000 ways that won't work.<br/><b>Thomas Alva Edison</b>"
quotations[1]= "The great thing about a computer notebook is that no matter how much you stuff into it, it doesn't get bigger or heavier.<br/><b>Bill Gates</b>"
quotations[2]= "Computers make it easier to do a lot of things, but most of the things they make it easier to do don't need to be done.<br/><b>Andy Rooney</b>"
quotations[3]= "Only two things are infinite, the universe and human stupidity, and I'm not sure about the former.<br/><b>Albert Einstein</b>"
quotations[4]= "Whether you think that you can, or that you can't, you are usually right.</br><b>Henry Ford</b>"
quotations[5]= "I'm going to be a great movie star some day.<br/><b>Marilyn Monroe</b>"
function display()
{
a=Math.floor(Math.random()*quotations.length)
document.getElementById('quotation').innerHTML=quotations[a]
setTimeout("display()",5000)
}
</SCRIPT>
The array that contains the quotations is named "quotations".var quotations = new Array()
quotations[0]= "I have not failed. I've just found 10,000 ways that won't work.<br/><b>Thomas Alva Edison</b>"
quotations[1]= "The great thing about a computer notebook is that no matter how much you stuff into it, it doesn't get bigger or heavier.<br/><b>Bill Gates</b>"
quotations[2]= "Computers make it easier to do a lot of things, but most of the things they make it easier to do don't need to be done.<br/><b>Andy Rooney</b>"
quotations[3]= "Only two things are infinite, the universe and human stupidity, and I'm not sure about the former.<br/><b>Albert Einstein</b>"
quotations[4]= "Whether you think that you can, or that you can't, you are usually right.</br><b>Henry Ford</b>"
quotations[5]= "I'm going to be a great movie star some day.<br/><b>Marilyn Monroe</b>"
function display()
{
a=Math.floor(Math.random()*quotations.length)
document.getElementById('quotation').innerHTML=quotations[a]
setTimeout("display()",5000)
}
</SCRIPT>
The display function generates a random number between 0 and the length of the array quotations and stores it into the variable "a"
Not that the div in which we call the display() function has an id, "quotation".
With the document.getElementByID method we select the element named "quotation" and modify the internal HTML with the innerHTML=quotations[a], so the selected quotation is stored in the variable "a".
The setTimeout function sets the script to run itself each time after 5 seconds (the time is expressed in milliseconds, 5000)
Put the part between <SCRIPT> and </SCRIPT> before </HEAD>.
<div id="quotation">
<SCRIPT type="text/javascript">display()</SCRIPT>
</div>
In the div we call the display() function because it needs to be called once to start the loop.<SCRIPT type="text/javascript">display()</SCRIPT>
</div>
Note that the quotations contain some HTML code, this open wide possibilities on what you can do altering the internal HTML.
You could add an element of this kind to the array and have a banner displayed (change the path to the image, this one won't work)
quotations[6]= "<a href="http://www.google.com"><img src="http://www.example.com/banner.gif" border="0"></a>"
