制作一个百度换肤效果

原理就是获取到图片的src地址然后赋值给背景的URL地址
<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            body{
                background: url(img/11.jpg) no-repeat ;
                /*background-size: 100% ;*/
            }
            ul{
                 200px;
                /*background: red;*/
                border: 1px solid pink;
                overflow: hidden;
                list-style: none;
                margin:300px auto;
            }
            ul li{
                float: left;
                /*background: red;*/
                 50%;
                margin-top: 5px;
                /*cursor:wait;*/
            }
            ul li img{
                 100px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li><img src="img/2.jpeg"/></li>
            <li><img src="img/3.jpg"/></li>
            <!--<li><img src="img/2.jpeg"/></li>
            <li><img src="img/3.jpg"/></li>-->
        </ul>
        <script type="text/javascript">
            var img = document.querySelector("ul").querySelectorAll("img")
            for (var i=0; i<img.length; i++) {
                img[i].onclick = function() {
//                    console.log(this.src)
                document.body.style.backgroundImage = "url("+this.src+")";
                }
            }
        </script>
    </body>
</html>
页面效果
点击之前
点击之后