當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
JavaScript之切换背景图片（并使）背景栏保持和背景色调相似
生活随笔
收集整理的這篇文章主要介紹了
JavaScript之切换背景图片（并使）背景栏保持和背景色调相似
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
JavaScript之切換背景圖片（并使）背景欄保持和背景色調(diào)相似
話不多說(shuō)直接上代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>百度換膚</title><style type="text/css">*{padding: 0;margin: 0;}#skin-photo{width: 100%;height: 100px;position: relative;/*設(shè)置元素的堆疊順序*/z-index: 10;}#skin-photo ul{overflow: hidden;width: 1200px;margin: 0 auto;/*rgba() 函數(shù)使用紅(R)、綠(G)、藍(lán)(B)、透明度(A)的疊加來(lái)生成各式各樣的顏色*/background-color: rgba(255,255,255,.5);}#skin-photo ul li{float: left;cursor: pointer;height: 120px;list-style: none;margin: 0 30px 0 50px;}#skin-photo ul li img{width: 180px;height: 120px;}#skin{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-image: url("img/background3.jfif");background-position: center 0;background-repeat: no-repeat;}</style> </head> <body><div id="skin"></div><div id="skin-photo"><ul><li><img src="img/background1.jfif"></li><li><img src="img/background2.jfif"></li><li><img src="img/background3.jfif"></li><li><img src="img/background4.jfif"></li></ul></div><script type="text/javascript">// 獲取對(duì)應(yīng)的圖片var skin = document.getElementById("skin");var allItems = document.getElementsByTagName("li");for (var i=0;i<allItems.length;i++){// 需要設(shè)置一個(gè)變量，不然i在循環(huán)完畢后始終為3 達(dá)不到切換圖片的效果// 設(shè)置成i+1是因?yàn)閳D片名稱是從1開始的allItems[i].index = i+1;console.log(allItems[i].index)allItems[i].onclick = function (){skin.style.backgroundImage = `url("img/background${this.index}.jfif")`// skin.style.backgroundImage = `url("img/background${i}.jfif")`}}</script> </body> </html>實(shí)現(xiàn)效果圖：
可以點(diǎn)擊導(dǎo)航欄中的圖片進(jìn)行切換背景，同時(shí)導(dǎo)航欄的色調(diào)也會(huì)發(fā)生改變，就像這樣：
覺得有用的話可以給作者鼓勵(lì)支持一下~你的鼓勵(lì)就是我不斷前行的動(dòng)力！
總結(jié)
以上是生活随笔為你收集整理的JavaScript之切换背景图片（并使）背景栏保持和背景色调相似的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 什么是大数据？大数据用来干嘛？
- 下一篇： JavaScript高级程序设计之表单基