1. 首页
  2. 问题
  3. 如何在UI上动态显示图像？
小编典典

如何在UI上动态显示图像？

css

我正在显示由HTML表和图像组成的屏幕，而HTML表是完全动态的。

代码工作流程

当用户正在加载页面（带有URL）时，我将在不同部分呈现HTML表，这意味着该页面已加载。我一次获取所有表数据为’JSON’格式，然后在加载满表时UI的gap（Interval）中一次显示3-3行，3 seconds然后显示图像一段时间，然后再显示一次加载表并在加载表后显示图像，所以它工作正常，现在我想做的是动态显示图像

我要做什么

目前我这样做是Some Image因为文件夹中只显示一个图像，但是现在Counter A有两个图像或3个图像或其他可能的图像，所以当页面加载时，我正在将哪个图像加载到这样的对象中var images = {“Counter A”:[“CounterA1.jpg”, “CounterA2.jpg”]}作为Counter还有一个类似的其他计数器的两个图像，所以我想做的是先加载表，然后，当加载表完成时试图显示第一个图像而不是再次加载表而不是显示图像2 这就是为什么我在数组中有图像链接的原因，我唯一的问题是一次显示一张图像

工作流程

表格加载-> 3秒后->表格的下3行，直到表格的最后一页->再次显示Image1（CounterA1.jpg）->再次加载表格->再次显示Image2（CounterA2.jpg）->然后再次表格->然后再次Image1，因为只有两个图像

我已经完成了显示HTML表和仅显示一个图像的图像的操作，现在我想静态地动态地执行该操作

var tableValue = [{

  "Item Name": "MANCHOW  V SOUP",

  "SellingPrice": 100

}, {

  "Item Name": "SMIRNOFF GREEN APPLE 60",

  "SellingPrice": 202

}, {

  "Item Name": "SMIRNOFF GREEN APPLE30",

  "SellingPrice": 101

}, {

  "Item Name": "BOMBAY SAPHIRE 750",

  "SellingPrice": 472

}, {

  "Item Name": "BOMBAY SAPHIRE 30",

  "SellingPrice": 191

}, {

  "Item Name": "BLUE RIBBAND 750",

  "SellingPrice": 877

}, {

  "Item Name": "BLUE RIBBAND 60",

  "SellingPrice": 78

}, {

  "Item Name": "BACCARDI WHITE 750",

  "SellingPrice": 248

}, {

  "Item Name": "BACCARDI WHITE 180",

  "SellingPrice": 585

}, {

  "Item Name": "BACCARDI WHITE 60",

  "SellingPrice": 202

}, {

  "Item Name": "OLD MONK 180",

  "SellingPrice": 225

}, {

  "Item Name": "OLD MONK 90",

  "SellingPrice": 168

}, {

  "Item Name": "OLD MONK 60",

  "SellingPrice": 90

}, {

  "Item Name": "OLD MONK 30 ",

  "SellingPrice": 45

}, {

  "Item Name": "DON ANGEL 750",

  "SellingPrice": 466

}, {

  "Item Name": "DON ANGEL 30",

  "SellingPrice": 191

}, {

  "Item Name": "SAUZA SILVER 700",

  "SellingPrice": 615

}, {

  "Item Name": "SAUZA SILVER 30",

  "SellingPrice": 270

}, {

  "Item Name": "LIME WATER",

  "SellingPrice": 45

}, {

  "Item Name": "PACKEGED WATER 1L",

  "SellingPrice": 39

}, {

  "Item Name": "MANSION HOUSE 650",

  "SellingPrice": 900

}, {

  "Item Name": "Chole Kulche",

  "SellingPrice": 80

}, {

  "Item Name": "Butter Nan",

  "SellingPrice": 65

}, {

  "Item Name": "Dhai",

  "SellingPrice": 20

}, {

  "Item Name": "Rice",

  "SellingPrice": 55

}, {

  "Item Name": "Plain rice",

  "SellingPrice": 30

}, {

  "Item Name": "MANSION HOUSE 650",

  "SellingPrice": 900

}, {

  "Item Name": "Chole Kulche",

  "SellingPrice": 80

}, {

  "Item Name": "Butter Nan",

  "SellingPrice": 65

}, {

  "Item Name": "Dhai",

  "SellingPrice": 20

}, {

  "Item Name": "Rice",

  "SellingPrice": 55

}, {

  "Item Name": "Plain rice",

  "SellingPrice": 30

}]



interval = '';

var images = {

  CounterA: ["CounterA1.jpg", "CounterA2.jpg"]

} // Images to be load on UI

initTable(tableValue);



function initTable(tableValue) {

  addTable(tableValue)

  interval = window.setInterval(showRows, 3000); // seting interval to show table in parts

}









function hideImage() {

  $("#displayImage").show(); //show Image and hide table

  $("#DisplayTable").hide();



  setTimeout(function() {

    initTable(tableValue);

  }, 3000);

}











function showRows() {

  // Any TRs that are not hidden and not already shown get "already-shown" applies

  if ($(".hidden:lt(3)").length > 0) { //checking is it is the last page or not

    $("#displayImage").hide(); //showing table hiding image

    $("#DisplayTable").show();

    $("tr:not(.hidden):not(.already-shown)").addClass("already-shown");

  } else {

    $("tr:not(.hidden):not(.already-shown)").addClass("already-shown");



    hideImage();



    clearInterval(interval); //if last then clearing time interval and calling the function again

  }



  $(".hidden:lt(3)").removeClass("hidden"); // this one is to hide previous  rows and show next

}



function addTable(tableValue) {

  var $tbl = $("<table />", {

      "class": "table fixed"

    }),

    $tb = $("<tbody/>"),

    $trh = $("<tr/>");



  var split = Math.round(tableValue.length / 4);

  for (i = 0; i < split; i++) {

    $tr = $("<tr/>", {

      class: "hidden "

    });



    for (j = 0; j < 4; j++) {

      $.each(tableValue[split * j + i], function(key, value) {

        if (typeof(value) === "number") {

          $("<td/>", {

            "class": "text-right color" + (j + 1)

          }).html(value).appendTo($tr);

        } else {

          $("<td/>", {

            "class": "text-left color" + (j + 1)

          }).html(value).appendTo($tr);

        }



      });

    }

    $tr.appendTo($tb);

  }

  $tbl.append($tb);

  $("#DisplayTable").html($tbl);

  var images = {

    "Counter A": ["CounterA1.jpg", "CounterA2.jpg"]

  } // Images to be load on UI



  for (var key in images) {



    var imageList = images[key];

    console.log(imageList.length)

    for (i = 0; i < imageList.length; i++) {

      console.log(imageList[i])

      var img = $('<img />').attr({

        'src': 'Image/' + key + '/' + imageList[i], // this one is displaying Image one below other

        'alt': 'Some Image',

        'width': 90 + "%",

        'height': 680

      }).appendTo('#displayImage');

    }



  }

}


tbody>tr>td {

  white-space: normal;

  border-collapse: collapse;

  font-family: Verdana;

  font-weight: bold;

  font-size: .9em;

}



td:nth-child(2),

td:nth-child(4),

td:nth-child(6),

td:nth-child(8) {

  width: 85px;

  max-width: 85px;

  height: 63px

}



.fixed {

  table-layout: fixed;

}



.color1 {

  background: #4AD184;

}



.color2 {

  background: #EA69EF;

}



.color3 {

  background: #E1A558;

}



.color4 {

  background: #F4F065;

}



.hidden,

.already-shown {

  display: none;

}


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div id="DisplayTable"></div>

<div id="displayImage" style="display: none">



</div>

我已经注释掉了JS代码中的所有行，以便更好地理解，在这里您可以在上传的图片中看到image通用文件夹，因此我可以在src和计数器上手动设置它以及它们的图像var images = {"Counter A":["CounterA1.jpg", "CounterA2.jpg"]}

编辑

我添加了下面的代码

        var images = {"Counter A":["CounterA1.jpg","CounterA2.jpg"]} // Images to be load on UI

            for (var key in images) {

            var imageList = images[key];
             console.log(imageList.length)
             for (i = 0; i < imageList.length; i++) 
                 {
                 console.log(imageList[i])
                 var img = $('<img />').attr({
                        'src': 'Image/'+key+'/'+imageList[i] , // this one is displaying Image one below other
                        'alt': 'Some Image',
                        'width': 90+"%",
                        'height':680
                    }).appendTo('#displayImage'); 
                 }

            }

我做了更多的工作，我想我快要得到预期的结果了，问题是它在另一个下面显示了一个图像，这是不正确的，我要做的是在有两个图像然后是表格-> Image1，table的情况下-> Image2，但在此表格后，这两个图像都在另一个下方渲染，请检查我的代码段


阅读 243

收藏
2020-05-16

共1个答案

小编典典

尝试这样。

我介绍了一个新功能来格式化中的图像HTML。然后得到它的长度和循环，引入了一个cnt（count）变量并使它递增。并使用取模来找到数字并重复图像。

var imgLen = 0;

var cnt = 0;



var tableValue = [{

    "Item Name": "MANCHOW  V SOUP",

    "SellingPrice": 100

}, {

    "Item Name": "SMIRNOFF GREEN APPLE 60",

    "SellingPrice": 202

}, {

    "Item Name": "SMIRNOFF GREEN APPLE30",

    "SellingPrice": 101

}, {

    "Item Name": "BOMBAY SAPHIRE 750",

    "SellingPrice": 472

}, {

    "Item Name": "BOMBAY SAPHIRE 30",

    "SellingPrice": 191

}, {

    "Item Name": "BLUE RIBBAND 750",

    "SellingPrice": 877

}, {

    "Item Name": "BLUE RIBBAND 60",

    "SellingPrice": 78

}, {

    "Item Name": "BACCARDI WHITE 750",

    "SellingPrice": 248

}, {

    "Item Name": "BACCARDI WHITE 180",

    "SellingPrice": 585

}, {

    "Item Name": "BACCARDI WHITE 60",

    "SellingPrice": 202

}, {

    "Item Name": "OLD MONK 180",

    "SellingPrice": 225

}, {

    "Item Name": "OLD MONK 90",

    "SellingPrice": 168

}, {

    "Item Name": "OLD MONK 60",

    "SellingPrice": 90

}, {

    "Item Name": "OLD MONK 30 ",

    "SellingPrice": 45

}, {

    "Item Name": "DON ANGEL 750",

    "SellingPrice": 466

}, {

    "Item Name": "DON ANGEL 30",

    "SellingPrice": 191

}, {

    "Item Name": "SAUZA SILVER 700",

    "SellingPrice": 615

}, {

    "Item Name": "SAUZA SILVER 30",

    "SellingPrice": 270

}, {

    "Item Name": "LIME WATER",

    "SellingPrice": 45

}, {

    "Item Name": "PACKEGED WATER 1L",

    "SellingPrice": 39

}, {

    "Item Name": "MANSION HOUSE 650",

    "SellingPrice": 900

}, {

    "Item Name": "Chole Kulche",

    "SellingPrice": 80

}, {

    "Item Name": "Butter Nan",

    "SellingPrice": 65

}, {

    "Item Name": "Dhai",

    "SellingPrice": 20

}, {

    "Item Name": "Rice",

    "SellingPrice": 55

}, {

    "Item Name": "Plain rice",

    "SellingPrice": 30

}, {

    "Item Name": "MANSION HOUSE 650",

    "SellingPrice": 900

}, {

    "Item Name": "Chole Kulche",

    "SellingPrice": 80

}, {

    "Item Name": "Butter Nan",

    "SellingPrice": 65

}, {

    "Item Name": "Dhai",

    "SellingPrice": 20

}, {

    "Item Name": "Rice",

    "SellingPrice": 55

}, {

    "Item Name": "Plain rice",

    "SellingPrice": 30

}]





interval = '';

var images = {

    CounterA: ["CounterA1.jpg", "CounterA2.jpg"]

} // Images to be load on UI

initTable(tableValue);



function initTable(tableValue) {

    addTable(tableValue)

    showRows();

    interval = window.setInterval(showRows, 1000); // seting interval to show table in parts

}









function hideImage() {

    var imgno = (cnt%imgLen)+1;

    $("#displayImage img").css("display","none");

    $("#displayImage img:nth-child("+imgno+")").css("display","block")



    $("#displayImage").show(); //show Image and hide table

    $("#DisplayTable").hide();



    setTimeout(function () {

        initTable(tableValue);

    }, 1000);

    cnt++;

}











function showRows() {

    // Any TRs that are not hidden and not already shown get "already-shown" applies

    if ($(".hidden:lt(3)").length > 0) { //checking is it is the last page or not

        $("#displayImage").hide(); //showing table hiding image

        $("#DisplayTable").show();

        $("tr:not(.hidden):not(.already-shown)").addClass("already-shown");

    } else {

        $("tr:not(.hidden):not(.already-shown)").addClass("already-shown");



        hideImage();



        clearInterval(interval); //if last then clearing time interval and calling the function again

    }



    $(".hidden:lt(3)").removeClass("hidden"); // this one is to hide previous  rows and show next

}



function addTable(tableValue) {

    var $tbl = $("<table />", {

        "class": "table fixed"

    }),

        $tb = $("<tbody/>"),

        $trh = $("<tr/>");



    var split = Math.round(tableValue.length / 4);

    for (i = 0; i < split; i++) {

        $tr = $("<tr/>", {

            class: "hidden "

        });



        for (j = 0; j < 4; j++) {

            $.each(tableValue[split * j + i], function (key, value) {

                if (typeof (value) === "number") {

                    $("<td/>", {

                        "class": "text-right color" + (j + 1)

                    }).html(value).appendTo($tr);

                } else {

                    $("<td/>", {

                        "class": "text-left color" + (j + 1)

                    }).html(value).appendTo($tr);

                }



            });

        }

        $tr.appendTo($tb);

    }

    $tbl.append($tb);

    $("#DisplayTable").html($tbl);



}



imageFormatter();



function imageFormatter() {



    var images = {

        "Counter A": ["CounterA1.jpg", "CounterA2.jpg"],

        "Counter B": ["CounterB1.jpg", "CounterB2.jpg"]

    } // Images to be load on UI



    for (var key in images) {



        var imageList = images[key];

        for (i = 0; i < imageList.length; i++) {

            var img = $('<img />').attr({

                'src': 'Image/' + key + '/' + imageList[i], // this one is displaying Image one below other

                'alt': key + '/' + imageList[i],

                'width': 90 + "%",

                'height': 680

            }).appendTo('#displayImage');

        }



    }

    imgLen = $("#displayImage img").length;

}


tbody>tr>td {

  white-space: normal;

  border-collapse: collapse;

  font-family: Verdana;

  font-weight: bold;

  font-size: .9em;

}



td:nth-child(2),

td:nth-child(4),

td:nth-child(6),

td:nth-child(8) {

  width: 85px;

  max-width: 85px;

  height: 63px

}



.fixed {

  table-layout: fixed;

}



.color1 {

  background: #4AD184;

}



.color2 {

  background: #EA69EF;

}



.color3 {

  background: #E1A558;

}



.color4 {

  background: #F4F065;

}



.hidden,

.already-shown {

  display: none;

}


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div id="DisplayTable"></div>

<div id="displayImage" style="display:none">



</div>
2020-05-16