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>

<script type="text/javascript" language="javascript">

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>

<table width="100%" cellpadding="2" cellspacing="2">

<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

<script type="text/javascript" language="javascript">

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>

<script type="text/javascript" language="javascript">

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>

<table width="100%" cellpadding="2" cellspacing="2">

<form name="form1">

<tr>

<td>

<input type="text" id="txt_Name" style="display:none;" value="Hello"><br>

<input type="text" id="txt_Age" style="display:none;" value="Hello2">

<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?

  • erockodessey
     

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

    Throws a syntax error

  • Adeel Fakhar
     

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

  • Anonymous
     

    this is gr8

  • Anonymous
     

    how do you change font color and add a link?

  • Anonymous
     

    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);
    }

  • Anonymous
     

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

  • Adeel Fakhar
     

    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);
    }

  • Cadonhanh
     

    how do I put links to it? thanks

  • 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.