[英]Jquery Range Slider with Image Swap
I'm trying to create a range slider that can swap to different images when the user drags the slider. 我正在尝试创建一个范围滑块,当用户拖动滑块时可以交换到不同的图像。 I created a range slider, but i do not know how to take the value of the slider, and then show the corresponding image for the value selected.
我创建了一个范围滑块,但我不知道如何获取滑块的值,然后显示所选值的相应图像。
Here is a visual example of my goal. 这是我目标的直观示例。
<input type="range" min="0" max="9" value="0" step="1" onChange="sliderChange(this.value)" />
<br /><br />
slider value = <span id="sliderStatus">0</span>
Any help would be appreciated on how to achieve this. 任何帮助将不胜感激如何实现这一目标。
Thank You 谢谢
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>
Hope it helps you out. 希望它可以帮助您。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.