Jquery范围滑块与图像交换

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

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

 

 slider value = 0 

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

Codepen链接

谢谢

Answer 1

 var imageUrl = new Array(); imageUrl[0] = 'http://sofzh.miximages.com/javascript/rose-flower-blossom-bloom-39517.jpeg'; imageUrl[1] = 'http://sofzh.miximages.com/javascript/marguerite-daisy-beautiful-beauty.jpg'; imageUrl[2] = 'http://sofzh.miximages.com/javascript/dahlia-flowers.jpg'; imageUrl[3] = 'http://sofzh.miximages.com/javascript/rose-flower-blossom-bloom-39517.jpeg'; imageUrl[4] = 'http://sofzh.miximages.com/javascript/marguerite-daisy-beautiful-beauty.jpg'; imageUrl[5] = 'http://sofzh.miximages.com/javascript/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]); }); 

   

  slider value = 0