jQuery（插件）淡入淡出滑塊

Question

我想構建一個jQuery滑塊。

這會淡入淡出在同一位置「卡住」的圖像。 （這個解釋是否清楚）。

有點像這樣：

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

但是，如果沒有水平移動。

你能指點我一些類似的東西嗎，所以我可以修改它來達到我的目的，但仍然不必重新發明輪子？

Answer 1

這樣的事情？ 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'); 
    } 
}); 

祝你好運！