js實(shí)現(xiàn)幻燈片播放圖片示例代碼

更新時(shí)間：2013年11月07日 17:15:54 作者：

幻燈片播放圖片的效果想必大家都有見(jiàn)到過(guò)吧，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下

1，在頁(yè)面添加下面的元素。展示出置出圖片文件列表文件。

 
<select id="img_date" style="width: 100%; margin-top: 10px; height: 50%;" size="20"> 
<option value="圖片的url">圖片名字</option> 
</select> 

2，播放文件列表的方法。主要是遍歷文件列表并把圖片展示在相應(yīng)的圖片容器就可以顯示出幻燈片的效果。

可以用延時(shí)的方法調(diào)用遍歷方法：window.setInterval("PlayPics()", speed);

復(fù)制代碼代碼如下:

 
/** 
* 播放圖片的處理方法 
* */ 
function PlayPics() 
{ 
var sel = document.getElementById("img_date"); 
if(sel.length==0)//沒(méi)有圖片時(shí)直接返回 
{ 
return; 
} 
else 
{ 
if(sel.selectedIndex>0)//被選中的下標(biāo)大于0時(shí)就設(shè)置上一圖片項(xiàng)被選中。 
{ 
sel.options[sel.selectedIndex-1].selected=true; 
} 
else{//如果是被選中項(xiàng)的下標(biāo)是0，就設(shè)置最后一張圖片為被選中。 
sel.options[sel.length-1].selected=true; 
} 
ChangePic(sel.options[sel.selectedIndex].value);//獲取選中的圖片，并把圖片的url設(shè)置到相應(yīng)的圖片容器中。 

//這個(gè)方法可以根據(jù)自己的需要進(jìn)行修改。 
} 
}; 

您可能感興趣的文章:

相關(guān)文章

JavaScript 拷貝賦值的具體使用
在JavaScript編程中,經(jīng)常會(huì)涉及到對(duì)象賦值和拷貝的操作,本文主要介紹了JavaScript 拷貝賦值的具體使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2024-08-08
JS不同運(yùn)算符下隱式類型轉(zhuǎn)換的實(shí)現(xiàn)示例
隱式轉(zhuǎn)換就是自動(dòng)轉(zhuǎn)換,通常發(fā)生在一些數(shù)學(xué)運(yùn)算中,本文就來(lái)介紹一下JS不同運(yùn)算符下隱式類型轉(zhuǎn)換的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下
2023-12-12
深入理解JS實(shí)現(xiàn)快速排序和去重
在js面試中快速排序和數(shù)組去重是比較常問(wèn)的面試題，下面小編給大家分享下我對(duì)JS實(shí)現(xiàn)快速排序和去重的理解，感興趣的朋友一起看看吧
2016-10-10
JS實(shí)現(xiàn)碰撞檢測(cè)效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)碰撞檢測(cè)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-03-03
js或css實(shí)現(xiàn)滾動(dòng)廣告的幾種方案
今天無(wú)事逛網(wǎng)，突然發(fā)現(xiàn)了一個(gè)很有趣的事情，（也許只有我覺(jué)得有趣）.我看到一圖片竟然在我拖動(dòng)滾動(dòng)條的時(shí)候沒(méi)有動(dòng)，也許你會(huì)說(shuō)我少見(jiàn)多怪，不信你去找個(gè)這樣的我看看，很少有的，一般的都是一拖動(dòng)圖片就在那跳得厲害。
2010-01-01
JavaScript設(shè)計(jì)模式之抽象工廠模式介紹
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之抽象工廠模式介紹,抽象工廠模式就是對(duì)功能類單獨(dú)創(chuàng)建工廠類,這樣就不必修改之前的代碼,又?jǐn)U展了功能,需要的朋友可以參考下
2014-12-12
客戶端使用XML DOM加載json數(shù)據(jù)的方法
我們?nèi)〕鰯?shù)據(jù)后可以以json的形式傳到前端處理，也可以以Xml Dom的形式傳到前端進(jìn)行處理。下邊例子是利用Jquery處理XML Dom的例子。
2010-09-09
es6中new.target的作用和使用場(chǎng)景簡(jiǎn)單示例分析
這篇文章主要介紹了es6中new.target的作用和使用場(chǎng)景,結(jié)合簡(jiǎn)單示例形式分析了es6中new.target的基本功能、原理、使用方法及操作注意事項(xiàng),需要的朋友可以參考下
2020-03-03
微信小程序全局配置以及頁(yè)面配置詳解
微信小程序中我們創(chuàng)建頁(yè)面時(shí)會(huì)自動(dòng)創(chuàng)建四個(gè)文件分別為js文件,wxml文件wxss文件最后還有我們今天的主角json配置文件,下面這篇文章主要給大家介紹了關(guān)于微信小程序全局配置以及頁(yè)面配置的相關(guān)資料,需要的朋友可以參考下
2022-07-07
js獲取圖片的base64編碼并壓縮
這篇文章主要介紹了js獲取圖片的base64編碼并壓縮，幫助大家更好的理解和使用js，感興趣的朋友可以了解下
2020-12-12