基于文本框数值动态显示图库图片的教程-html教程-PHP中文网

基于文本框数值动态显示图库图片的教程

聖光之護

发布： 2025-10-17 09:53:01

原创

979人浏览过

基于文本框数值动态显示图库图片的教程

本教程旨在帮助开发者实现一个功能：根据用户在文本框中输入的数值，动态地从一个图库中显示对应数量的图片。我们将使用 jQuery 和 JavaScript 实现这一功能，并提供两种方案：顺序显示和随机显示，同时提供完整的代码示例和详细的步骤说明，帮助你快速掌握该技巧。

准备工作

在开始之前，请确保你已经引入了以下必要的库文件：

jQuery: 用于简化 DOM 操作和事件处理。
Bootstrap (可选): 用于提供基础的 CSS 样式和模态框组件。

你可以通过 CDN 引入这些库，或者下载到本地后引入。以下是 CDN 引入的示例：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

登录后复制

HTML 结构

首先，我们需要创建包含图片元素的 HTML 结构。这里我们使用 img 标签，并为每个图片添加一个唯一的 id，例如 no1、no2 等。所有的图片初始状态都隐藏。

<div class="container-fluid">
  <!-- Modal -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">请更新数值</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <!-- Modal body -->
        <div class="modal-body">
          <div class="row">
            <div class="col-sm-5">
              <label>图片数量</label>
            </div>
            <div>
              <label>Drop Zones数量</label>
            </div>
            <div class="col-sm-5">
              <input type="text" id='divimages' name="text" class="form-control input-sm numbers" />
            </div>
            <div class="col-sm-5">
              <input type="text" name="" id='dropZone' value="" class="form-control input-sm drpimg" />
            </div>
            <div class="col-sm-2 btn btn-primary btn-sm" id="clsSub">提交</div>
          </div>
        </div>
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div>
  <!-- Modal End -->

  <div class="container" style="border: 1px solid red; height: 250px; display: inline-flex;">
    <div class="row" id="gallery" style="width: 100%">
      <img draggable="true" ondragstart="drag(event)" id="no1" src="images/1.png" class="imgC hide">
      <img draggable="true" ondragstart="drag(event)" id="no2" src="images/2.png" class="imgC hide">
      <img draggable="true" ondragstart="drag(event)" id="no3" src="images/3.png" class="imgC hide">
      <!-- 更多图片... -->
      <img draggable="true" ondragstart="drag(event)" id="no29" src="images/29.png" class="imgC hide">
    </div>
  </div>
</div>

登录后复制

同时，我们需要一个文本框 (input) 用于接收用户输入的数值，和一个按钮 (button) 用于触发图片显示的事件。

CSS 样式

为了控制图片的大小和显示效果，可以添加一些 CSS 样式：

.imgC {
  width: 60px;
  height: 60px;
  margin-top: 5px;
}

.hide {
  display: none;
}

.show {
  display: block;
}

登录后复制

JavaScript 代码实现

接下来，我们将使用 jQuery 编写 JavaScript 代码来实现动态显示图片的功能。

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

方案一：顺序显示图片

这种方案会按照图片在 HTML 中出现的顺序，依次显示指定数量的图片。

$(function() {
    function showImages(int) {
        $("img[id^='no']").removeClass("show").addClass("hide"); // 隐藏所有图片
        $("img[id^='no']:lt(" + int + ")").addClass("show").removeClass("hide"); // 显示前 int 张图片
    }

    $('#myModal').modal('show');

    $("#clsSub").click(function() {
        var imgVal = parseInt($("#divimages").val());
        var drpVal = $("#dropZone").val();
        if (drpVal !== "" && imgVal <= 30) {
            showImages(imgVal);
            $('#myModal').modal('hide');
        }
    });
});

登录后复制

这段代码首先定义了一个 showImages 函数，该函数接收一个整数 int 作为参数，用于指定要显示的图片数量。

$("img[id^='no']").removeClass("show").addClass("hide"); 这行代码首先隐藏了所有 id 以 "no" 开头的 img 元素。
$("img[id^='no']:lt(" + int + ")").addClass("show").removeClass("hide"); 这行代码使用了 :lt() 选择器，它会选择 id 以 "no" 开头的 img 元素中，索引小于 int 的元素，然后将这些元素显示出来。

然后，代码绑定了按钮的点击事件。当用户点击按钮时，代码会获取文本框中的数值，并调用 showImages 函数来显示对应数量的图片。

方案二：随机显示图片

这种方案会随机选择指定数量的图片进行显示。

$(function() {
  function showImages(int) {
    $("img[id^='no']").removeClass("show").addClass("hide");
    for (var i = 0; i < int; i++) {
      var n = Math.floor(Math.random() * $("img[id^='no']:not('.show')").length);
      $("img[id^='no']:not('.show')").eq(n).toggleClass("hide show");
    }
  }

  $('#myModal').modal('show');

  $("#clsSub").click(function() {
    var imgVal = parseInt($("#divimages").val());
    var drpVal = $("#dropZone").val();
    if (drpVal !== "" && imgVal <= 30) {
      showImages(imgVal);
      $('#myModal').modal('hide');
    }
  });
});

登录后复制

与顺序显示方案不同的是，这段代码在 showImages 函数中使用了一个循环，每次循环都会随机选择一个未显示的 img 元素，并将其显示出来。

Math.floor(Math.random() * $("img[id^='no']:not('.show')").length) 这行代码用于生成一个随机索引，该索引的范围是从 0 到未显示的 img 元素的数量减 1。
$("img[id^='no']:not('.show')").eq(n).toggleClass("hide show"); 这行代码用于切换随机选择的 img 元素的显示状态。