借助按钮，如何在图库中的图像之间切换？

如何解决借助按钮，如何在图库中的图像之间切换？

我想知道如何通过单击按钮在今天早上创建的画廊中显示/隐藏img吗？

我目前关于这部分的代码是：

function open1(){
    document.getElementById('img1').classList.toggle("open");
}

function open2(){
    document.getElementById('img2').classList.toggle("open");
}

function open3(){
    document.getElementById('img3').classList.toggle("open");
}

function open4(){
    document.getElementById('img4').classList.toggle("open");
}

function open5(){
    document.getElementById('img5').classList.toggle("open");
}

function open6(){
    document.getElementById('img6').classList.toggle("open");
}

function open7(){
    document.getElementById('img7').classList.toggle("open");
}

function open8(){
    document.getElementById('img8').classList.toggle("open");
}

body {
    display: grid;
  grid-template-columns: repeat(6,1fr);
  grid-template-rows: 4.375rem 60.625rem 33.75rem 102.6875rem 103.75rem 74.375rem 11.1875rem;
  gap: 0px 20px;
}

button,a,#button {
  display: inline-block;
  font-family: 'Poppins',sans-serif;
  color: #fff;
  font-size: 14px;
  background-color: #22cfb5;
  border: none;
  width: 170px;
  height: 30px; 
  border-radius: 15px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

#content-4 button {
  font-family: 'Poppins',sans-serif;
  font-weight: 700; 
  text-align: center;
  font-size: 14px;
  border: none;
  height: 22px;
  border-radius: 11px;
  background-color: white;
  color: #6633ff;
}

#content-4 .on {
  background-color: #5341f2;
  color: white; 
}

#projet1,#projet2,#projet3,#projet4,#projet5,#projet6,#projet7,#projet8{
  display: block;
  border-radius: 15px;
  overflow: hidden;
}

.visu-projets {
  width: 200px;
  border-radius: 15px;
}

h2 {
  font-family: 'Poppins',sans-serif;
  font-weight: 700; 
  text-align: center;
  font-size: 32px;
  line-height: 46px;
}  

.color {
  color: #5341f2;
}

#content-4 {
  display: grid;
  grid-template-columns: repeat(8,1fr);
  grid-template-rows: repeat(21,3.6875rem);
  grid-row-gap: 20px;
  place-items: center;
}

#content-4 h2 {
      grid-column: 2 / span 6;
      grid-row: 1 / span 2;
    }

    #content-4 #filtre1 {
      grid-column: 4 / span 2;
      grid-row: 2 / span 2;
    }

    #content-4 #filtre2 {
      grid-column: 3 / span 4;
      grid-row: 3 / span 1;
    }

    #content-4 #filtre3 {
      grid-column: 4 / span 2;
      grid-row: 3 / span 2;
    }

    #content-4 #filtre4 {
      grid-column: 3 / span 4;
      grid-row: 3 / span 3;
    }

    #content-4 #filtre5 {
      grid-column: 4 / span 2;
      grid-row: 3 / span 4;
    }

    #projet1,#projet8 {
      width: 200px;
      height: 117px;
    }

    #projet1 {
      grid-column: 2 / span 6;
      grid-row: 5 / span 3;
    }

    #projet2 {
      grid-column: 2 / span 6;
      grid-row: 7 / span 3;
    }

    #projet3 {
      grid-column: 2 / span 6;
      grid-row: 9 / span 3;
    }

    #projet4 {
      grid-column: 2 / span 6;
      grid-row: 11 / span 3;
    }

    #projet5 {
      grid-column: 2 / span 6;
      grid-row: 13 / span 3;
    }

    #projet6 {
      grid-column: 2 / span 6;
      grid-row: 15 / span 3;
    }

    #projet7 {
      grid-column: 2 / span 6;
      grid-row: 17 / span 3;
    }

    #projet8 {
      grid-column: 2 / span 6;
      grid-row: 19 / span 3;
    }


#img1,#img2,#img3,#img4,#img5,#img6,#img7,#img8 {
  display: none;
  position: fixed;
  z-index: 9996;
  width: 100%;
  top: 0;
  bottom: 0;
  background: rgba(0,0.8);
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
}

#img1.open,#img2.open,#img3.open,#img4.open,#img5.open,#img6.open,#img7.open,#img8.open{
  display: flex;
}

#img1 img,#img2 img,#img3 img,#img4 img,#img5 img,#img6 img,#img7 img,#img8 img{
  width: 90%;
}

<body>
  <section id="projets">
    <div id="content-4">
      <h2 class="color">Mes projets</h2>
        <button type="button" id="filtre1" class="on">Tout</button>
        <button type="button" id="filtre2">Identité visuelle</button>
        <button type="button" id="filtre3">Print</button>
        <button type="button" id="filtre4">Web</button>
        <button type="button" id="filtre5">Logo</button>
        <a id="projet1"  onclick="open1()"><img src="img/melteam.jpg" class="visu-projets"></a>
        <a id="projet2" onclick="open2()"><img src="img/madeco.jpg" class="visu-projets"></a>
        <a id="projet3" onclick="open3()"><img src="img/ent.jpg" class="visu-projets"></a>
        <a id="projet4" onclick="open4()"><img src="img/hairbyi.jpg" class="visu-projets"></a>
        <a id="projet5" onclick="open5()"><img src="img/blizzard.jpg" class="visu-projets"></a>
        <a id="projet6" onclick="open6()"><img src="img/stores-goto.jpg" class="visu-projets"></a>
        <a id="projet7" onclick="open7()"><img src="img/ffk.jpg" class="visu-projets"></a>
        <a id="projet8" onclick="open8()"><img src="img/davidroth.jpg" class="visu-projets"></a> 
        <div id="img1" onclick="open1()"><img src="img/melteam.jpg" class="visu-projets"></div>
        <div id="img2" onclick="open2()"><img src="img/madeco.jpg" class="visu-projets"></div>
        <div id="img3" onclick="open3()"><img src="img/ent.jpg" class="visu-projets"></div>
        <div id="img4" onclick="open4()"><img src="img/hairbyi.jpg" class="visu-projets"></div>
        <div id="img5" onclick="open5()"><img src="img/blizzard.jpg" class="visu-projets"></div>
        <div id="img6" onclick="open6()"><img src="img/stores-goto.jpg" class="visu-projets"></div>
        <div id="img7" onclick="open7()"><img src="img/ffk.jpg" class="visu-projets"></div>
        <div id="img8" onclick="open8()"><img src="img/davidroth-click.jpg" class="visu-projets"></div>
    </div>
  </section>
</body>

我希望有人能解释我该怎么做，因为那些天，由于社区的帮助，我的工作量大大提高了！

基本上，当您进入本节时，我需要对我的img进行全部排序，然后单击按钮以在不同类别之间进行切换。

借助按钮，如何在图库中的图像之间切换？

如何解决借助按钮，如何在图库中的图像之间切换？

相关推荐