使用缩略图库中的箭头键导航

-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

使用缩略图库中的箭头键导航

回答

相关问题