0

これに似たjQuery/anyスライダーが必要ですが、機能はほとんどありません。

HTMLコード、画像、テキスト、およびおそらくいくつかのdivに要素があり、これらはデフォルトで非表示になっていますが、スライダーが特定の値に達すると、画像/テキスト/その他が連続して表示されます.

たとえば、値 0 では 1 つの画像のみが表示され、値 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 を再表示することも、必要に応じて表示することもできます。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);
            }
        }
    });
});
于 2013-01-22T10:29:39.903 に答える