带有图像交换的 Jquery 范围滑块

Question

我正在尝试创建一个范围滑块，当用户拖动滑块时可以切换到不同的图像。我创建了一个范围滑块，但我不知道如何获取滑块的值，然后显示所选值的相应图像。

这是我的目标的视觉示例。

    <input type="range" min="0" max="9" value="0" step="1" onChange="sliderChange(this.value)" />
<br /><br />

slider value = <span id="sliderStatus">0</span>

关于如何实现这一目标的任何帮助将不胜感激。

代码笔链接

谢谢你

Answer 1

var imageUrl = new Array();

        imageUrl[0] = 'https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg';

        imageUrl[1] = 'https://static.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg';

        imageUrl[2] = 'http://cdn2.stylecraze.com/wp-content/uploads/2013/07/dahlia-flowers.jpg';

        imageUrl[3] = 'https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg';

        imageUrl[4] = 'https://static.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg';

        imageUrl[5] = 'http://cdn2.stylecraze.com/wp-content/uploads/2013/07/dahlia-flowers.jpg';
       
$(document).on('input change', '#slider', function() {//listen to slider changes
    var v=$(this).val();//getting slider val
   $('#sliderStatus').html( $(this).val() );
  $("#img").prop("src", imageUrl[v]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" id="slider" value="0.0" min="0" max="5" step="1" />
<br /><br />
<img src="" style='width:100px;height:100px;' id='img'/>
slider value = <span id="sliderStatus">0</span>

希望能帮到你。