JavaScript: Slideshow (Random) 随机幻灯片

前言一直很喜欢九把刀官网里页面左上角的幻灯片，也想给自己弄一个。在偷看查看了网页的原码后，发现原来是使用 <META> 标签设定一段时间后重载 Iframe ；而随机图片……跟我用作放横幅广告布条的 JavaScript 没太大的不同……有点失望呐。

由于嫌还要写一个 Iframe 太~~不方便~~麻烦，于是花了几乎一整天的时间在网上搜索（卻做了更花时间的事），终于…~~这个所谓的前言快写完了~~，找到这个……

Share on facebook

I found this on web today, a JavaScript slideshow which is simple and do not required external .js file (for my case). And the slideshow can be text, images, links, that is anything which can write using simple HTML! The content of the HTML can be formatted using CSS Stylesheet too.

简介这个幻灯片的内容可以是所有简单的 HTML 所能写出来的东西，不止可以是图片、链接、也可以是文本。（这是我最喜欢的，如果是图片幻灯的话，我还得再耗时间修改咧）内容可以直接用 CSS Stylesheet 更改格式。

The slideshow is RANDOM, which mean when it do not follow the order when changing to next slide. For example, it can be 3rd slide-1st slide-9th slide-11th slide-4th slide-9th slide-21st slide.

都说是随机的了，就是不会知道下一个幻灯是哪一个。

不要再说废话了，代码最重要。
Let's go into the code.

Click 继续阅读 to continue reading.

You may use this anywhere in the page, simply before the section you would like to display the Slideshow.

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



var slideArray = new Array()



slideArray[0]= "HTML code of 1st slide.";



slideArray[1]= "HTML code of 2nd slide.";



slideArray[2]= "HTML code of 3rd slide.";



slideArray[3]= "HTML code of 4th slide.";



slideArray[4]= "HTML code of 5th slide.";



function textSlideShow()



{



var total_slides;



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





document.getElementById('The ID of the section you like to display.').innerHTML=slideArray[total_slides];



setTimeout("textSlideShow()",Time interval (number only, in milliseconds));



}



</script>

And use this (or as long as the ID of section is correct/same with the function above) at where you like to display the slideshow.

<div id="The ID of the section you like to display."><script type="text/javascript" language="JavaScript">textSlideShow();</script></div>

Let's talk more about the code, as I had mentioned, the content of the slide can be anything which can written by simple HTML. But please note that the arrays are already using double Quotation mark ("), then you have to use single Quotation mark in your HTML tags to prevent conflict, for example:
slideArray[0]= "<a target='_blank' href='http://my.wolfsirius.info'><img src='http://files.wolfsirius.info/smile/unhappy.gif' alt='Unhappy'/></>";

You can create infinite number of array, the only thing you should remember is the numbering of array is start from zero [0] and should be continuous.

The time interval is in millisecond (ms), that is 1/1000 second, for example setTimeout("textSlideShow()",5000); the time interval between slide is 5 seconds.

//**

To help you understand how to use the code, here is the code for the sample above:

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



var slideArray = new Array()



slideArray[0]= "<img src='http://i356.photobucket.com/albums/oo1/siriusbandit/1_New.gif' alt='New!'/> JavaScript 教程";



slideArray[1]= "要学习时从<a href='http://nice-tutorials.blogspot.com/2009/04/text-slideshow-in-javascript.html' target='_blank'>这里</a>找来的。";



slideArray[2]= "<i>Random</i> 的中文叫随机，我总会想到这句“嫁鸡随鸡” :D";



slideArray[3]= "我搬到 <b>my.wolfsirius.info</b> 很久了…";



slideArray[4]= "© <img src='http://i356.photobucket.com/albums/oo1/siriusbandit/Zed_Signature_Trans_000.png' alt='Zed' height='13px'/> 200X - 20XX";



slideArray[5]= "毕竟我也在学习啊……";



function textSlideShow()



{



var total_slides;



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





document.getElementById('randomjs-sample4').innerHTML=slideArray[total_slides];



setTimeout("textSlideShow()",3000);



}



</script>

And the section is

<div id="randomjs-sample4" style='text-align:center;background:lightgreen;'>

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

Share on facebook

Updated I found that if more than one of this script (even with different array and in different section), conflict occurred and at least one of them do not work.

To solve this, simply change the name of the function and variables (the format of whole script is the same).

So I hope you can get an idea of doing this. *smile