图片自行换掉即可查看效果，原理就是基于tab切换的效果实现的
效果图
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>仿百度换肤效果</title> 8 <style> 9 body { 10 height: 100%; 11 background: url(img/bg1.jpg) no-repeat top center; 12 background-size: cover; 13 } 14 15 * { 16 margin: 0; 17 padding: 0; 18 } 19 20 ul, 21 li { 22 list-style: none; 23 } 24 25 .list li img { 26 width: 100%; 27 } 28 29 .list { 30 display: flex; 31 justify-content: center; 32 margin-top: 100px; 33 } 34 35 .list li { 36 width: 150px; 37 cursor: pointer; 38 } 39 40 .trans { 41 transition: all .5s; 42 } 43 </style> 44 </head> 45 46 <body> 47 <ul class="list"> 48 <li><img src="img/bg1.jpg" alt=""></li> 49 <li><img src="img/bg2.jpg" alt=""></li> 50 <li><img src="img/bg3.jpg" alt=""></li> 51 <li><img src="img/bg4.jpg" alt=""></li> 52 </ul> 53 54 <script> 55 var imgs = document.querySelector(‘.list‘).querySelectorAll(‘img‘); 56 for (var i = 0; i < imgs.length; i++) { 57 imgs[i].onclick = function () { 58 // console.log(this.src) 59 document.body.style.className = ‘trans‘; 60 document.body.style.backgroundImage = ‘url(‘ + this.src + ‘)‘; 61 } 62 } 63 </script> 64 </body> 65 66 </html>
原文：https://www.cnblogs.com/sxdpanda/p/13110721.html