bqRLYn.gif

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
            <style>
                * {
                    margin: 0;
                    padding: 0;
                }
                
                body {
                    background: url(images/1.jpg) no-repeat center top;
                }
                
                li {
                    list-style: none;
                }
                
                .baidu {
                    overflow: hidden;
                    margin: 100px auto;
                    background-color: #fff;
                    width: 410px;
                    padding-top: 3px;
                }
                
                .baidu li {
                    float: left;
                    margin: 0 1px;
                    cursor: pointer;
                }
                
                .baidu img {
                    width: 100px;
                }
            </style>
        </head>
        
        <body>
            <ul class="baidu">
                <li><img src="images/1.jpg"></li>
                <li><img src="images/2.jpg"></li>
                <li><img src="images/3.jpg"></li>
                <li><img src="images/4.jpg"></li>
            </ul>
            <script type="text/javascript">
                var imgs=document.querySelector('.baidu').querySelectorAll('img');
                for(var i=0;i<imgs.length;i++){
                    imgs[i].onclick = function() {
                        document.body.style.backgroundImage='url('+this.src+')';
                    }
                    
                }
            </script>
    </body>
</html>