jQuery (plug-in) fade in fade out slider

I am trying to build a jQuery slider.

This will fade in and fade out images that are "stuck" in the same place. (Is this explanation clear).

A little bit like this:

http://d2o0t5hpnwv4c1.cloudfront.net/377_slider/slider_sourcefiles/slider.html

But without the horizontal moving.

Can you point me to something similar, so I can modify it to my purpose but still don't have开发者_如何学C to reinvent the wheel?

Something like this? http://jsfiddle.net/Ender/9zqbY/

Using the jQueryUI slider widget, you should be able to implement this pretty easily. My demo is far from perfect, but it should be enough to get you on the right track. With the jQueryUI slider, you can bind a function to the slidechange event to fade your images in and out. Here's a sample of that function:

$('#slider').bind("slidechange", function(event, ui) {
   var newIndex = $("#slider").slider("value");
   var oldIndex = $('#sliderContent .item').index('.shown');
   if (newIndex != oldIndex) {
       $('.shown').fadeOut().removeClass('shown');
       $('#sliderContent .item').eq(newIndex).fadeIn().addClass('shown');
   }
});

Good luck!