Question

需要有关如何使用此脚本显示图像而不是值的帮助。当用户拖动手柄时，我需要显示5个图像。喜欢幻灯片。这是滑块代码 http://jqueryui.com/slider/#steps 还需要对图像交换进行淡入淡出效果。这是我到目前为止所得到的：

$("#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);
}  });

http://jsfiddle.net/LGMHP/182/ 帮助将非常值得赞赏。

Answer 1

Jquery提供了一个fadein淡出，可以轻松让你做你需要的。它相当于表演和隐藏，但有褪色。 http://api.jquery.com/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);
    }
});

请参阅jsfiddle：http://jsfiddle.net/m67Lz3u7/

jQuery UI滑块在拖动时显示图像

1 个答案: