JQ实现小米轮播图

小米轮播图

仍有bug 无法达到想要效果，能否有大佬能在评论区解答下

点击小按钮的效果:

//	  选到小按钮，当小按钮被点击，执行下面操作。
$(".slider-item .btnw").click(function(){
			index=$(this).index();//获取当前元素下标
//    index() 方法返回指定元素相对于其他指定元素的 index 位置。
			$(this).addClass("active").siblings().removeClass("active");
//    给点击的小按钮添加样式，其余去除样式。
			$(".item").eq(index).fadeIn().siblings().fadeOut();
//	  使当前index下标的图片淡入，其余淡出。
		});

---

点击切换效果：

//    当向左的按钮被点击，执行下面操作
$(".mi-tab .left").click(function(){
//    使index下标减少1，如果index小于了0，再使下标变为四。
			index--;
			if (index<0) 
			{
				index=4;
			}
//	  也就是回到上一张图片，执行相同的操作。
			$(".item").eq(index).fadeIn().siblings().fadeOut();
//    给index个小按钮添加样式，其余去除样式。
			$(".slider-item .btnw").eq(index).addClass("active").siblings().removeClass("active");
			
		});
//    右边按钮不写了

---

定时器，自动轮播

//	  设置定时器，每次index+1，如果大于4，归零。
var time=setInterval(function(){
			index++;
			if (index>4) {
				index=0;
			}
			$(".item").eq(index).fadeIn().siblings().fadeOut();
			$(".slider-item .btnw").eq(index).addClass("active").siblings().removeClass("active");
		},3000);