如何找到图像及其兄弟姐妹的原始来源以使图库导航正常工作？

问题描述 投票：0回答：1

我是 Javascript 的新手，我无法全神贯注地让我的导航按钮工作（上一个，下一个）

不确定最好的方法，但我在想，如果有办法回到原来的< figure class="thumb" >，然后导航到它的兄弟人物，那么就可以那样做吗？

现在已经为此苦苦挣扎了一个多星期......请让我知道代码中是否还有其他问题！始终对技巧和最佳实践技巧持开放态度

https://codepen.io/pamflambe/pen/dygMYRO

HTML、CSS、JavaScript：

function run() {const buttons = document.querySelectorAll('.thumb');
const overlay = document.querySelector('.overlay');
const overlayBG = document.querySelector('.overlayBG');
const overlayImage = document.querySelector('.overlay__inner img');
const overlayInner = document.querySelector('.overlay__inner');
buttons.forEach(button => button.addEventListener('click', open));
overlayImage.addEventListener('click', close);
overlayInner.addEventListener('click', close);
overlayBG.addEventListener('click', close);

function open(e) {
    overlay.style.display="table";
    const src= e.currentTarget.querySelector('img').src;
    overlayImage.src = src;
    overlayBG.style.display="table";
    overlayInner.style.display="table-cell";
    document.querySelector('.navButtons').style.display = "inline-grid";
};

function close() {
  overlay.classList.remove('open');
        overlay.style.display="none";
};


}
#gallery {
    margin: 1.5vw 1.5vw;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    }

.thumb {
    position: relative;
    margin: 1em;
    min-width: 30vw;
    min-height: 25vw;
    position: relative;
    overflow: hidden;
    }  

.thumb > img {
    position: absolute;
    }
    .thumb > img:hover {
    transform: scale(1.08, 1.08);
    transition: .6s ease;
    }


.thumb:hover{
    cursor:pointer;
    z-index: 0;
    transition: .6s ease;
    }


.thumb:hover .caption {
    transform: translateY(-2.5em);
    opacity: 1.0;
    transition: .6s ease;
    }

.caption {
    position: absolute;
    padding: 1em;
    bottom: 0;
    left: 2em;
    opacity: 0;
    width: fit-content;
    white-space: nowrap;
    font-weight: 100;
    font-size: 1em;
    z-index: 1;
    color: #ffffff;
    letter-spacing: 2px;
    text-shadow: 2.5px 3px 3px rgba(0,0,0,1);
    backdrop-filter: blur(10px) saturate(120%);
    background: rgba(0,0,0,.1);
    }



//project popup overlay



.overlay {
    display: none;
    position: absolute;
    justify-content: center;
    align-content: center;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    }

.overlayBG {
    display: none;
    position: fixed;
    align-content: center;
    width: 100vw;
    height: 100vh;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0, .9);
    z-index: 2;
    }


.overlay__inner {
    display: none;
    margin-left: 15vw;
    margin-right: 15vw;
    margin-bottom: 2%;
    top: 10vh;
    vertical-align: middle;
    background: #ffffff;
    padding: 1.2vw;
    position: fixed;
    opacity: 1;
    z-index: 2;
    }


.innerImage{
    width: 68.4vw;
    height: 38.475vw;
    }


.close {
    position: absolute;
    top: .01vw;
    right: 1vw;
    font-size: 1vw;
    background: none;
    outline: 0;
    color: grey;
    border: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    }

.close:hover {
    color: #D1A39E;
    }

.navContainer{
    width: 68.4vw;
    margin-left: 17vw;
    margin-right: 15vw;
    margin-bottom: 40%;
    margin-top: 17vw;
    vertical-align: middle;
    position: absolute;
}

.navButtons {
    display: none;
    height: 1px;
    z-index: 3;
    position: sticky;
    vertical-align: middle;
    }

.prev,
.next {
    cursor: pointer;
    position: fixed;
    width: auto;
    color: white;
    font-weight: bold;
    font-size: 3vw;
    transition: 0.6s ease;
    user-select: none;
    -webkit-user-select: none;
    z-index: 2;
}


.prev:hover,
.next:hover {
    text-shadow: 2.5px 3px 3px rgba(0,0,0,1);
    transform: scale(1.1);
    }

.next {
    right: 16vw;

}


.full_image {
    height: 100%;
    margin-left: -25%;
    }

#soySauce {
    margin-left: -10%;
}

#jelloWorld{
    margin-left: -1%;
}

#glassFish{
    margin-left: -22%
}


#pearAss{
    margin-left: -28%;
}
<div class="overlay">
  <div class="overlayBG"></div>
  <div class="overlay__inner">
    <button class="close" onclick="close()">close X</button>
    <img class="innerImage">
  </div>
<div class="navContainer">
  <nav class="navButtons">
        <nav class="prev" onclick="prv()">&#10094;</nav>
        <nav class="next" onclick="nxt()">&#10095;</nav>
    </nav>  
</div>
</div>   
   
<main id="gallery" onclick="run()">
    <figure class="thumb">
      <img class="full_image" id="soySauce" src="https://images.squarespace-cdn.com/content/v1/5cb788c29b8fe84734590bee/1605154714762-Q1AF1GRGP7L3E9TRFEQM/soy_sauce_ad.png" alt=""/>
      <figcaption class="caption">Soy Sauce</figcaption>
    </figure>
    
    <figure class="thumb">
      <img class="full_image" id="jelloWorld" src="https://images.squarespace-cdn.com/content/v1/5cb788c29b8fe84734590bee/1636172941453-JDHE57N1W1TDY44J9SL1/jello.png" alt=""/>
      <figcaption class="caption">Jello World</figcaption>
    </figure>
    
    <figure class="thumb">
      <img class="full_image" src="https://images.squarespace-cdn.com/content/v1/5cb788c29b8fe84734590bee/1598817570941-YKF8VC9QNUY2ODIZ4GPJ/ramen_boat.jpg" alt=""/>
      <figcaption class="caption">Bowl 'o Boats</figcaption>
    </figure>
    
    <figure class="thumb">
      <img class="full_image" id="glassFish" src="https://images.squarespace-cdn.com/content/v1/5cb788c29b8fe84734590bee/1598819528233-NQA7IFBR4IWHAECHAXZD/lowPoly_v009_Editor_a_i3_i3_0040.jpg" alt=""/>
      <figcaption class="caption">Glass Fish</figcaption>
    </figure>
    
    <figure class="thumb">
      <img class="full_image" src="https://images.squarespace-cdn.com/content/v1/5cb788c29b8fe84734590bee/1598817571504-UF8F3Y2A38QX2GOVJCKK/taco_logo_033.jpg" alt=""/>
      <figcaption class="caption">Taco Planet</figcaption>
    </figure>
    
    <figure class="thumb">
      <img class="full_image" src="https://images.squarespace-cdn.com/content/v1/5cb788c29b8fe84734590bee/1598503927733-RIKXJZFVVNY1BYQ5K7HI/I_cant_sleep.png" alt=""/>
      <figcaption class="caption">Insomnia Scribbles</figcaption>
    </figure>
    
    <figure class="thumb">
      <img class="full_image" src="https://images.squarespace-cdn.com/content/v1/5cb788c29b8fe84734590bee/c8aa194f-4f5a-4dc2-9e7a-853915c4651c/theirTrophy.png" alt=""/>
      <figcaption class="caption">Tryhard Trophy</figcaption>
    </figure>
    
    <figure class="thumb">
      <img class="full_image" src="https://images.squarespace-cdn.com/content/v1/5cb788c29b8fe84734590bee/1598817571941-GIGUFXXC50SSJ92C69ZM/corndog_020.jpg" alt=""/>
      <figcaption class="caption">A Single Corn Dog</figcaption>
    </figure>
      
    <figure class="thumb">
      <img class="full_image" src="https://images.squarespace-cdn.com/content/v1/5cb788c29b8fe84734590bee/1636170985553-LQKQ3C1RGJGW75CZ29U4/image-asset.png" alt=""/>
      <figcaption class="caption"><b>That Time I Had a Contest</b><br>Like 5 People Entered</figcaption>
    </figure>
    
    <figure class="thumb">
      <img class="full_image" src="https://images.squarespace-cdn.com/content/v1/5cb788c29b8fe84734590bee/1598815305661-B0VIRFJ9V2VF09XJY49K/cel_pear.png" alt=""/>
      <figcaption class="caption">Pear (Normal)</figcaption>
    </figure>
    
    <figure class="thumb">
      <img class="full_image" id="pearAss" src="https://images.squarespace-cdn.com/content/v1/5cb788c29b8fe84734590bee/1598817570971-QYM2SN2290R7KIU8N41K/pear_ass.jpg" alt=""/>
      <figcaption class="caption">Pear (Butt)</figcaption>
    </figure>
      
</main>

试图为调用 parentNode 的 prv() 和 nxt() 创建一个函数，然后可以访问 previousSibling 和 nextSibling，但不确定这样做的语法或者是否可能

javascript html css navigation gallery
1个回答
0
投票

一种可能的方法是给你所有的数字 id 并将当前打开的 id 存储在一个变量中。你的按钮然后增加/减少这个 id.

HTML：

<figure data-id="1" class="thumb">

JS:

var curImgId = 0;
document.querySelector(".prev").addEventListener("click", prv);
document.querySelector(".next").addEventListener("click", nxt);
...
function open(e) {
  openFig(e.currentTarget);
}
function openFig(fig) {
  ...
  curImgId = parseInt(fig.dataset.id);
  ...
}
function prv() {
  var prvFig = document.querySelector(".thumb[data-id='" + (curImgId - 1) + "']");

  if (prvFig != null) {
    openFig(prvFig);
  } else {
    console.log("first image reached");
  }
}

function nxt() {
  var nxtFig = document.querySelector(".thumb[data-id='" + (curImgId + 1) + "']");

  if (nxtFig != null) {
    openFig(nxtFig);
  } else {
    console.log("last image reached");
  }
}

请注意，运行函数的设置方式可能会执行多次。您可以使用它来只执行一次函数：

document.addEventListener("DOMContentLoaded", function(event) {
  ...
})

参见此处：https://codepen.io/Sebireb/pen/NWONxvK

补充一点： 使用 jQuery 让这样的事情变得更容易，如果你还没有，试一试。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.