<!DOCTYPE html>

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    body {
        background: url(./images/desktop/1.jpg);
    }

    .change {
        width: 410px;
        margin: 100px auto;
        background-color: #fff;
        overflow: hidden;
        padding-top: 3px;
    }

    .change li {
        float: left;
        list-style: none;
        margin: 0 1px;
        cursor: pointer;
    }

    .change img {
        width: 100px;
    }
</style>

<ul class="change">
    <li><img src="./images/desktop/1.jpg" alt=""></li>
    <li><img src="./images/desktop/2.jpg" alt=""></li>
    <li><img src="./images/desktop/3.jpg" alt=""></li>
    <li><img src="./images/desktop/4.jpg" alt=""></li>
</ul>
<script>
    var imgs = document.querySelector('.change').querySelectorAll('img');
    for (var i = 0; i < imgs.length; i++) {
        imgs[i].onclick = function () {
            document.body.style.backgroundImage = 'url(' + this.src + ')';
        }
    }
</script>