0

http://jqueryui.com/slider/#stepsからこの jQuery UI スライダーを使用しています。これ は、3 つのステップ (1、2、3) と画像を表示する div 要素 ("id_1") を持つ単純なスライダーです。だから私が今本当に欲しいのは、スライダーの位置に応じて絵が変わるということです。したがって、位置「1」では画像が表示され、スライダーを位置 2 または 3 に移動するとすぐにこの画像が変わります。これを行うにはどうすればよいですか? 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Slider - Snap to increments</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
    $(function () {
        $("#slider").slider({
            value: 100,
            min: 1,
            max: 3,
            step: 1,
            slide: function (event, ui) {
                $("#amount").val("$" + ui.value);
            }
        });
        $("#amount").val("$" + $("#slider").slider("value"));
    });
</script>
</head>
<body>
<p>
<label for="amount">Donation amount ($50 increments):</label>
<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>

<div id="slider"></div>
<div id="id_1" class="class_1"></div>

</body>
</html>

前もって感謝します！

4

3 に答える 3

0

このようなことを意味しますか(それはフィドルです)。

このように必要な画像を保持する配列を作成しました

var images = [
"http://cvcl.mit.edu/hybrid/cat2.jpg",
"http://www.helpinghomelesscats.com/images/cat1.jpg",
"http://oddanimals.com/images/lime-cat.jpg"
]; // replace these links with the ones pointing to your images

そして、スライダーが動くと

slide: function (event, ui) {
            $("#amount").val("$" + ui.value);
            $("#id_1").html("<img src=\"" + images[ui.value-1] + "\" />"); // subtracting 1 as the arrays first index is 0
        }

そして、ページの読み込み時に配列の最初の画像を読み込んで完成させます

 $("#id_1").html("<img src=\"" + images[0] + "\" />"); // Load the first image on page load
于 2013-04-04T10:44:18.077 に答える
0

スライドイベントでのみ行うことができます。

     <script>
        $(function () {
            $("#slider").slider({
                value: 100,
                min: 1,
                max: 3,
                step: 1,
                slide: function (event, ui) {
                    $("#amount").val("$" + ui.value);
if(ui.value == 1)
{
    $('#imgSource').attr('src','1.png');
}
else if(ui.value == 2)
    {
        $('#imgSource').attr('src','2.png');
    }

                }
            });
            $("#amount").val("$" + $("#slider").slider("value"));
        });
    </script>
于 2013-04-04T10:46:06.223 に答える