Question

我希望有一个jQuery /任何类似于this的滑块，但功能更少。

我的HTML代码中会包含元素，图像，文本以及某些div，默认情况下应隐藏这些元素，但当滑块达到特定值时，图像/文本/应该连续出现。< / p>

因此，在值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>

Answer 1

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

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

在特定点附加特定图像应该不难。你也可以取消隐藏你的div，或任何你想要的东西。我已经在JSFiddle上为你构建了一个例子。

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);
            }
        }
    });
});

滑块以特定值显示元素

1 个答案: