Text slideshow in javascript

In this javascript tutorial we will learn how to develop text slideshow in javascript. Sometimes it become a necessary requirement to develop a text slideshow in the website so to avoid use of Flash because flash makes the webpage heavier and sometimes reader of the website don’t have any flash reader installed in web browser so its better to use javascript to develop the text slideshow.

Let’s have a look over code to understand how to implement text slideshow in javascript.

<html>

<head>

<title>Text Slideshow in javascript</title>

var slideArray = new Array()

slideArray[0]= "Here comes the <strong>First Slide</strong>.<br> Some of text goes here ";

slideArray[1]= "<strong>Second Slide</strong>.<br> Some of text goes here ";

function firstSlide()

{

document.getElementById('div_display').innerHTML=slideArray[0];

setTimeout("secondSlide()",10000);

}

function secondSlide()

{

document.getElementById('div_display').innerHTML=slideArray[1];

setTimeout("firstSlide()",10000);

}

</script>

</head>

<body>

<tr>

<td>

<div id="div_display"><script type="text/javascript" language="javascript">firstSlide();</script></div>

</td>

</tr>

</table>

</body>

</html>

Now it’s turn to understand the code.

First of all I have made an array and give it a name slideArray and put two elements in this array. Then I made a javascript function to display first array element, I give firstSlide() name to that javascript function. In this function I am assigning the first array element to the div so that it can be display in the div then I use built-in javascript function setTimeout() function that will redirect focus to the secondSlide() function so that second slide can also be displayed after ten seconds. Yeah you are right, 10000 means ten seconds delay.

Now let’s suppose a case in which you have five slides to display and you want to display them randomly. Let’s look on how to do this

var slideArray = new Array()

slideArray[0]= "Here comes the <strong>First Slide</strong>.<br> Some of text goes here ";

slideArray[1]= "<strong>Second Slide</strong>.<br> Some of text goes here";

slideArray[2]= "<strong>Third Slide</strong>.<br> Some of text goes here";

slideArray[3]= "<strong>Fourth Slide</strong>.<br> Some of text goes here";

slideArray[4]= "<strong>Fifth and Final Slide</strong>.<br> Some of text goes here ";

function textSlideShow()

{

var total_slides;

total_slides=Math.floor(Math.random()*slideArray.length)

document.getElementById('div_display').innerHTML=slideArray[total_slides];

setTimeout("textSlideShow()",10000);

}

</script>

And then call this javascript function inside the div element in which you want to display text slideshow like below.

<div id="div_display"><script type="text/javascript" language="javascript"> textSlideShow();</script></div>

Every time you will get random slide.

Now let’s suppose a case in which you want to show text coming from database in slideshow rather than static text.

First of all use any web programming language such as php, asp.net, asp to get data from database and then assign that data to different textboxes and hide these textboxes then do this to get data from textbox and use that data as a text in slideshow.

<html>

<head>

<title>Text Slideshow in javascript</title>

var slideArray = new Array()

var myName,myAge;

function firstSlide()

{

myName=document.getElementById('txt_Name').value;

slideArray[0]=myName;

document.getElementById('div_display').innerHTML=slideArray[0];

setTimeout("secondSlide()",10000);

}

function secondSlide()

{

myAge =document.getElementById('txt_Age').value;

slideArray[1]=myAge;

document.getElementById('div_display').innerHTML=slideArray[1];

setTimeout("firstSlide()",10000);

}

</script>

</head>

<body>

<tr>

<td>

<div id="div_display"><script type="text/javascript" language="javascript">firstSlide();</script></div>

</td>

</tr>

</form>

</table>

</body>

</html>

So these are the different methods that you can use to develop text slideshow in javascript. I hope you like this article.

Happy Coding…!

10 comments:

Anonymous

This is GREAT!! But if you want to change the font and size... How do you do it?

June 19, 2009 at 1:22 PM

erockodessey

total_slides=Math.floor(Math.random()*slideArray.length)

Throws a syntax error

April 23, 2010 at 12:49 PM

Arman Malik

Hy erockodessey, please check your javascript code, because this code is working fine.

May 4, 2010 at 9:40 PM

this is gr8

June 7, 2010 at 5:19 AM

how do you change font color and add a link?

July 14, 2010 at 10:33 AM

Just change the end of your function to include: .fontcolor("color");

Ex:
function firstSlide()
{
document.getElementById('div_display').innerHTML=slideArray[0].fontcolor("black");
setTimeout("secondSlide()",10000);
}

July 29, 2010 at 10:26 PM

How would you center the text?
Thanks for the code.

November 30, 2010 at 3:46 PM

You can center align text by using align attribute of div which is

<div id="div_display" align="center"><script type="text/javascript" language="javascript">firstSlide();</script></div>
OR
if you want to center align the text of any specific slide then you can write your code just like this

function firstSlide()
{
document.getElementById('div_display').innerHTML=slideArray[0].fontcolor("red");
document.getElementById('div_display').style.textAlign="center";
setTimeout("secondSlide()",10000);
}

December 1, 2010 at 9:14 AM

Cadonhanh

how do I put links to it? thanks

January 21, 2011 at 5:09 AM

Ryan

Wow!!! Thank you!!! I was looking for a text slideshow and didn't think I would get one!!!!!
http:\\sincerelykeff.blogspot.com
Slideshow is at bottom.

March 8, 2011 at 1:21 PM

Programming Tutorials

php tutorials, asp.net tutorials, jquery tutorials and all other web tutorials