Jquery范围滑块与图像交换 [英] Jquery Range Slider with Image Swap
本文介绍了Jquery范围滑块与图像交换的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试创建一个范围滑块,可以在用户拖动滑块时切换到不同的图像。我创建了一个范围滑块,但我不知道如何获取滑块的值,然后显示所选值的相应图像。
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.
谢谢
推荐答案
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>
希望它可以帮到你。
这篇关于Jquery范围滑块与图像交换的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文