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 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' 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.

The effect i'm trying to achieve: link text (WARNING: Contains some Pornography), Sorry of my example, I tried finding other alternative but no luck.

Thanks and merry xmas!