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);
/**
* 播放圖片的處理方法
* */
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)行修改。
}
};
復(fù)制代碼 代碼如下:
<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)行修改。
}
};
您可能感興趣的文章:
- js手動(dòng)播放圖片實(shí)現(xiàn)圖片輪播效果
- JS實(shí)現(xiàn)的多張圖片輪流播放幻燈片效果
- javascript控制圖片播放的實(shí)現(xiàn)代碼
- JS特效實(shí)現(xiàn)圖片自動(dòng)播放并可控的效果
- javascript+html5實(shí)現(xiàn)仿flash滾動(dòng)播放圖片的方法
- javascript實(shí)現(xiàn)圖片循環(huán)漸顯播放的方法
- javascript 控制圖片播放代碼
- 比較炫的圖片播放器 js 焦點(diǎn)效果代碼
- js 新浪的一個(gè)圖片播放圖片輪換效果代碼
- JS實(shí)現(xiàn)圖片自動(dòng)播放效果
相關(guān)文章
在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)算符下隱式類(lèi)型轉(zhuǎn)換的實(shí)現(xiàn)示例
隱式轉(zhuǎn)換就是自動(dòng)轉(zhuǎn)換,通常發(fā)生在一些數(shù)學(xué)運(yùn)算中,本文就來(lái)介紹一下JS不同運(yùn)算符下隱式類(lèi)型轉(zhuǎn)換的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
在js面試中快速排序和數(shù)組去重是比較常問(wèn)的面試題，下面小編給大家分享下我對(duì)JS實(shí)現(xiàn)快速排序和去重的理解，感興趣的朋友一起看看吧2016-10-10
這篇文章主要為大家詳細(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ì)功能類(lèi)單獨(dú)創(chuàng)建工廠類(lèi),這樣就不必修改之前的代碼,又?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
微信小程序中我們創(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，感興趣的朋友可以了解下2020-12-12