logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

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

 印度阿三17 2019-09-23

我正在开发显示由HTML表和Image组成的屏幕,HTML表是完全动态的.

代码工作流程

当用户加载页面时(使用URL)我在不同的部分呈现HTML表,这意味着加载了页面.我一次以“JSON”格式获取所有表格数据,然后在间隔(间隔)为3秒的UI上一次显示3-3行当加载完整表格时我正在显示图像一段时间之后再次加载表并显示一旦表加载后的图像,所以它工作正常,现在我要做的是动态显示图像

我想做什么

目前我这样做< img src =“Image / Counter A / CounterA1.jpg”alt =“Some Image”width =“460”height =“345”>因为文件夹中只有一个要显示的图像,但是现在计数器A有两个图像或3或者它可能是什么所以当页面加载时我得到哪个图像将被加载到像这样的对象中var pict = {“Counter A：“[”CounterA1.jpg“,”CounterA2.jpg“]}对于计数器A,其他计数器也有两个类似的图像,所以我要做的是首先加载表,当加载表完成试图显示第一个图像比再次加载表比显示图像2
这就是我在数组中有图像链接的原因,我唯一的问题是一次显示一个图像

工作流程

表格加载 – > 3秒后 – >接下来的3行表,直到表的最后一页 – > show Image1(CounterA1.jpg) – >再次加载表 – > show Image2(CounterA2.jpg) – >然后再次表 – >然后再次Image1,因为只有两个图像

我已经完成了显示HTML表并显示只有一个Image的图像,现在我想动态地执行

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 {
  ;
}

.color1 {
  background: #4AD184;
}

.color2 {
  background: #EA69EF;
}

.color3 {
  background: #E1A558;
}

.color4 {
  background: #F4F065;
}

.hidden,
.already-shown {
  display: none;
}
<script src="https://cdnjs./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn./bootstrap/4.3.1/css/bootstrap.min.css">
<div id="DisplayTable"></div>
<div id="displayImage" style="display: none">

</div>

我已经注释掉了我的JS代码中的所有行以便更好地理解,这里你可以在我上传的图片中看到图像是常见的文件夹,所以我可以在src和counter手动设置它们的图像我得到像这样的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,表格 – > Image2但是在这张桌子之后,这两张图片都在其他下面渲染一张,请查看我的代码片段

这就是我的Image渲染Check this的方式

和This

My Image Folder

解决方法:

试试这样吧.

我已经介绍了一种新的函数来格式化HTML格式的图像.然后得到它的长度和循环引入了一个cnt(count)变量并使其增加.并使用modulo查找数字并重复图像.

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 {
  ;
}

.color1 {
  background: #4AD184;
}

.color2 {
  background: #EA69EF;
}

.color3 {
  background: #E1A558;
}

.color4 {
  background: #F4F065;
}

.hidden,
.already-shown {
  display: none;
}
<script src="https://cdnjs./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn./bootstrap/4.3.1/css/bootstrap.min.css">
<div id="DisplayTable"></div>
<div id="displayImage" style="display:none">

</div>
来源：https://www./content-1-463851.html

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 印度阿三17 > 《开发》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多