动态jquery轮播无法正常工作

Question

我正在创建一个JQuery轮播，动态隐藏具有ID slideimg的某些div。

幻灯片编号可以是从PHP页面中提取的任何数字。

我无法弄清楚我做错了什么但它在重置时没有显示第一张图片。

任何帮助都将不胜感激。

jQuery(document).ready(function($) {

var slidenumber = $(".SlideJSON").html();

var slidenumber = parseInt(slidenumber);

var animateInterval;
var i = 1;
var x = 2;

function animate() {


    $("#slideimg" + i).hide();
    $("#slideimg" + x).fadeIn(2000);


    if (i == slidenumber) {
        i = 1;
        x=2;
    } else {
        i++;
        x++;
    }

}

animateInterval = setInterval(animate, 3000);


})

/* Just here to actually being able to see something */
div {
  width: 50px;
  height: 50px;
  display: inline-block;
}
#slideimg1 {
  background: #ff0000;
}
#slideimg2 {
  background: #00ff00;
}
#slideimg3 {
  background: #0000ff;
}

<!-- Using div instead of original img-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slides" id="slideimg1"></div>
<div class="slides" id="slideimg2"></div>
<div class="slides" id="slideimg3"></div>