Question

我从API URL获取了一个图像系列，并在屏幕上显示了它们。但我想使用键盘上的箭头键从每个图像导航（向上，向下，向左和向右移动）到另一个图像。我知道如何使用键码。但是我不知道如何在运行时访问这些动态创建的图像并使用箭头键控制它们。因此，如果有人可以提出解决方案，我将不胜感激。

这是我的JS代码。它会正确获取并在屏幕上显示图像

<body>

  <div id="root"></div>
  <script src="src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">"></script>
  <script src="scripts.js"></script>
</body>

我的HTML代码：

#root {
  max-width: 1200px;
  margin: 0 auto;
}
img {
  display: block;
  margin: 1rem auto;
  max-width: 100%;
  border-radius: 12px;
  overflow: hidden;
  transition: all .2s linear;
  margin: 1rem;
}
.container {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}

我的CSS代码的一部分：

{{1}}

Answer 1

我建议您在决定实施更多功能之前先寻找jcarousel。

对于您的特定情况，工作流程可能是：

调用api，将$(".col-md-4 .entry-footer [template-include='true']").css("color", "red");提取到数组<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="divtemp-sc" class="container-fluid tab-pane active tab-padding" role="tabpanel" aria-labelledby="divtemp-sc"> <div class="col-md-4"> <div class="popup-temp-entry"> <div class="entry-header">Title 1</div> <div class="entry-body">Description 1</div> <div class="entry-footer"><a href="#" class="entry-footer-include-btn" template-include="false">Include</a></div> </div> </div> <div class="col-md-4"> <div class="popup-temp-entry"> <div class="entry-header">Title 2</div> <div class="entry-body">Description 2</div> <div class="entry-footer"><a href="#" class="entry-footer-include-btn" template-include="true">Include</a></div> </div> </div> <div class="col-md-4"> <div class="popup-temp-entry"> <div class="entry-header">Title 3</div> <div class="entry-body">Description 3</div> <div class="entry-footer"><a href="#" class="entry-footer-include-btn" template-include="false">Include</a></div> </div> </div> </div>
具有一个变量data.image。这是显示图像的src的当前索引
容器内只有1个img div
添加keypress()处理程序以更改currentIndex并将img div的srcArray更改为currentIndex

话虽这么说，我认为有很多很棒的库功能可以用于画廊功能

如何使用箭头键访问动态创建的图像

1 个答案: