我尝试用最短的Jquery代码创建一个无限的轮播jquery

Question

我尝试使用较少的jquery代码制作旋转木马，问题是当页面刷新时，它开始没有图片，否则它不会工作。我做了什么还有其他解决方案吗？

＆＃13;

＆＃13;

var x = 0;
var y = -1;
$(document).ready(function(){
	$("#next").click(function(){
		x = ++x;
		y = ++y;
		if (x == 8 || y==7){
			x=0;
			y=-1;
		}else{
		}
	    $("img:eq("+x+")").addClass("animatie");
							     
            $("img:eq("+y+")").removeClass("animatie");
	})
})

＆＃13;

body{
				
}	
.slide {
	display:none;
				
}
.animatie {
	width:100%;
	height:100%;
	display:block;
}
#slider{
	background-color:red;
	width:100%;
	height:75%;
	overflow:hidden;
}

＆＃13;

<div id="slider">
	<img class="slide" src="images/basketball.jpg"/>
	<img class="slide" src="images/bicycle.jpg"/>
	<img class="slide" src="images/bungalows.jpg"/>
	<img class="slide" src="images/celebrations.jpg"/>
	<img class="slide" src="images/mountain.jpg"/>
	<img class="slide" src="images/rainy.jpg"/>
	<img class="slide" src="images/runner.jpg"/>
	<img class="slide" src="images/unnamed.jpg"/>
</div>

＆＃13;

＆＃13;

＆＃13;