jQuery UIのSliderの値によって画像を切り替えたい

Question

jQuery UIのSliderを使ってSliderの値によって画像を切り替えるようにしたいです。

現状
・他のサイトを参考にテキストボックスにsliderの値が表示される所までは到達できました。
・sliderの最大値が4で、ステップ数は1です。
・画像のファイル名は0.png~4.pngで全部で5枚です。

希望
・画像をスライダーを動かす度に変更したいです。
・値は取得できましたので、その値によって画像を切り替えれば良いのではないかと思っていますがそこから先をどのようにすればいいか困っています。

ご返答よろしくお願いします。

下記のサイトに動作確認用としてアップロードしています。
http://www.geocities.jp/jyqwc878/slider/index.html

下記のサイトにファイル一式アップロードしています。
http://firestorage.jp/download/f96a6b8a4d2c8bd17a5af73483d745ba32686e21

htmlとjsのソースコードです。

<img src="./img/0.png"> <input id="num" type="text"> <div id="slider"></div> <script> $(function() { // スライダーを適用 $('#slider').slider({ min: 0, max: 4, step: 1, // スライダーの変化時にテキストボックスの値表示を更新 change: function(e, ui) { $('#num').val(ui.value); }, // スライダーの初期化時に、その値をテキストボックスにも反映 create: function(e, ui) { $('#num').val($(this).slider('option', 'value')); } }); }); </script>

Answer 1

<img id="img1" src="./img/0.png" >

とIDを付けて

$("#img1").attr('src', "img/"+ui.value+".png");

Comments

[owl]

ご返答ありがとうございます。

imgにID名をつけて上記のjsのコードを挿入したのですが、上手く作動しません。
挿入する位置が悪いのでしょうか。
またinputのID名numからimgのID名img1に変更もしています。

よろしくお願い致します。

<script>
$(function() {
// スライダーを適用
$('#slider').slider({
min: 0,
max: 4,
step: 1,
// スライダーの変化時にテキストボックスの値表示を更新
change: function(e, ui) {
$('#img1'//#numから#img1に変更).val(ui.value);
},
// スライダーの初期化時に、その値をテキストボックスにも反映
create: function(e, ui) {
$('#img1'//#numから#img1に変更).val($(this).slider('option', 'value'));
}
});
$("#img1").attr('src', "img/"+ui.value+".png");//この位置に挿入
});
</script>

[tkturbo]

「$('#img1'//#numから#img1に変更).val(ui.value);」←これそのまま書いてるなら、途中からコメントになってるので裏でエラーはいてるはずです。
後、id属性はドキュメント内で同じ値を使ってはいけないルールなので、この書き方では動きません。imgタグとinputタグにはそれぞれ別のidを使いましょう。