I want to add jquery `fade()` functionality so that images changes with fade.   

The problem is I want these images in sequence, not randomly. 

```js
<html>
<head>
<script type="text/javascript">
 window.onload = function () {
    var backgroundImg=["https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyB57zuc4bms-hDtWMa-4BZvscIlJDm4r7a9WLaO4SAxUvKM-DDA",
                    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQBinSpWOvAtkxjmkf709O3rjH2ObRbWAEn9s0JcWaeL6LMtCbOrQ",
                    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRKY4J2qIFqkuDnABMzeypywbMSZL1cleS8vpySz0KD02wOYORU1g",
                    "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRQkdQT0zN0xDVP-VuvwojSbS5dOstX14eZvJCOWNPxKJ5dWTIc"
    ]
    setInterval(changeImage, 1000);
    var i = 0;
    function changeImage() {   
      document.getElementById('slide').style.backgroundImage = "url('"+backgroundImg[i]+"')";
      i++; 
      if(i == 4){
        i = 0;
      }
    }
  }
</script>
</head>
<body>
    <div id="slide" style="width: 400px; height: 400px;"></div>
</body>
</html>
```