jQuery(插件)淡入淡出滑块

时间:2010-10-15 17:23:08

标签: jquery jquery-plugins resources slider

我正在尝试构建一个jQuery滑块。

这将淡入并淡出“卡在”同一位置的图像。 (这个解释是否清楚)。

有点像这样:

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

但没有水平移动。

你能指出类似的东西,所以我可以修改它以达到我的目的,但仍然不需要重新发明轮子吗?

1 个答案:

答案 0 :(得分:3)

这样的东西? http://jsfiddle.net/Ender/9zqbY/

使用jQueryUI滑块小部件,您应该可以非常轻松地实现它。我的演示远非完美,但它应该足以让你走上正确的轨道。使用jQueryUI滑块,您可以将函数绑定到slidechange事件,以淡入淡出图像。以下是该功能的示例:

$('#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');
   }
});
祝你好运!