快捷導(dǎo)航

純js實(shí)現(xiàn)背景圖片切換效果代碼

更新時(shí)間：2010年11月14日 22:38:54 作者：

現(xiàn)在純粹用js的人越來越少了，更多的人喜歡jquery，可使我還是喜歡javascript，下面給出一個(gè)用javascript寫的背景切換的小例子，各位大蝦不要罵，只是寫給自己看的，也供js事件的產(chǎn)考依據(jù)。

html代碼

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>背景切換</title> 
<link href="css/bgchage.css" type="text/css" rel="Stylesheet" /> 
</head> 
<body> 
<div><ul><li></li><li></li><li></li><li></li></ul></div> 
<!-- <div>1</div><div>2</div><div>3</div><div>4</div>--> 
</body> 
<script src="js/bgchage.js" type="text/javascript" ></script> 
</html> 

因?yàn)閖avascript邏輯順序比較強(qiáng)，所以要考慮引用js的位置
css代碼

復(fù)制代碼代碼如下:

 
body {font-size:12px;} 
div{ width:950px; height:800px; margin:0 auto; border:solid 1px #d0d0d0;} 
li{ list-style-type:none;border:solid 1px #d0d0d0; float:left; margin: 1px; padding:0 5px; height:12px; width:10px;} 
/*div{ width:6px; height:14px; margin:1px; padding:0 5px; float:left; border:solid 1px #d0d0d0;}*/ 

javascript代碼部分：

復(fù)制代碼代碼如下:

 
window.onload=init; 
var element= document.getElementsByTagName("li"); 
function init() //初始化背景色 
{ 
var element= document.getElementsByTagName("li"); 
for(var i=0; i<4;i++) 
{ 
var k=i+1; 
element[i].style.background="url(images/"+k.toString()+".jpg)"; 
} 
} 
function addclick() 
{ 
for(var i=0; i<4;i++) 
{ 
var k=i+1; 
if(window.attachEvent) 
element[i].attachEvent("onclick", new Function("bgchage("+k+");")); //創(chuàng)建事件不能直接.onclick而需要使用.attachEvent("事件",new Function("被調(diào)函數(shù)("+參數(shù)+");"));IE6通過 
else 
element[i].addEventListener("click", new Function("bgchage("+k+");"),false); 
} 
} 
function bgchage(t) //根據(jù)色塊改變背景色 
{ 
document.getElementsByTagName("body")[0].style.background="url(images/"+t+".jpg)"; 
} 
addclick(); 

js部分要注意寫事件的兼容，而且其實(shí)jq的思路就是將很多功能寫成插件的形式供自己使用，用javascript寫，可以寫自己的類庫，供反復(fù)使用，也無需承擔(dān)jquery類庫的負(fù)擔(dān)。其實(shí)我也不是說jquery不好，從大的方面來說，jquery的插件大小影響并不大，前端事件看了百度前端交流會(huì)的視頻，發(fā)現(xiàn)人家的類庫也都是js自己寫的，這給了我繼續(xù)學(xué)習(xí)js的動(dòng)力。

您可能感興趣的文章:

背景圖片切換

相關(guān)文章

微信小程序網(wǎng)絡(luò)請(qǐng)求封裝示例
這篇文章主要介紹了微信小程序網(wǎng)絡(luò)請(qǐng)求封裝示例,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-07-07
JavaScript 組件之旅（一）分析和設(shè)計(jì)
毫無疑問，JavaScript 是一種非常靈活的腳本語言，有時(shí)候它像一只難以馴服的野馬——你受益于它的靈活性的同時(shí)，也要時(shí)刻提防它變得失去控制
2009-10-10
JavaScript獲取頁面中表單（form）數(shù)量的方法
這篇文章主要介紹了JavaScript獲取頁面中表單（form）數(shù)量的方法,涉及javascript操作表單document.forms數(shù)組的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-04-04
JS實(shí)現(xiàn)的全選、全不選及反選功能【案例】
這篇文章主要介紹了JS實(shí)現(xiàn)的全選、全不選及反選功能,涉及javascript事件響應(yīng)、元素遍歷與屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2019-02-02
js實(shí)現(xiàn)會(huì)跳動(dòng)的日歷效果(完整實(shí)例)
下面小編就為大家?guī)硪黄猨s實(shí)現(xiàn)會(huì)跳動(dòng)的日歷效果(完整實(shí)例)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-10-10
JS簡單實(shí)現(xiàn)查看文檔創(chuàng)建日期、修改日期和文檔大小的方法示例
這篇文章主要介紹了JS簡單實(shí)現(xiàn)查看文檔創(chuàng)建日期、修改日期和文檔大小的方法,結(jié)合實(shí)例形式分析了JavaScript使用fileCreatedDate屬性、fileModifiedDate屬性、lastModified屬性和fileSize屬性相關(guān)操作技巧,需要的朋友可以參考下
2018-04-04
在vscode上直接運(yùn)行typescript的操作方法
在學(xué)習(xí)typescript的過程中發(fā)現(xiàn)在vscode上不能很好地的輸出typescript的運(yùn)行結(jié)果,需要先將typescript編譯為javascript,在通過node執(zhí)行js文件得到結(jié)果,這篇文章給大家介紹如何在vscode上直接運(yùn)行typescript,感興趣的朋友一起看看吧
2023-12-12
javascript fullscreen全屏實(shí)現(xiàn)代碼
用了實(shí)現(xiàn)打開一個(gè)滿屏的代碼
2009-04-04
javascript字符串拆分成單個(gè)字符相加和不超過10，求最終值
javascript字符串拆分成單個(gè)字符相加和不超過10，求最終值
2008-09-09
JavaScript ES6 Module模塊詳解
這篇文章主要介紹了ES6新特性之模塊Module用法,簡要說明了模塊Module的概念、功能并結(jié)合實(shí)例形式分析了模塊Module的使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2021-10-10