實現以下功能：

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);
    }
 

以上。