Question

我刚才创建了这个图片库，现在有了这个想法，如果你能用箭头键（左右）导航它会很棒。因为我对编程比较陌生，所以我无法使用我在论坛中找到的内容。如果有人能提供帮助，我会很高兴：）

在底部有一个指向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面板中......）

https://jsfiddle.net/cv6k9k0f/4/

Answer 1

您的解决方案的替代方案是将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">

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

1 个答案: