如何使用范围滑块创建多个图像滑块/图库

Question

我正在学习 CSS、PHP 和 JavaScript。我想使用 HTML 范围滑块创建一个图像/画廊滑块。到目前为止，我已经创建了这个设计。我只想要一个图像和范围滑块工作。我应该使用 JavaScript 使范围滑块工作，但它不工作。我已经搜索了数小时的 youtube 视频，但没有成功。请我需要一些帮助，因为我还在学习。下面是我的 HTML 和 JavaScript 代码。

        <div class="container">/*my container*/
                 <div class="slides">/*division class for picture slides*/
                    <img src="img1.png"> /*pictures*/
                    <img src="img2.png">
                    <img src="img3.png">
                    <img src="img4.png">
                    <img src="img5.png">
                    <img src="img6.png">
                    <img src="img7.png">
                    <img src="img8.png">
                    <img src="img9.png">
                    <img src="img10.png">
                    <img src="img11.png">
                    </div>
                </div>
   
        
        <div class ="slide-container"> /*range slider container*/
             <input type="range" min="1" max="100" value="1" class="slider" id="myRange"/>
        </div>
  
/*Java Script Code*/
<script>
   var slider = document.getElementById("myRange");
   var output = document.getElementById("slider");
   var slideIndex = 1;
   showSlides(slideIndex);

        function plusSlides(n) {
        showSlides(slideIndex += n);
        } 
        function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("slides");
        var dots = document.getElementsByClassName("slider");
        if (n > slides.length) {slideIndex = 1}    
        if (n < 1) {slideIndex = slides.length}
        for (i = 0; i < slides.length; i++) {
          slides[i].style.display = "none";  
        }
        for (i = 0; i < dots.length; i++) {
          dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex-1].style.display = "block";  
        dots[slideIndex-1].className += " active";
        }
 </script>

Answer 1

这应该适合你：

Javascript：

function slider(val){
    var doc = document.getElementById(val);
    var img = document.getElementsByTagName("img");
    if(doc != undefined){
      for(var i = 0; i < img.length; i++){
        img[i].style.display = "none";
      }
      doc.style.display = "block";
    }
 }

CSS：

img{display: none;}
img:first-of-type{display: block;}

HTML：

<div class="container">
    <div class="slides">
      <img src="img1.png" id="1">
      <img src="img2.png" id="2">
      <img src="img3.png" id="3">
      <img src="img4.png" id="4">
      <img src="img5.png" id="5">
      <img src="img6.png" id="6">
      <img src="img7.png" id="7">
      <img src="img8.png" id="8">
      <img src="img9.png" id="9">
      <img src="img10.png" id="10">
      <img src="img11.png" id="11">
    </div>
</div>
<div class ="slide-container">
  <input oninput="slider(this.value)" onchange="slider(this.value)" type="range" min="1" max="100" value="1" class="slider" id="myRange"/>
</div>