網誌地址遷至 www.myWoolf.com

JavaScript: Slideshow (Random) 随机幻灯片

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

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


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>

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

Gambateh~ Happy learning~ (to myself) *grin

//**
本来想要中文与英文同在的,可是不知不觉就避开麻烦的事……

真的不要写“我·我·我”了吗?不太可能吧。


分享到微信

2 則留言 臉書留言

凡走過必留下痕跡,您的一個留言就是很大的鼓勵!

(: 沒有 Blogger 帳號的讀者,請選擇『名稱/網址』留下您的大名! :)

  1. 学海部落会员?!
    尊姓大名?

    回覆刪除
  2. [RE: viory_yew]
    嗯嗯……敝姓冥,身份是被五湖四海追殺的一鬼組組長。(大誤!)

    以前叫 MeteorStorm,被大氣層摩擦生熱燒一回後 還倒霉透頂 中六合彩都沒那麼準地 掉進學海裡就浮也浮不起來,美其名一直在潛水…潛到窒息後才偶爾浮起來換氣的不活躍會員。

    回覆刪除

Copyright © 2007- Zed Woolf, licensed under CC BY-NC-ND 4.0.