<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><style>* { margin: 0; padding: 0; } body { background: url(images/1.jpg) no-repeatcentertop; } li { list-style: none; } .baidu { overflow: hidden; margin: 100pxauto; background-color: #fff; width: 410px; padding-top: 3px; } .baiduli { float: left; margin: 01px; cursor: pointer; } .baiduimg { width: 100px; } </style></head><body><ulclass="baidu"><li><imgsrc="images/1.jpg"></li><li><imgsrc="images/2.jpg"></li><li><imgsrc="images/3.jpg"></li><li><imgsrc="images/4.jpg"></li></ul><script>// 1. 获取元素 varimgs=document.querySelector('.baidu').querySelectorAll('img'); // 2. 循环注册事件 for (vari=0; i<imgs.length; i++) { imgs[i].onclick=function() { // 把这个路径 this.src 给body 就可以了document.body.style.backgroundImage='url('+this.src+')'; } } </script></body></html>
