帶圖像交換功能的Jquery Range Slider

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> 

任何幫助將不勝感激如何實現這一點。

Codepen Link

謝謝

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>

希望它可以幫助你。