javascript+xml實現(xiàn)簡單圖片輪換(只支持IE)
更新時間：2012年12月23日 14:54:04 作者：
看著許多網(wǎng)站都有廣告自動輪換;自己試著寫了一個圖片輪換,代碼和功能都很簡單,只支持IE的,FF的還要加些東東,需要了解的朋友可以參考下
最近無聊,看著許多網(wǎng)站都有廣告自動輪換,自己試著寫了一個圖片輪換,代碼和功能都很簡單,只支持IE的,FF的還要加些東東.
xml文件:test.xml
<?xml version="1.0" encoding="gb2312"?>
<ad>
<neteasy path="image/64_jpg.jpg">http://www.163.com</neteasy>
<sina path="image/lining.jpg">http://www.sina.com.cn</sina>
<sohu path="image/Image00045.jpg">http://www.sohu.com</sohu>
</ad>
HTML
<img id="image1" name="image1" src="image/64_jpg.jpg" style="cursor:hand; width: 110px; height: 103px;"/>
javascript
<script>
//圖片輪換
var a = 0 ;
var xmlDoc;
var image1 = document.getElementById("image1");
function loadxml(path)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.load(path);
}
loadxml("test.xml");
function changeImage()
{
var ad = xmlDoc.getElementsByTagName("ad")[0];
if(a == ad.childNodes.length)
{
a=0;
}
var path = ad.childNodes[a].getAttribute("path");
var url = ad.childNodes[a].text;
image1.src = path;
image1.onclick = function(){window.open(url);};
a+=1;
setTimeout("changeImage()",1000);
}
changeImage();
</script>
xml文件:test.xml
復制代碼 代碼如下:
<?xml version="1.0" encoding="gb2312"?>
<ad>
<neteasy path="image/64_jpg.jpg">http://www.163.com</neteasy>
<sina path="image/lining.jpg">http://www.sina.com.cn</sina>
<sohu path="image/Image00045.jpg">http://www.sohu.com</sohu>
</ad>
HTML
復制代碼 代碼如下:
<img id="image1" name="image1" src="image/64_jpg.jpg" style="cursor:hand; width: 110px; height: 103px;"/>
javascript
復制代碼 代碼如下:
<script>
//圖片輪換
var a = 0 ;
var xmlDoc;
var image1 = document.getElementById("image1");
function loadxml(path)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.load(path);
}
loadxml("test.xml");
function changeImage()
{
var ad = xmlDoc.getElementsByTagName("ad")[0];
if(a == ad.childNodes.length)
{
a=0;
}
var path = ad.childNodes[a].getAttribute("path");
var url = ad.childNodes[a].text;
image1.src = path;
image1.onclick = function(){window.open(url);};
a+=1;
setTimeout("changeImage()",1000);
}
changeImage();
</script>
您可能感興趣的文章:
- JavaScript操作XML/HTML比較常用的對象屬性集錦
- JavaScript操作XML文件之XML讀取方法
- JavaScript實現(xiàn)將xml轉(zhuǎn)換成html table表格的方法
- JavaScript將XML轉(zhuǎn)成JSON的方法
- Javascript 讀取操作Sql中的Xml字段
- 用javascript讀取xml文件讀取節(jié)點數(shù)據(jù)
- javascript讀取Xml文件做一個二級聯(lián)動菜單示例
- javascript創(chuàng)建createXmlHttpRequest對象示例代碼
- javascript讀取xml實現(xiàn)javascript分頁
- 如何使用Javascript正則表達式來格式化XML內(nèi)容
- javascript實現(xiàn)加載xml文件的方法
相關(guān)文章
javascript中打印當前的時間實現(xiàn)思路及代碼
打印當前的時間的方法有很多，在本文為大家詳細介紹下使用javascript是如何做到的，具體實現(xiàn)如下，感興趣的朋友可以參考下2013-12-12
JavaScript中字符串與Unicode編碼互相轉(zhuǎn)換的實現(xiàn)方法
這篇文章主要介紹了JavaScript中字符串與Unicode編碼互相轉(zhuǎn)換的實現(xiàn)方法涉及JavaScript編碼、數(shù)據(jù)類型等的轉(zhuǎn)換技巧,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了js獲取video任意時間的畫面截圖，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
下面小編就為大家?guī)硪黄猨s中變量的連續(xù)賦值(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
利用js實現(xiàn)在瀏覽器狀態(tài)欄顯示訪問者在本頁停留的時間
本文為大家介紹下利用JavaScript實現(xiàn)在瀏覽器狀態(tài)欄顯示停留時間即在狀態(tài)欄上顯示訪問者在本頁停留的時間2013-12-12
js實現(xiàn)黑色簡易的滑動門網(wǎng)頁tab選項卡效果
這篇文章主要介紹了js實現(xiàn)黑色簡易的滑動門網(wǎng)頁tab選項卡效果,可實現(xiàn)簡單的鼠標滑過tab項切換對應菜單的功能,涉及javascript鼠標事件控制頁面元素的遍歷與樣式改變實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
本文主要介紹了JS圖片壓縮的簡單實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
這篇文章主要為大家詳細介紹了原生JavaScript實現(xiàn)幻燈片效果，文中安裝步驟介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-02-02
這篇文章主要介紹了禁止IE用右鍵的JS代碼，有需要的朋友可以參考一下2013-12-12
今天小編就為大家分享一篇layui問題之模擬select點擊事件的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08