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
復(fù)制代碼 代碼如下:
<?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
復(fù)制代碼 代碼如下:
<img id="image1" name="image1" src="image/64_jpg.jpg" style="cursor:hand; width: 110px; height: 103px;"/>
javascript
復(fù)制代碼 代碼如下:
<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正則表達(dá)式來格式化XML內(nèi)容
- javascript實現(xiàn)加載xml文件的方法
相關(guān)文章
javascript中打印當(dāng)前的時間實現(xiàn)思路及代碼
打印當(dāng)前的時間的方法有很多,在本文為大家詳細(xì)介紹下使用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實現(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)簡單的鼠標(biāo)滑過tab項切換對應(yīng)菜單的功能,涉及javascript鼠標(biāo)事件控制頁面元素的遍歷與樣式改變實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08

