Start with better semantics. The ul would not be the “slide” it would be the container or the thing that holds the slide. But I would call it slideshow so you know where it is all contained. The list items are better suited to be called slides.
With that, I would also not put your height and width inline. There is no purpose if you are using an external stylesheet. So something like this:
Also, your current alt properties are irrelevant. If you are using those for indexing, you are better off just using a for loop or another way of finding an index.
The easiest way I can think of building a slideshow would be to use CSS positioning to line up all of the images on top of each other. Using z-index as a way to keep order of what image is seen next and so on.
As for the JS, I would using a timer function that removes the “current” class and adds that class to the next image in line. Then loop back to the first index once it reaches the end. During this changing, you would figure out your transition style, whether it be a fade or what ever, and you execute that transition. Once it is finished fading, use a reorder function that will give the image that is currently transitioning away the lowest z-index and all of the images need to be reordered so they will reflect their change in line. At this point, the next image will have the highest z-index as well as the “current” class.
This was rather strange to explain. But, if you can understand that, you should be able to throw together a simple slideshow structure fast. I would do the research though. You will learn a lot studying other slideshow code.