0

我想要一个与这个类似的 jQuery/any 滑块，但功能不多。

我将在我的 HTML 代码中包含元素、图像、文本，也许还有一些 div，它们应该默认隐藏，但是当滑块达到特定值时，图像/文本/任何内容都应该依次显示。

因此，例如，在值为 0 时，仅显示一张图像，然后在值为 1 时弹出另一张图像，依此类推。

是否有任何预制的 jQuery 插件，或者我将如何处理？

<!DOCTYPE html>
<html>

    <head>
        <title>jQuery Mobile Tutorial on Codeforest.net</title>
        <link rel="stylesheet"
        href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css">
        <style>
            #slider {
                margin: 10px;
            }
        </style>
        <script src="http://code.jquery.com/jquery-1.9.0.js"></script>
        <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
        <script>
            var img1 = $('<img\>').attr('src', 'http://lorempixel.com/400/200/');
            var img2 = $('<img\>').attr('src', 'http://lorempixel.com/300/200/');
            var foto = $('#foto');

            foto.html(img1);

            $("#slider").slider({
                slide: function(event, ui) {
                    if (ui.value > 50) {
                        $('#foto').html(img2);
                    } else {
                        $('#foto').html(img1);
                    }
                }
            });
        </script>
    </head>

    <body>
        <div id="slider"></div>
        <div id="foto"></div>
    </body>

</html>
4

1 回答 1

7

jQueryUI 滑块有一个内置函数可以在滑动时获取值。因此，您可以随时获取滑块的值。

$("#slider").slider({
    slide: function(event, ui) {
       console.log(ui.value);
    } 
});

在某个点附加特定图像应该不难。您还可以取消隐藏您的 div 或任何您想要的。我已经在 J​​SFiddle 上为您构建了一个示例。

http://jsfiddle.net/AVBWr/

编辑：确保将其包装在 document.ready 函数中，如下所示：

$(document).ready(function() {
    var img1 = $('<img\>').attr('src', 'http://lorempixel.com/400/200/');
    var img2 = $('<img\>').attr('src', 'http://lorempixel.com/300/200/');
    var foto = $('#foto');

    foto.html(img1);

    $("#slider").slider({
        slide: function(event, ui) {
            if (ui.value > 50) {
                $('#foto').html(img2);
            } else {
                $('#foto').html(img1);
            }
        }
    });
});
于 2013-01-22T10:29:39.903 回答