jquery - Simple image slider is not working -

I want to create simple image slider. As long as you can not reach the last image (Div), everything works fine. The slider starts again, the first image covers all other images. I have tried to change the z-index images, but still I have the same problem.

  var index = 1; Function jimg () {$ ('# trace'). Text ('image index' + index); If (index & lt; 5) {changeimg (index); Index = index + 1; } And {index = 1; }} Function changeimg (indexofImg) {$ ('# imgid' + indexofImg) .slideToggle (); } SetInterval (isimg, 1000);  

  #imggruop li {display: inline; Swim left; List style: none; } #imagewapper {width: 600px; Height: 400 pixels; Hidden flurry; } #imagid1, #imgid2, #imgid3, #imgid4 {width: 300px; Height: 300px} # imgid1 {background color: # FF0000; } # Imgid2 {background-color: # 63ff1b; } # Imgid3 {background color: # fff717; } # Imgid4 {background color: # 2a6aff; }  

  & lt; Script src = "https://ajax.googleapis.com/ajax/libs/JQuery/1.1.1/jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Div id = "trace" & gt; & Lt; / Div & gt; & Lt; Div id = "imagewapper" & gt; & Lt; Ul id = "imggruop" & gt; & Lt; Li & gt; & Lt; Div id = "imgid1" & gt; Image 1 & lt; / Div & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Div id = "imgid2" & gt; Image 2 & lt; / Div & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Div id = "imgid3" & gt; Image 3 & lt; / Div & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Div id = "imgid4" & gt; Image 4 & lt; / Div & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt;  

you changeimg The following code can be added to the function:

  $ ('# imgid' + indexofImg) .slideUp (); If (index == 4) {for (var x = 1; x & lt; 5; x ++) {$ ('# imgid' + x) .slideDown (); }}  

example.