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，播放文件列表的方法。主要是遍歷文件列表并把圖片展示在相應的圖片容器就可以顯示出幻燈片的效果。
可以用延時的方法調用遍歷方法：window.setInterval("PlayPics()", speed);
/**
* 播放圖片的處理方法
* */
function PlayPics()
{
var sel = document.getElementById("img_date");
if(sel.length==0)//沒有圖片時直接返回
{
return;
}
else
{
if(sel.selectedIndex>0)//被選中的下標大于0時就設置上一圖片項被選中。
{
sel.options[sel.selectedIndex-1].selected=true;
}
else{//如果是被選中項的下標是0，就設置最后一張圖片為被選中。
sel.options[sel.length-1].selected=true;
}
ChangePic(sel.options[sel.selectedIndex].value);//獲取選中的圖片，并把圖片的url設置到相應的圖片容器中。
//這個方法可以根據自己的需要進行修改。
}
};
復制代碼 代碼如下:
<select id="img_date" style="width: 100%; margin-top: 10px; height: 50%;" size="20">
<option value="圖片的url">圖片名字</option>
</select>
2，播放文件列表的方法。主要是遍歷文件列表并把圖片展示在相應的圖片容器就可以顯示出幻燈片的效果。
可以用延時的方法調用遍歷方法：window.setInterval("PlayPics()", speed);
復制代碼 代碼如下:
/**
* 播放圖片的處理方法
* */
function PlayPics()
{
var sel = document.getElementById("img_date");
if(sel.length==0)//沒有圖片時直接返回
{
return;
}
else
{
if(sel.selectedIndex>0)//被選中的下標大于0時就設置上一圖片項被選中。
{
sel.options[sel.selectedIndex-1].selected=true;
}
else{//如果是被選中項的下標是0，就設置最后一張圖片為被選中。
sel.options[sel.length-1].selected=true;
}
ChangePic(sel.options[sel.selectedIndex].value);//獲取選中的圖片，并把圖片的url設置到相應的圖片容器中。
//這個方法可以根據自己的需要進行修改。
}
};
相關文章
JavaScript中的普通函數(shù)與構造函數(shù)比較
這篇文章主要介紹了JavaScript中的普通函數(shù)與構造函數(shù)比較,需要的朋友可以參考下2015-04-04
一直用document.write()方法向瀏覽器中顯示數(shù)據用，把它當做Alert()使用， 看來這樣用有些大材小用了，下面說說它的主要用處。2014-05-05
這篇文章主要介紹了Postman動態(tài)獲取返回值過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-06-06
這篇文章主要介紹了uni-app實現(xiàn)點贊評論功能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
這篇文章主要介紹了JavaScript JMap類定義與使用方法,涉及javascript類的定義、內部變量、函數(shù)的定義及使用相關操作技巧,需要的朋友可以參考下2019-01-01
本篇文章給大家分享了JavaScript滿天星導航欄實現(xiàn)方法，以前也介紹過很多關于特效導航的制作方法，對此有興趣的朋友參考學習下。2018-03-03
JavaScript模擬實現(xiàn)簡單的MVC的示例詳解
MVC是一種常見的軟件架構模式，MVC模式的目的是將應用程序的數(shù)據、用戶界面和控制邏輯分離，提高代碼的可維護性，可拓展性和可重用性。本文就來用用JS模擬實現(xiàn)一個簡單的MVC吧2023-04-04
這篇文章主要為大家詳細介紹了js如何找出字符串中的最長回文串的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06
JS如何從一個數(shù)組中隨機取出一個元素或者幾個元素呢？其實方法很簡單，下面小編給大家分享了JS隨機取出幾個數(shù)組元素的方法，非常不錯，需要的朋友參考下2016-08-08
本篇文章主要是對JS 獲取各種瀏覽器窗口大小的方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01