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…!

Programming Tutorials

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