使用縮略圖庫中的箭頭鍵導航

-1

我前段時間製作了此圖片庫，現在有了這個想法，如果您可以使用箭頭鍵（左側和右側）導航它，那將會很棒。由於我對編程比較陌生，因此無法使用我在論壇中找到的內容。我會很高興，如果有人可以幫助:)使用縮略圖庫中的箭頭鍵導航

在底部有一個鏈接到jsfiddle畫廊。

這裏是畫廊的樣子：

在文件頭中的JavaScript：

function reset() 
      { 
      var imgs = document.getElementsByTagName('img'); 
      } 

     function init() 

       {document.getElementById('img1');} 

       window.onload = init;

的CSS：

   #large { 
         width:820px; 
         height:619px; 
         background:url(image_I_820x619.jpg) 
         no-repeat center;} 



      .thumb66x50 { 
         width:66px; 
         height:50px;}

而且圖像畫廊的體：

<div id="large"></div>   

<img id="img1" src="thumbnail_image_I.jpg" class='thumb66x50' alt="" onclick="reset();document.getElementById('large').style.backgroundImage='url(image_I_820x619.jpg)';"> 

<img id="img2" src="thumbnail_image_II.jpg" class='thumb66x50' alt="" onclick="reset();document.getElementById('large').style.backgroundImage='url(image_II_820x619.jpg)';">

這裏的上的jsfiddle畫廊：（奇怪的是，它只能在那裏，如果我把的JavaScript的HTML面板...）

來源

2017-08-04 maintete

你的畫廊什麼都不做。什麼是'imgs [i];'？ HTML在哪裏？在哪裏的CSS ...請創建一個你所擁有的[mcve]，並描述最好的你可以什麼是錯的，什麼是所需的畫廊行爲。 –

[編輯]你的問題，使用編輯器中的「<>」按鈕創建一個代碼片段。 –

謝謝你的留言！代碼現在正確顯示，我得到了jsfiddle上的畫廊:)我把鏈接放在原始文章中。另外我刪除了{imgs [i];}，這是其他一些鼠標懸停效果。 – maintete

到您的解決方案的替代方案是保持JS邏輯在一個地方。以下內容適用於任意數量的縮略圖。

(function() { 
 

 
    let lg = document.querySelector("#large"), 
 
     sm = document.querySelectorAll("[data-bg]"), 
 
     setBg = (el = sm[0]) => lg.style.backgroundImage = `url('${ el.dataset.bg }')`; 
 

 
    Array.from(sm).forEach((el) => el.addEventListener("click", setBg.bind(this, el))); 
 
    setBg(); 
 
    
 
}());

#large{ 
 
    height: 130px; 
 
    background: #000 none 50% 50%/cover; 
 
    transition: 0.3s; 
 
} 
 

 
[data-bg] { 
 
    height: 50px; 
 
    cursor: pointer; 
 
}

<div id="large" role="presentation"></div>   
 

 
<img src="//placehold.it/60x50/bf0" data-bg="//placehold.it/800x600/bf0" alt="Green"> 
 
<img src="//placehold.it/60x50/0bf" data-bg="//placehold.it/800x600/0bf" alt="Azure"> 
 
<img src="//placehold.it/60x50/f0b" data-bg="//placehold.it/800x600/f0b" alt="Fuxxy">

來源

2017-08-08 02:34:54

使用縮略圖庫中的箭頭鍵導航

回答

相關問題