jQuery fade li element and cycle it when mouse hovered

I'm trying to recreate an effect in jQuery, where an element (<li> <img>) will be cycled and has a fading effect when hovered. The '<li>' contains '<img>' (image screenshots). When the mouse is on top of element it will keep cycling all that are in '<ul>' with a fading effect. When the开发者_如何学Go mouse is away it will stop cycling the list. I also want to add a pager where you can navigate to the list.

My Existing Code: link text

My Problem: the current code has some problem with the pagination, it added all images that can be seen on the code. Instead of 1-8 only, it continued to add another 1-8 and another. Second problem is, It also start cycling and fading when the page loads. The cycling and fading should only be working when the mouse is on top of the element.

I don't know if the 'Cycle Plugin' (Plugin Home Page) is really required on this approach, I wan't it to be minimal as much as possible. I just use 'Cycle Plugin' because it's a quick answer to my problem.

Thanks and merry xmas!

Edits

remove and added a link

I could be wrong, I'm not familiar with this plugin, but it seems like you need an ID for each slideshow you have instead of using a class like you are.

I've setup a JSFiddle with your code and tweaked it. Below is how each slide should function.

1. starts on mouse over and stop on mouse out
2. changes on mouseover of the nav
3. changes when the nav is clicked

The link I gave you in the comments to your question should guide you to the available options for this plug-in. In case you missed it, here it is: plugin options