js實現(xiàn)幻燈片播放圖片示例代碼
更新時間：2013年11月07日 17:15:54 作者：
幻燈片播放圖片的效果想必大家都有見到過吧，下面有個不錯的示例，感興趣的朋友可以參考下
1，在頁面添加下面的元素。展示出置出圖片文件列表文件。
<select id="img_date" style="width: 100%; margin-top: 10px; height: 50%;" size="20">
<option value="圖片的url">圖片名字</option>
</select>
2，播放文件列表的方法。主要是遍歷文件列表并把圖片展示在相應(yīng)的圖片容器就可以顯示出幻燈片的效果。
可以用延時的方法調(diào)用遍歷方法：window.setInterval("PlayPics()", speed);
/**
* 播放圖片的處理方法
* */
function PlayPics()
{
var sel = document.getElementById("img_date");
if(sel.length==0)//沒有圖片時直接返回
{
return;
}
else
{
if(sel.selectedIndex>0)//被選中的下標大于0時就設(shè)置上一圖片項被選中。
{
sel.options[sel.selectedIndex-1].selected=true;
}
else{//如果是被選中項的下標是0，就設(shè)置最后一張圖片為被選中。
sel.options[sel.length-1].selected=true;
}
ChangePic(sel.options[sel.selectedIndex].value);//獲取選中的圖片，并把圖片的url設(shè)置到相應(yīng)的圖片容器中。
//這個方法可以根據(jù)自己的需要進行修改。
}
};
復(fù)制代碼 代碼如下:
<select id="img_date" style="width: 100%; margin-top: 10px; height: 50%;" size="20">
<option value="圖片的url">圖片名字</option>
</select>
2，播放文件列表的方法。主要是遍歷文件列表并把圖片展示在相應(yīng)的圖片容器就可以顯示出幻燈片的效果。
可以用延時的方法調(diào)用遍歷方法：window.setInterval("PlayPics()", speed);
復(fù)制代碼 代碼如下:
/**
* 播放圖片的處理方法
* */
function PlayPics()
{
var sel = document.getElementById("img_date");
if(sel.length==0)//沒有圖片時直接返回
{
return;
}
else
{
if(sel.selectedIndex>0)//被選中的下標大于0時就設(shè)置上一圖片項被選中。
{
sel.options[sel.selectedIndex-1].selected=true;
}
else{//如果是被選中項的下標是0，就設(shè)置最后一張圖片為被選中。
sel.options[sel.length-1].selected=true;
}
ChangePic(sel.options[sel.selectedIndex].value);//獲取選中的圖片，并把圖片的url設(shè)置到相應(yīng)的圖片容器中。
//這個方法可以根據(jù)自己的需要進行修改。
}
};
相關(guān)文章
在JavaScript編程中,經(jīng)常會涉及到對象賦值和拷貝的操作,本文主要介紹了JavaScript 拷貝賦值的具體使用,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-08-08
JS不同運算符下隱式類型轉(zhuǎn)換的實現(xiàn)示例
隱式轉(zhuǎn)換就是自動轉(zhuǎn)換,通常發(fā)生在一些數(shù)學(xué)運算中,本文就來介紹一下JS不同運算符下隱式類型轉(zhuǎn)換的實現(xiàn)示例,具有一定的參考價值,感興趣的可以了解一下2023-12-12
在js面試中快速排序和數(shù)組去重是比較常問的面試題，下面小編給大家分享下我對JS實現(xiàn)快速排序和去重的理解，感興趣的朋友一起看看吧2016-10-10
這篇文章主要為大家詳細介紹了JS實現(xiàn)碰撞檢測效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
今天無事逛網(wǎng)，突然發(fā)現(xiàn)了一個很有趣的事情，（也許只有我覺得有趣）.我看到一圖片竟然在我拖動滾動條的時候沒有動，也許你會說我少見多怪，不信你去找個這樣的我看看，很少有的，一般的都是一拖動圖片就在那跳得厲害。2010-01-01
這篇文章主要介紹了JavaScript設(shè)計模式之抽象工廠模式介紹,抽象工廠模式就是對功能類單獨創(chuàng)建工廠類,這樣就不必修改之前的代碼,又擴展了功能,需要的朋友可以參考下2014-12-12
客戶端 使用XML DOM加載json數(shù)據(jù)的方法
我們?nèi)〕鰯?shù)據(jù)后可以以json的形式傳到前端處理，也可以以Xml Dom的形式傳到前端進行處理。下邊例子是利用Jquery處理XML Dom的例子。2010-09-09
這篇文章主要介紹了es6中new.target的作用和使用場景,結(jié)合簡單示例形式分析了es6中new.target的基本功能、原理、使用方法及操作注意事項,需要的朋友可以參考下2020-03-03
微信小程序中我們創(chuàng)建頁面時會自動創(chuàng)建四個文件分別為js文件,wxml文件wxss文件最后還有我們今天的主角json配置文件,下面這篇文章主要給大家介紹了關(guān)于微信小程序全局配置以及頁面配置的相關(guān)資料,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了js獲取圖片的base64編碼并壓縮，幫助大家更好的理解和使用js，感興趣的朋友可以了解下2020-12-12