Javascript 用于在拖动时显示图像的jQuery UI滑块

需要有关如何使用此脚本显示图像而不是值的帮助。我需要5个图像显示时，用户拖动手柄。像幻灯片。这是滑块代码 还需要使淡入淡出图像交换效果。 到目前为止，我得到的是：

$("#slider").slider({
animate: true,
min: 0,
max: 500,
step: 100,
slide: function(event, ui) {
    if (ui.value == 100) {
        $('#green').hide();
    };
    if (ui.value == 200) {
        $('#green').hide();
        $('#red').show();
    };
     if (ui.value == 400) {
        $('#red').hide();
        $('#blue').show();
    };

    $("#hour").text(ui.value);
}  });

---

非常感谢您的帮助。

Jquery提供了一个fadein淡出功能，可以方便地让您完成所需的操作。这相当于显示和隐藏，但带有淡入淡出的效果

可以设置动画持续时间并在完成时添加函数。因此，您可以执行以下操作，而不是显示和隐藏您所拥有的功能：

$('#green').hide('fast', function(){$('#red').show('slow');});

也就是说，从右向左滑动时会遇到问题。要处理所有情况，也许您应该使用类。为了进一步简化，您可以使用属性。像这样：

$("#slider").slider({
    animate: true,
    min: 0,
    max: 500,
    step: 100,
    slide: function(event, ui) {

        $('.showing').fadeOut(function(){$('[data-value='+ui.value+']').fadeIn().addClass('showing');}).removeClass('showing');

        $("#hour").text(ui.value);
    }
});

---

请参阅jsiddle:

谢谢。这正是我需要的。