Javascript 使用W3.CSS进行多个幻灯片放映时出现问题_Javascript_Html_Css

Javascript 使用W3.CSS进行多个幻灯片放映时出现问题

javascript html css

Javascript 使用W3.CSS进行多个幻灯片放映时出现问题,javascript,html,css,Javascript,Html,Css,我正在尝试创建一个投资组合网站，我想使用模态来显示项目。我正在使用W3.CSS框架我的问题是不是所有的幻灯片都能播放，只有第一个。其他的没有正确显示，我只能看到导航箭头。我猜我需要为每个模式重置Javascript函数，但我尝试了不同的方法来了解Javascript，但它不起作用救命啊这是我的HTML： <div class="w3-col" style="width:20.93%;"> <img onclick="document

我正在尝试创建一个投资组合网站，我想使用模态来显示项目。我正在使用W3.CSS框架

我的问题是不是所有的幻灯片都能播放，只有第一个。其他的没有正确显示，我只能看到导航箭头。我猜我需要为每个模式重置Javascript函数，但我尝试了不同的方法来了解Javascript，但它不起作用

救命啊

这是我的HTML：

    <div class="w3-col" style="width:20.93%;">
                <img onclick="document.getElementById('dposters0001').style.display='block'" src="portfolio/design/posters/0001a.jpg" style="width:100%;" class="w3-hover-opacity"/>
                <div id="dposters0001" class="w3-modal">
                    <div class="w3-modal-content w3-card-4 w3-animate-zoom">
                        <header class="w3-container w3-red"> 
                            <span onclick="document.getElementById('dposters0001').style.display='none'" class="w3-closebtn w3-padding-top">×</span>
                            <h2>Tourism</h2>
                        </header>
                        <div class="w3-row">
                            <div class="w3-container w3-third">
                                <h1>Brief</h1>
                                <p>Brief is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                            </div>
                            <div class="w3-container w3-twothird w3-padding-16">
                                <div class="w3-content w3-display-container w3-center">
                                    <img class="mySlides" src="portfolio/design/posters/0001a.jpg" style="max-height:80vh;width:auto;">
                                    <img class="mySlides" src="portfolio/design/posters/0001b.jpg" style="max-height:80vh;width:auto;">
                                    <img class="mySlides" src="portfolio/design/posters/0001c.jpg" style="max-height:80vh;width:auto;">
                                    <div class="w3-center w3-section w3-large w3-text-red w3-display-bottomleft" style="width:100%">
                                        <div class="w3-left w3-padding-left w3-hover-text-black" onclick="plusDivs(-1)">❮</div>
                                        <div class="w3-right w3-padding-right w3-hover-text-black" onclick="plusDivs(1)">❯</div>
                                        <span class="w3-badge demo w3-border w3-hover-white" onclick="currentDiv(1)"></span>
                                        <span class="w3-badge demo w3-border w3-hover-white" onclick="currentDiv(2)"></span>
                                        <span class="w3-badge demo w3-border w3-hover-white" onclick="currentDiv(3)"></span>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="w3-container w3-light-grey w3-padding">
                            <button class="w3-btn w3-right w3-white w3-border" onclick="document.getElementById('dposters0001').style.display='none'">Close</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w3-col" style="width:20.93%;">
                <img onclick="document.getElementById('dposters0002').style.display='block'" src="portfolio/design/posters/0002a.jpg" style="width:100%;" class="w3-hover-opacity"/>
                <div id="dposters0002" class="w3-modal">
                    <div class="w3-modal-content w3-card-4 w3-animate-zoom">
                        <header class="w3-container w3-red"> 
                            <span onclick="document.getElementById('dposters0002').style.display='none'" class="w3-closebtn w3-padding-top">×</span>
                            <h2>Tourism</h2>
                        </header>
                        <div class="w3-row">
                            <div class="w3-container w3-third">
                                <h1>Brief</h1>
                                <p>Brief is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                            </div>
                            <div class="w3-container w3-twothird w3-padding-16">
                                <div class="w3-content w3-display-container w3-center">
                                    <img class="w3-card-4" src="portfolio/design/posters/0002a.jpg" style="max-height:80vh;width:auto;">
                                </div>
                            </div>
                        </div>
                        <div class="w3-container w3-light-grey w3-padding">
                            <button class="w3-btn w3-right w3-white w3-border" onclick="document.getElementById('dposters0002').style.display='none'">Close</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="w3-col" style="width:20.93%;">
                <img onclick="document.getElementById('dposters0003').style.display='block'" src="portfolio/design/books/0001a.jpg" style="width:100%;" class="w3-hover-opacity"/>
                <div id="dposters0003" class="w3-modal">
                    <div class="w3-modal-content w3-card-4 w3-animate-zoom">
                        <header class="w3-container w3-red"> 
                            <span onclick="document.getElementById('dposters0003').style.display='none'" class="w3-closebtn w3-padding-top">×</span>
                            <h2>Tourism</h2>
                        </header>
                        <div class="w3-row">
                            <div class="w3-container w3-third">
                                <h1>Brief</h1>
                                <p>Brief is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                            </div>
                            <div class="w3-container w3-twothird w3-padding-16">
                                <div class="w3-content w3-display-container w3-center">
                                    <img class="mySlides" src="portfolio/design/books/0001a.jpg" style="max-height:80vh;width:auto;">
                                    <img class="mySlides" src="portfolio/design/books/0001b.jpg" style="max-height:80vh;width:auto;">
                                    <img class="mySlides" src="portfolio/design/books/0001c.jpg" style="max-height:80vh;width:auto;">
                                    <div class="w3-center w3-section w3-large w3-text-white w3-display-bottomleft" style="width:100%">
                                        <div class="w3-left w3-padding-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div>
                                        <div class="w3-right w3-padding-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</div>
                                        <span class="w3-badge demo w3-border w3-hover-white" onclick="currentDiv(1)"></span>
                                        <span class="w3-badge demo w3-border w3-hover-white" onclick="currentDiv(2)"></span>
                                        <span class="w3-badge demo w3-border w3-hover-white" onclick="currentDiv(3)"></span>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="w3-container w3-light-grey w3-padding">
                            <button class="w3-btn w3-right w3-white w3-border" onclick="document.getElementById('dposters0003').style.display='none'">Close</button>
                        </div>
                    </div>
                </div>
            </div>

这是Javascript：

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
   showDivs(slideIndex += n);
}

function currentDiv(n) {
   showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length} ;
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
     dots[i].classList.remove("w3-white");
  }
  x[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].classList.add("w3-white");
}

var slideIndex=1；
showDivs（slideIndex）；
函数plusDivs（n）{
showDivs（slideIndex+=n）；
}
函数currentDiv（n）{
showDivs（slideIndex=n）；
}
函数showDivs（n）{
var i；
var x=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“演示”）；
如果（n>x.length）{slideIndex=1}
如果（n<1）{slideIndex=x.length}；
对于（i=0；i

我今天遇到了完全相同的问题，最终解决了

您需要做的是在类和函数的末尾添加一个名称，以便javascript能够区分不同的幻灯片

例如，在我的代码中，我为第一个幻灯片添加了“3rdfloor”，然后为下一个幻灯片添加了“4thfloor”。我希望你能在下面的片段中看到这一点

见下文：

    <div id="3rd Floor" class="w3-container city" style="display:none">
    <div class="container 75%">
      <div class="w3-content w3-display-container"> <a class="w3-btn-floating w3-display-left" onclick="plusDivs3rdfloor(-1)">&#10094;</a> <a class="w3-btn-floating w3-display-right" onclick="plusDivs3rdfloor(+1)">&#10095;</a>
        <div class="w3-display-container 3rdfloor"> <img src="images/32B/32BFloorplan.jpg" style="width:100%">
          <div class="w3-display-bottommiddle w3-large w3-container w3-padding-16"> Floor Plan </div>
        </div>
        <div class="w3-display-container 3rdfloor"> <img src="images/32B/kitchen1.JPG" style="width:100%">
          <div class="w3-display-bottommiddle w3-large w3-container w3-padding-16"> Kitchen </div>
        </div>
      </div>
      <script>
    var slideIndex3rdfloor = 1;
    showDivs3rdfloor(slideIndex3rdfloor);

    function plusDivs3rdfloor(n) {
      showDivs3rdfloor(slideIndex3rdfloor += n);
    }

    function showDivs3rdfloor(n) {
      var i;
      var x = document.getElementsByClassName("3rdfloor");
      if (n > x.length) {slideIndex3rdfloor = 1}    
      if (n < 1) {slideIndex3rdfloor = x.length}
      for (i = 0; i < x.length; i++) {
         x[i].style.display = "none";  
      }
      x[slideIndex3rdfloor-1].style.display = "block";  
    }
    </script>
    </div>
  </div>
  <div id="4th Floor" class="w3-container city" style="display:none">
    <div class="container 75%">
      <div class="w3-content w3-display-container"> <a class="w3-btn-floating w3-display-left" onclick="plusDivs4thfloor(-1)">&#10094;</a> <a class="w3-btn-floating w3-display-right" onclick="plusDivs4thfloor(+1)">&#10095;</a>
        <div class="w3-display-container 4thfloor"> <img src="images/32C/32CFloorplan.jpg" style="width:100%">
          <div class="w3-display-bottommiddle w3-large w3-container w3-padding-16"> Floor Plan </div>
        </div>
        <div class="w3-display-container 4thfloor"> <img src="images/32C/Kitchen1.jpg" style="width:100%">
          <div class="w3-display-bottommiddle w3-large w3-container w3-`padding-16"> Kitchen </div>
        </div>
      </div>
      <script>
    var slideIndex4thfloor = 1;
    showDivs4thfloor(slideIndex4thfloor);

    function plusDivs4thfloor(n) {
      showDivs4thfloor(slideIndex4thfloor += n);
    }

    function showDivs4thfloor(n) {
      var i;
      var x = document.getElementsByClassName("4thfloor");
      if (n > x.length) {slideIndex4thfloor = 1}    
      if (n < 1) {slideIndex4thfloor = x.length}
      for (i = 0; i < x.length; i++) {
         x[i].style.display = "none";  
      }
      x[slideIndex4thfloor-1].style.display = "block";  
    }
    </script>
    </div>
  </div>


❮ ❯
导购图
厨房
var slideIndex3rdfloor=1；
showDivs3rdfloor（slideIndex3rdfloor）；
功能plusDivs3rdfloor（n）{
showDivs3rdfloor（slideIndex3rdfloor+=n）；
}
功能显示divs3rdfloor（n）{
var i；
var x=document.getElementsByClassName（“第三层”）；
如果（n>x.length）{slideIndex3rdfloor=1}
如果（n<1）{slideIndex3rdfloor=x.length}
对于（i=0；ix.length）{slideIndex4thfloor=1}
如果（n<1）{slideIndex4thfloor=x.length}
对于（i=0；i


因此，基本上，对于你的网站，无论我在哪里有“三楼”或“四楼”，只要你想要，它应该工作
希望这有帮助
干杯，GC我问错了吗？还是没人愿意帮忙？
    <div id="3rd Floor" class="w3-container city" style="display:none">
    <div class="container 75%">
      <div class="w3-content w3-display-container"> <a class="w3-btn-floating w3-display-left" onclick="plusDivs3rdfloor(-1)">&#10094;</a> <a class="w3-btn-floating w3-display-right" onclick="plusDivs3rdfloor(+1)">&#10095;</a>
        <div class="w3-display-container 3rdfloor"> <img src="images/32B/32BFloorplan.jpg" style="width:100%">
          <div class="w3-display-bottommiddle w3-large w3-container w3-padding-16"> Floor Plan </div>
        </div>
        <div class="w3-display-container 3rdfloor"> <img src="images/32B/kitchen1.JPG" style="width:100%">
          <div class="w3-display-bottommiddle w3-large w3-container w3-padding-16"> Kitchen </div>
        </div>
      </div>
      <script>
    var slideIndex3rdfloor = 1;
    showDivs3rdfloor(slideIndex3rdfloor);

    function plusDivs3rdfloor(n) {
      showDivs3rdfloor(slideIndex3rdfloor += n);
    }

    function showDivs3rdfloor(n) {
      var i;
      var x = document.getElementsByClassName("3rdfloor");
      if (n > x.length) {slideIndex3rdfloor = 1}    
      if (n < 1) {slideIndex3rdfloor = x.length}
      for (i = 0; i < x.length; i++) {
         x[i].style.display = "none";  
      }
      x[slideIndex3rdfloor-1].style.display = "block";  
    }
    </script>
    </div>
  </div>
  <div id="4th Floor" class="w3-container city" style="display:none">
    <div class="container 75%">
      <div class="w3-content w3-display-container"> <a class="w3-btn-floating w3-display-left" onclick="plusDivs4thfloor(-1)">&#10094;</a> <a class="w3-btn-floating w3-display-right" onclick="plusDivs4thfloor(+1)">&#10095;</a>
        <div class="w3-display-container 4thfloor"> <img src="images/32C/32CFloorplan.jpg" style="width:100%">
          <div class="w3-display-bottommiddle w3-large w3-container w3-padding-16"> Floor Plan </div>
        </div>
        <div class="w3-display-container 4thfloor"> <img src="images/32C/Kitchen1.jpg" style="width:100%">
          <div class="w3-display-bottommiddle w3-large w3-container w3-`padding-16"> Kitchen </div>
        </div>
      </div>
      <script>
    var slideIndex4thfloor = 1;
    showDivs4thfloor(slideIndex4thfloor);

    function plusDivs4thfloor(n) {
      showDivs4thfloor(slideIndex4thfloor += n);
    }

    function showDivs4thfloor(n) {
      var i;
      var x = document.getElementsByClassName("4thfloor");
      if (n > x.length) {slideIndex4thfloor = 1}    
      if (n < 1) {slideIndex4thfloor = x.length}
      for (i = 0; i < x.length; i++) {
         x[i].style.display = "none";  
      }
      x[slideIndex4thfloor-1].style.display = "block";  
    }
    </script>
    </div>
  </div>