实现以下功能：

1.div自动飘来飘去 + 触及窗口边界反弹

基本思想就是在window.onload方法内使用setInterval()函数，用：

var windowWidth = window.innerWidth;

var windowHeight = window.innerHeight;

获取当前的窗口大小。

此部分js代码如下：

//调用下面的飘动方法，此句写在window.onload()中
var interval = setInterval("move()", 18);

  //move方法的具体实现
  var x_dir = 1;
  var y_dir = 1;
  var speed = 1;
  var secret = document.getElementById("secret");

  function move() {

    // console.log(window.innerWidth + "x" + window.innerHeight);
    var windowWidth = window.innerWidth;
    var windowHeight = window.innerHeight;
    // console.log(secret.style.left + "x" + secret.style.top);

    //此时向右
    if (x_dir == 1) {

      //即将撞墙
      if (Number(secret.style.left.replace("px", "")) + speed > windowWidth - 100) {
        secret.style.left = windowWidth - 100 + "px";
        x_dir = 0;
      }
      //没撞墙
      else {
        secret.style.left = Number(secret.style.left.replace("px", "")) + speed + "px";
      }
    }
    //此时向左
    else {
      //即将撞墙
      if (Number(secret.style.left.replace("px", "")) - speed < 0) {
        secret.style.left = "0px";
        x_dir = 1;
      }
      //没撞墙
      else {
        secret.style.left = Number(secret.style.left.replace("px", "")) - speed + "px";
      }
    }

    //此时向下
    if (y_dir == 1) {
      //即将撞墙
      if (Number(secret.style.top.replace("px", "")) + speed > windowHeight - 100) {
        secret.style.top = windowHeight - 100 + "px";
        y_dir = 0;
      }
      //没撞墙
      else {
        secret.style.top = Number(secret.style.top.replace("px", "")) + speed + "px";
      }
    }
    //此时向上
    else {
      //即将撞墙
      if (Number(secret.style.top.replace("px", "")) - speed < 0) {
        secret.style.top = "0px";
        y_dir = 1;
      }
      //没撞墙
      else {
        secret.style.top = Number(secret.style.top.replace("px", "")) - speed + "px";
      }
    }
  }

2.div内背景图片轮播

  //轮播背景图
  var backImg = 1;
  function changeImage() {
    backImg + 1 > 13 ? backImg = 1 : backImg++;
    secret.style.backgroundImage = "url('./static/" + backImg + ".jpg')";
    console.log("url('./static/" + backImg + ".jpg')");
  }

3.轮播图式样

效果图：

  #secret {
    /*fixed使位置不随着窗口滚动而变化*/
    position: fixed;
    background-color: #40a0ff00;
    /*border-radius切出圆*/
    border-radius: 50px;
    height: 100px;
    width: 100px;
    left: 0px;
    top: 0px;
    /*浮于最上层*/
    z-index: 10000;
    /*背景图片占满div*/
    background-image: url("./static/1.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /*阴影*/
    box-shadow: -20px 20px 10px #88888846;
    cursor:pointer;
  }

4.鼠标悬停停止移动，同时停止轮播

    var interval = setInterval("move()", 18);
    var interval_img = setInterval("changeImage()", 5000);

    document.getElementById("secret").onmouseover = function () {
      clearInterval(interval);
      clearInterval(interval_img);
    }

    document.getElementById("secret").onmouseout = function () {
      interval = setInterval("move()", 18);
      interval_img = setInterval("changeImage()", 5000);
    }

以上。