使用W3.CSS发布多个幻灯片 [英] Issue with multiple slideshows using W3.CSS

查看：89 发布时间：2018/6/21 16:46:43 javascript html css

本文介绍了使用W3.CSS发布多个幻灯片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

我的问题是，并非所有的幻灯片工作，只是第一个。其他的显示不正确，我只能看到导航箭头。我猜测我需要为每个模式重置Javascript函数，但是我已经尝试了不同的东西，因为我对Javascript的理解不同。它不起作用。

请帮助！

这是我的HTML：

 < div class = w3-colstyle =width：20.93％;> 
< img onclick =document.getElementById（'dposters0001'）。style.display ='block'src =portfolio / design / posters / 0001a.jpgstyle =width：100％;类= W3-悬停不透明度/> 
< div id =dposters0001class =w3-modal> 
< div class =w3-modal-content w3-card-4 w3-animate-zoom> 
< header class =w3-container w3-red> 
 < h2>旅游< / h2> 
< / header> 
< div class =w3-row> 
< div class =w3-container w3-third> 
< h1>简介< / h1> 
< p>简介是英格兰的首府城市。它是英国人口最多的城市，拥有1300多万居民的大都市区。< / p> 
< p> Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。如果你想让自己的工作变得更加轻松，那么就应该尽量多做一些工作。< / p> 
< / div> 
< div class =w3-container w3-twothird w3-padding-16> 
< div class =w3-content w3-display-container w3-center> 
   < div class =w3-center w3-section w3-large w3-text-red w3-display-bottomleftstyle =width：100％> 
< div class =w3-left w3-padding-left w3-hover-text-blackonclick =plusDivs（-1）>❮< / div> 
< div class =w3-right w3-padding-right w3-hover-text-blackonclick =plusDivs（1）>❯< / div> 
< span class =w3-badge demo w3-border w3-hover-whiteonclick =currentDiv（1）>< / span> 
< span class =w3-badge demo w3-border w3-hover-whiteonclick =currentDiv（2）>< / span> 
< span class =w3-badge demo w3-border w3-hover-whiteonclick =currentDiv（3）>< / span> 
< / div> 
< / div> 
< / div> 
 
< / div> 
< div class =w3-container w3-light-grey w3-padding>

这是CSS：

  .mySlides 
 {
 display：none; 
} 
 .w3-left，.w3-right，.w3-badge 
 {
 cursor：pointer; 
} 
 .w3-badge 
 {
 height：13px; 
 width：13px; 
 padding：0; 
 background-color：transparent; 
}

这是Javascript：

  var slideIndex = 1; 
 showDivs（slideIndex）; 
 
函数plusDivs（n）{
 showDivs（slideIndex + = n）; 
} 
 
函数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; 
} 
（i = 0; i  dots [i] .classList.remove（w3-white）; 
} 
 x [slideIndex-1] .style.display =block; 
 dots [slideIndex-1] .classList.add（w3-white）;

解决方案

我有完全相同的问题今天终于解决了。

你需要做的是在你的类和函数的末尾添加一个名称，这样javascript就可以区分每个不同的幻灯片。例如，在我的代码中，我为我的第一个幻灯片添加了3rdfloor，然后在下一个添加了4thfloor。我希望你能看到下面的代码片段：

见下文：

 < div id =3rd Floorclass =w3-container citystyle =display：none> 
< div class =container 75％> 
< div class =w3-content w3-display-container> < a class =w3-btn-floating w3-display-leftonclick =plusDivs3rdfloor（-1）>&＃10094;< / a> < a class =w3-btn-floating w3-display-rightonclick =plusDivs3rdfloor（+1）>&＃10095;< / a> 
< div class =w3-display-container 3rdfloor> < img src =images / 32B / 32BFloorplan.jpgstyle =width：100％> 
< div class =w3-display-bottommiddle w3-large w3-container w3-padding-16>平面图< / div> 
< / div> 
< div class =w3-display-container 3rdfloor> < img src =images / 32B / kitchen1.JPGstyle =width：100％> 
< div class =w3-display-bottommiddle w3-large w3-container w3-padding-16>厨房< / div> 
< / div> 
< / div> 
< script> 
 var slideIndex3rdfloor = 1; 
 showDivs3rdfloor（slideIndex3rdfloor）; 
 
函数plusDivs3rdfloor（n）{
 showDivs3rdfloor（slideIndex3rdfloor + = n）; 
} 
 
 function showDivs3rdfloor（n）{
 var i; 
 var x = document.getElementsByClassName（3rdfloor）;如果（n> x.length）{slideIndex3rdfloor = 1} 
 if（n <1）{slideIndex3rdfloor = x.length} 
 for（i = 0; i x [i] .style.display =none; 
} 
 x [slideIndex3rdfloor-1] .style.display =block; 
} 
< / script> 
< / div> 
< / div> 
< div id =4th Floorclass =w3-container citystyle =display：none> 
< div class =container 75％> 
< div class =w3-content w3-display-container> < a class =w3-btn-floating w3-display-leftonclick =plusDivs4thfloor（-1）>&＃10094;< / a> < a class =w3-btn-floating w3-display-rightonclick =plusDivs4thfloor（+1）>&＃10095;< / a> 
< div class =w3-display-container 4thfloor> < img src =images / 32C / 32CFloorplan.jpgstyle =width：100％> 
< div class =w3-display-bottommiddle w3-large w3-container w3-padding-16>平面图< / div> 
< / div> 
< div class =w3-display-container 4thfloor> < img src =images / 32C / Kitchen1.jpgstyle =width：100％> 
< div class =w3-display-bottommiddle w3-large w3-container w3 -`padding-16>厨房< / 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）;如果（n> x.length）{slideIndex4thfloor = 1} 
 if（n <1）{slideIndex4thfloor = x.length} 
 for（i = 0; i x [i] .style.display =none; 
} 
 x [slideIndex4thfloor-1] .style.display =block; 
} 
< / script> 
< / div> 
< / div>

因此，基本上为您的网站取代任何我想拥有3rdfloor或4thfloor它应该工作。

希望这有助于！

干杯，GC

I am trying to create a portfolio website and I want to use modals to display projects. I am using the W3.CSS framework.

My problem is that not all slideshows work, just the first one. The other ones are not displayed properly and all I can see is the navigation arrows. I am guessing I need to make my Javascript function reset for every modal, but I have tried different things for what I understand of Javascript and it does not work.

Help please!

This is my 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>

This is the CSS:

.mySlides 
{
display: none;
}
.w3-left, .w3-right, .w3-badge
{
cursor: pointer;
}
.w3-badge
{
height: 13px;
width: 13px;
padding: 0;
background-color: transparent;
}

And this is the 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");
}

解决方案

I had the exact same problem today and finally solved it.

What you need to do is add a name to the end of your classes and functions so the javascript can differentiate between each of the different slideshows.

For example, in my code, I added "3rdfloor" for my first slideshow and then "4thfloor" for the next. I hope you can see this in the snippet below

See Below:

    <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>

So basically for your site replace wherever I have "3rdfloor" or "4thfloor" with whatever you want and it should work.

Hope this helps!

Cheers, GC

这篇关于使用W3.CSS发布多个幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

使用W3.CSS发布多个幻灯片 [英] Issue with multiple slideshows using W3.CSS

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

使用W3.CSS发布多个幻灯片 [英] Issue with multiple slideshows using W3.CSS

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭