尝试这样。
我介绍了一个新功能来格式化中的图像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 UIinitTable(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" ></div>
