问JavaScript追加
EN

Stack Overflow用户

提问于 2019-03-22 02:29:27

回答 1查看 43关注 0票数 1

我是一个全新的编程新手，所以如果我在这里有一些愚蠢的代码。

我想用API和JavaScript创建一个画廊。有10张图片从API加载，当我们点击每一张图片时，更大的版本就会出现在它旁边。我已经有了加载图片的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

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-03-22 03:20:59

我重构了一些东西，但这里有一个有效的示例：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，它们是页面上元素的变量。然后我给出了'content‘，然后fullButton点击了eventListeners。For 'content‘只是循环显示图像。fullButton将full容器中的背景图像设置为图像的“完整”大小。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/55287016

复制

相似问题

问JavaScript追加
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript追加EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript追加
EN