Question

我正在构建一个网页，我希望在同一页面上具有多个范围滑块，这些滑块将根据滑块的值显示不同的图像。我可以使用一个滑块，但是第二个或第三个滑块不起作用，也不显示滑块的值。图像使用滑块值的数字，例如[0.jpg]，[1，jpg]，[2，jpg ]

我一定做错了

<style>
.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 40px;
  border-radius: 5px;  
  background: #458525
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 50px;
  height: 50px;
  border: 0;
  background: url('./images/Golf-Ball1.png');
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
   background: url('./images/Golf-Ball1.png');
  cursor: pointer;
}
</style>
</head>
<body>

<div class="slidecontainer">
   <img src="./images/0.jpg" alt="" id="img">
   <input type="range" min="0" max="10" value="5" class="slider" id="myRange1">
   <p>Value: <span id="value"></span></p>

   <img src="./images/0.jpg" alt="" id="img">
   <input type="range" min="0" max="10" value="5" class="slider" id="myRange2">
   <p>Value: <span id="value"></span>
   <?php echo "aaa"; ?><br/>
 </div>

<script type="text/javascript">
var slider = document.getElementById("myRange");
var output = document.getElementById("value");

output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;

  var img = document.getElementById("img");
  img.setAttribute("src", "./images/" + this.value + ".jpg");
}

</script>

Any advice will be valuable to a newbe

需要帮助，在同一页面上构建多个范围滑块，根据滑块的值将显示不同的图像

0 个答案: