用css JavaScript写一个可换背景的登陆界面（简单轮播图）

简易登录框

<div class="main">
            <form action="">
                <div>账号<input type="text" class="inputDiv" value="请输入账号"></div>
                <div>密码<input type="password" class="inputDiv" value="请输入密码"></div>
                <p class="inputDiv">
                    <input type="checkbox" value="checked" checked="checked"><label for="">下次自动登录</label>
                    <a href="" class="pull-right">登录遇到问题</a>
                </p>
                <a class="inputDiv smBtn" href="#">登录</a>
                <a href="#" class="pull-right">返回主页</a>
            </form>
        </div>

用

• 定义5个冲动按钮（直接放背景图片）再用css布局到浏览器上方，再通过js修改body背景图片。

  <ul>
          <li><img src="tp/1.jpg.jpg"></li>
          <li><img src="tp/2.jpg.jpg"></li>
          <li><img src="tp/3.jpg.jpg"></li>
          <li><img src="tp/4.jpg.jpg"></li>
          <li><img src="tp/5.jpg.jpg"></li>
      </ul>
  

  核心算法

   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.getAttribute('src') + ') ';
              }
          }
  

  效果图：