當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript之切换背景图片（并使）背景栏保持和背景色调相似
生活随笔
收集整理的這篇文章主要介紹了
JavaScript之切换背景图片（并使）背景栏保持和背景色调相似
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
JavaScript之切換背景圖片（并使）背景欄保持和背景色調相似
話不多說直接上代碼：
<!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;/*設置元素的堆疊順序*/z-index: 10;}#skin-photo ul{overflow: hidden;width: 1200px;margin: 0 auto;/*rgba() 函數使用紅(R)、綠(G)、藍(B)、透明度(A)的疊加來生成各式各樣的顏色*/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">// 獲取對應的圖片var skin = document.getElementById("skin");var allItems = document.getElementsByTagName("li");for (var i=0;i<allItems.length;i++){// 需要設置一個變量，不然i在循環完畢后始終為3 達不到切換圖片的效果// 設置成i+1是因為圖片名稱是從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>實現效果圖：
可以點擊導航欄中的圖片進行切換背景，同時導航欄的色調也會發生改變，就像這樣：
覺得有用的話可以給作者鼓勵支持一下~你的鼓勵就是我不斷前行的動力！
總結
以上是生活随笔為你收集整理的JavaScript之切换背景图片（并使）背景栏保持和背景色调相似的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 什么是大数据？大数据用来干嘛？
- 下一篇： JavaScript高级程序设计之表单基