利用JavaScript制作一个点击图片缩略图切换网页背景的案例

style 代码

* {
                margin: 0;
                padding: 0;
            }
            body {
                background: url(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;
            }

主题html代码

<ul class="baidu">
            <li><img src="1.jpg" ></li>
            <li><img src="2.jpg" ></li>
            <li><img src="3.jpg" ></li>
            <li><img src="4.jpg" ></li>

        </ul>

srcipt代码

var imgs = document.querySelector('.baidu').querySelectorAll('img');
            for(var i = 0; i<imgs.length; i++) {
                imgs[i].onclick = function() {
                    console.log(this.scr);
                    document.body.style.backgroundImage = 'url('+ this.src +')';
                }
            }

最终效果:

图片切换

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

插入图片