Question

我正在制作一个小的html-jquery程序，该程序动态生成一个表，其中每个单元格上都有一个slideshow。幻灯片获取您从计算机内部的文件夹中选择的图像。

问题在于，当我选择文件夹时，幻灯片放映会将每个带有幻灯片放映单元格的高度提高到100vh 。我不明白如何防止幻灯片比包含的单元格增长更多。

HTML

<body style="height:100vh;">
    <div class="row">
      <div class="container-fluid">
        Rows: <input id="sRows" type="number" name="" value="2">
        Columns: <input id="sCol" type="number" name="" value="2">
        <button id="btnGen" type="button" name="button">Generate!</button>
      </div>
    </div>
    <div  id="slideshowContiner" class="w3-table-all" >
    </div>
</body>

CSS

  #slideshowContiner {
        table-layout: fixed;
        height: 100%;
      }
      .slider{
        max-width:100%;
        max-height: 100%;
      }
      .mySlide{
        width:100%;
        height:auto;
      }

对于Javascript代码来说，可能太长了，无法读取，最后在#slideshowContiner内部创建的结构是这样的：

<div id="slideshowContiner" class="w3-table-all">
  <tr></tr>
  <td style="background-color:#6a833c">
    <input webkitdirectory="" mozdirectory="" msdirectory="" odirectory="" directory="" multiple="" type="file" name="file">
    <div class="w3-content w3-section slider" style="">
      <img class="mySlide" style="display: none;" src="blob:null/">
      <img class="mySlide" style="display: none;" src="blob:null/">
      <img class="mySlide" style="display: none;" src="blob:null/">
    </div>
    </td>
  </div>

jQuery（TL：DR;）

$( document ).ready(function() {
      var randomColor = function (){
          return '#'+ ('000000' + Math.floor(Math.random()*16777215).toString(16)).slice(-6);
      }

      var sliders = []
      var myIndex = 0;

      function carousel() {
        var i;
        var slides = elem.children( ".mySlide" ).css("display", "none")
        console.log(slides, this);
      }
      function createSlider(files){
        var slider = $('<div class="w3-content w3-section slider" style=""></div>')
        for (var i = 0; i < files.length; i++) {
          prev = $('<img class="mySlide" style="">').attr("src", URL.createObjectURL(files[i]))
          slider.append(prev)
        }
        sliders.push(slider)
        // slider.data("id", inn++)
        var myIndex = 0;
        slider.data("slideshow", function(){
          console.log(myIndex);
          var slides = slider.children( ".mySlide" ).css("display", "none")
          myIndex++;
          if (myIndex > slides.length) {myIndex = 1}
          console.log(slides[myIndex]);
          $(slides[myIndex-1]).css("display", "block")
          setTimeout(slider.data("slideshow"), 2000)

        })
        return slider
      }

      var sContainer = $("#slideshowContiner")
      var sRows = $("#sRows")
      var sCol = $("#sCol")
      var btnGen = $("#btnGen")

      function genGrid(){
        sContainer.html("")
        for (var i = 0; i < sRows.val(); i++) {
          var newRow = sContainer.append('<tr></tr>')
          // var newRow = sContainer.append('<div class="row flex-fill d-flex " style="border: 1px solid;"></div>')
          for (var x = 0; x < sCol.val(); x++) {
            var newCol = $('<td style="background-color:'+randomColor()+'"></td>')
            newRow.append(newCol);
            var input = $('<input webkitdirectory mozdirectory msdirectory odirectory directory multiple/>')
                .attr('type', "file")
                .attr('name', "file")
                .on("change", function() {
                  cell = $(this).data("cell")
                  var s = createSlider(this.files)
                  cell.append(s)
                  // carousel(s)
                  var init = s.data("slideshow")();

                })
                .data("cell", newCol);;
            newCol.append($(input))
          }
        }
      }
      genGrid()
      btnGen.click(genGrid)

JsFiddle。

注意：在此提要中，style="height:100vh;"位于根div上，原始代码位于body标记上。

Answer 1

您可以使用班级中的静态单位（例如px）将每个图像设置为固定的高度，并使用一些媒体查询以不同的分辨率控制其尺寸。这样，您可以期待它们的外观。

防止图像幻灯片显示超过容器单元

1 个答案: