时间戳

首页 > 解决方案 > JavaScript 追加

javascript - JavaScript 追加

问题描述

我在编码方面是全新的，所以如果我在这里可能有一些愚蠢的代码。

我想用 API 和 JavaScript 创建一个画廊。从 API 加载 10 张图片，当我们点击每张图片时，旁边会显示更大的版本。我已经有了用于加载图片的 API，但是一旦我点击它们，什么也没有发生。

这是代码：

<html>

<head>
  <title>EX-4</title>
  <style>
    body {
      font-family: arial;
    }
    
    #content {
      width: 200px;
      height: 200px;
      border: 1px solid #000;
    }
    
    .bodyblue {
      background: #000;
      color: #fff;
    }
    
    .fullImage {
      position: absolute;
      top: 140px;
      width: 550px;
      height: 100px;
      padding: 20px 10px;
      text-align: center;
      margin: 0 auto;
      left: 0;
      right: 0;
      display: none;
    }
    
    h1 {
      transform-origin: 50% 50%;
      font-size: 50px;
      font-family: 'Sigmar One', cursive;
      cursor: pointer;
      z-index: 2;
      position: absolute;
      top: 0;
      text-align: center;
      width: 100%;
    }
  </style>

</head>

<body onload="buildImage();">

  <div class="contents" id="content"></div>
  <button onclick="changeImage();fullScreen();">Full screen</button>


  <div class="fullImage" id="fullImage">
    <h1>Congratulations!</h1>
  </div>

  <script>
    var images = [
      'https://picsum.photos/200/300/?random',
      'https://picsum.photos/200/300/?random',
      'https://picsum.photos/200/300/?random',
      'https://picsum.photos/200/300/?random',
      'https://picsum.photos/200/300/?random',
      'https://picsum.photos/200/300/?random',
      'https://picsum.photos/200/300/?random',
      'https://picsum.photos/200/300/?random',
      'https://picsum.photos/200/300/?random',
      'https://picsum.photos/200/300/?random',
    ];
    var index = 0;

    var timeOut;

    function buildImage() {
      document.getElementById('content').style.backgroundImage = 'url(' + images[index] + ')';
    }

    function changeImage() {
      index++;
      if (index >= images.length) {
        index = 0;
      }
      document.getElementById('content').style.backgroundImage = 'url(' + images[index] + (index + 1) + ')';
    }

    function fullScreen() {
      document.getElementById('fullImage').style.backgroundImage = 'url(' + images[index] + ')';


    }
  </script>
</body>

</html>

标签： javascript

解决方案

我重构了几件事，但这是一个工作示例：https ://jsfiddle.net/ksumarine/g6rfwohb/

<html>

<head>
  <title>
    EX-4
  </title>
  <style>
    body {
      font-family: arial;
      position: relative;
    }
    
    #content {
      display: inline-block;
      width: 200px;
      height: 200px;
      border: 1px solid #000;
    }
    
    .bodyblue {
      background: #000;
      color: #fff;
    }
    
    .fullImage {
      display: inline-block;
      width: 200px;
      height: 300px;
      border: 1px solid #000;
    }
    
    h1 {
      transform-origin: 50% 50%;
      font-size: 50px;
      font-family: 'Sigmar One', cursive;
      cursor: pointer;
      z-index: 2;
      position: absolute;
      top: 0;
      text-align: center;
      width: 100%;
    }
  </style>
</head>

<body>
  <div class="contents" id="content"></div>
  <p>
    <button id="fullscreenButton">Full screen</button>
  </p>
  <div class="fullImage" id="fullImage"></div>
  <script>
    var images = [
      'https://picsum.photos/200/300/?image=1',
      'https://picsum.photos/200/300/?image=2',
      'https://picsum.photos/200/300/?image=3',
      'https://picsum.photos/200/300/?image=4',
      'https://picsum.photos/200/300/?image=5',
      'https://picsum.photos/200/300/?image=6',
      'https://picsum.photos/200/300/?image=7',
      'https://picsum.photos/200/300/?image=8',
      'https://picsum.photos/200/300/?image=9',
      'https://picsum.photos/200/300/?image=10'
    ];
    var currentIndex = 0;
    var content = document.getElementById('content');
    var full = document.getElementById('fullImage');
    var fullButton = document.getElementById('fullscreenButton');

    content.addEventListener('click', function() {
      currentIndex = currentIndex >= images.length - 1 ? 0 : currentIndex + 1;
      content.style.backgroundImage = `url(${images[currentIndex]})`;

    });

    fullButton.addEventListener('click', function() {
      full.style.backgroundImage = `url(${images[currentIndex]})`;

    });

    content.style.backgroundImage = `url(${images[currentIndex]})`;
  </script>
</body>

</html>

基本上，我删除了不需要的 body onload。您已经<script>在正文中拥有标签，因此脚本标签内的代码将自动运行。在我的示例中，内容立即获取数组中的第一个图像。

我为页面上的元素定义了content、full和fullButton, 它们是可变的。然后我给出了“内容”并fullButton单击eventListeners。对于“内容”，只需遍历图像并显示它们。将fullButton完整容器中的背景图像设置为图像的“完整”大小。

在您的初始代码中，您使用 CSS 隐藏了完整的 div，并且将绝对定位覆盖在完整的图像按钮上。

推荐阅读