需要一个字幕标签替换允许显示多个图像 - Need a marquee tag replacement allowing display of multiple images

我想要完成的是:
显示由几个(几十个或更多)公司徽标组成的字幕，从右到左在页面上排成一行。

我有以下代码在Firefox中按需工作，但在其他(Chrome, IE, Edge)浏览器中不起作用。
具体来说，如果合并图像的宽度大于div的宽度，则溢出图像将显示在下面的另一条"行"上，从最左边开始。似乎显示的持续时间就好像图像是正确的(因为在最后一个图像清除div边缘后有大量的空白空间/时间)。

我已经尝试使用建议的CSS3，和游泳鱼js的例子，但他们只与一个单一的图像工作。我正在使用php从mysql中获取多个图像，它们不适合我的需要。

<?php
session_start();
require('db.php');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Template</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>

<div id="wrap">
<div id="header" align="left">
<br>
<font color="gray">
<p align="right">Over <font color="maroon"><b>500,000 </b></font>flags placed since 2012</p> 
</font>
<p><img src="dialmiller.jpg" width="200" height="200" style="vertical-align: middle"/>
<span style="display:inline-block" align="right">
<font size="7">Flags for Fallen Vets </font><font size="5">.com </font>
</span> 
<figcaption><font color="gray">Never Forgotten</font></figcaption>
</p>
<p class ="social" align="middle">
<a href="#"><font color="black" size="5"><b>Donate</b></font></a>
<a target="_blank" href="https://www.facebook.com/flagsforfallenvets/"><img src="fb.png" width="20" height="20" align="right"/></a>
<a target="_blank" href="https://www.twitter.com"><img src="twr.jpg" width="20" height="20" align="right"/></a>
</p>

</div>
<ul id="menu">
<ul class="main-navigation">
  <li><a href="#">Home</a></li>
  <li><a href="#">Our Mission</a></li>
  <li><a href="#">National Cemeteries</a>
  <ul>
      <li><a href="#">Dallas-Fort Worth</a>
        <ul>
          <li><a href="#">Sponsors</a></li>
          <li><a href="#">Board</a></li>
          <li><a href="#">Map</a></li>
        </ul>
      </li>
<li><a href="#">Houston</a>
        <ul>
          <li><a href="#">Sponsors</a></li>
          <li><a href="#">Board</a></li>
          <li><a href="#">Map</a></li>
        </ul>
      </li>
<li><a href="#">Florida</a>
        <ul>
          <li><a href="#">Sponsors</a></li>
          <li><a href="#">Board</a></li>
          <li><a href="#">Map</a></li>
        </ul>
      </li>
<li><a href="#">Sarasota</a>
        <ul>
          <li><a href="#">Sponsors</a></li>
          <li><a href="#">Board</a></li>
          <li><a href="#">Map</a></li>
        </ul>
      </li>
<li><a href="#">South Florida</a>
        <ul>
          <li><a href="#">Sponsors</a></li>
          <li><a href="#">Board</a></li>
          <li><a href="#">Map</a></li>
        </ul>
      </li>
<li><a href="#">Black Hills</a>
        <ul>
          <li><a href="#">Sponsors</a></li>
          <li><a href="#">Board</a></li>
          <li><a href="#">Map</a></li>
        </ul>
      </li>
<li><a href="#">Fort Meade</a>
        <ul>
          <li><a href="#">Sponsors</a></li>
          <li><a href="#">Board</a></li>
          <li><a href="#">Map</a></li>
        </ul>
      </li>
</ul>
  <li><a target="_blank" href="newvolunteer.php">Volunteer Form</a></li>
  <li><a href="#">Sponsor Levels</a></li>
  <li><a href="#">2017 Shirts</a></li>
  <li><a href="#">Board of Directors</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>
</ul>
 <div class="main"> 
<h4 align="center"> Sponsors </h4> 
      <?php
       $fetch=mysql_query("select * from banners ORDER by level");
       if(mysql_num_rows($fetch))
          {
      ?>

  <marquee behavior="scroll" scrollamount="5" direction="left" onmouseover="this.stop();" onmouseout="this.start();">

       <ul class="ulclass" >
             <?php 
                while($row=mysql_fetch_array($fetch))
                 {
                 $id=$row['id'];
                 $feed= $row['image'];
               ?>
           <li class="liclassleft">
           <?php echo '<img src="img/banners/'.$feed.'"'.' width="125" height="125";'; ?>
           <?php }  ?>
           </li>
           <?php }  ?>  
      </ul>
</marquee>
</div>
<div id="sidebar">
<!-- CONTENT -->
<p>
 oeprjjiowerf wergui c uiweriu2mu[i3r 2wemu  [po23ior  34iopgti34tg 345ti,345t-0,i [po23ior  34iopgti34tg 345ti,345t-0,i
qerogpwejpiwepmkvpqervm  oeprjjiowerf wergui c uiweriu2mu[i3r 2wemu  [po23ior  34iopgti34tg 345ti,345t-0,i [po23ior  34iopgti34tg 345ti,345t-0,i
qerogpwejpiwepmkvpqervm  oeprjjiowerf wergui c uiweriu2mu[i3r 2wemu  [po23ior  34iopgti34tg 345ti,345t-0,i [po23ior  34iopgti34tg 345ti,345t-0,i
qerogpwejpiwepmkvpqervm  oeprjjiowerf wergui c uiweriu2mu[i3r 2wemu  [po23ior  34iopgti34tg 345ti,345t-0,i [po23ior  34iopgti34tg 345ti,345t-0,i
</p>
</div>
</body>
</html>

重要的CSS行:

.main { border-bottom:1px #051B42 solid; max-width:99%;max-height:195px; padding:5px; float:left; margin-bottom:1px; }
.ulclass { list-style-type:none;}
.liclassleft { margin:0 auto; border-bottom:1px #808080; font-size:20px; font-family:Tahoma, Geneva, sans-serif; padding:5px;float: left;}

我明白<marquee>标签不是我应该使用的，但除了图像的包装它的工作。
我愿意使用任何形式的替代

这是一个可能的解决方案.....

它应该可以处理任意数量的图像，但动画结束百分比可能需要根据需要进行一些小的调整。

.marqHold {
    padding: 5px 10px;
    background: #aaa;
    color: #fff;
    position: relative;
    display: block;
    margin: 20px 0;
    text-align: left;
    overflow: hidden;
    height: 135px; /* image height+padding */
  }
 .marqHold ul { 
    list-style: none; 
    padding:0; 
    margin:0; 
    position: absolute;
    white-space: nowrap;
    left: 110%; /* positions ul off screen to start */
    animation: marq 8s linear infinite; /* 8s = 8 seconds, adjust as desired */
 }
 .marqHold ul li { 
    display: inline-block;
    width: 125px;
    height: 125px;
    padding: 5px;
  }
@keyframes marq {
  from { left: 110%; }
  to { left: -200%; } /* increase/decrease to set point where animation restarts */
  }

<div class="marqHold">
<ul>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=12&bg=112255&txt=125%C3%97125&w=125&h=125" width="125" height="125" /></li>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=12&bg=112255&txt=125%C3%97125&w=125&h=125" width="125" height="125" /></li>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=12&bg=112255&txt=125%C3%97125&w=125&h=125" width="125" height="125" /></li>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=12&bg=112255&txt=125%C3%97125&w=125&h=125" width="125" height="125" /></li>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=12&bg=112255&txt=125%C3%97125&w=125&h=125" width="125" height="125" /></li>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=12&bg=112255&txt=125%C3%97125&w=125&h=125" width="125" height="125" /></li>
</ul>
</div>

向右移动:

.marqHold {
      padding: 5px 10px;
      background: #aaa;
      color: #fff;
      position: relative;
      display: block;
      margin: 20px 0;
      text-align: left;
      overflow: hidden;
      height: 135px; /* image height+padding */
  }
 .marqHold ul { 
 		list-style: none; 
		padding:0; 
		margin:0; 
  		position: absolute;
		white-space: nowrap;
 		left: -200%; /* positions ul off screen to start */
 		animation: marq 8s linear infinite;
 }
 .marqHold ul li { 
      display: inline-block;
      width: 125px;
      height: 125px;
       padding: 5px;
  }
@keyframes marq {
  from { left: -200%;
    }
  to { left: 110%; } 
  }

<div class="marqHold">
<ul>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=12&bg=112255&txt=125%C3%97125&w=125&h=125" width="125" height="125" /></li>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=12&bg=112255&txt=125%C3%97125&w=125&h=125" width="125" height="125" /></li>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=12&bg=112255&txt=125%C3%97125&w=125&h=125" width="125" height="125" /></li>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=12&bg=112255&txt=125%C3%97125&w=125&h=125" width="125" height="125" /></li>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=12&bg=112255&txt=125%C3%97125&w=125&h=125" width="125" height="125" /></li>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=12&bg=112255&txt=125%C3%97125&w=125&h=125" width="125" height="125" /></li>
</ul>
</div>

来回弹跳.....

.marqHold {
      padding: 5px 10px;
      background: #aaa;
      color: #fff;
      position: relative;
      display: block;
      margin: 20px 0;
      text-align: left;
      overflow: hidden;
      height: 135px; /* image height+padding */
  }
 .marqHold ul { 
 		list-style: none; 
		padding:0; 
		margin:0; 
  		position: absolute;
		white-space: nowrap;
 		left: -200%; /* positions ul off screen to start */
 		animation: marq 10s linear infinite;
 }
 .marqHold ul li { 
      display: inline-block;
      width: 125px;
      height: 125px;
       padding: 5px;
  }
@keyframes marq {
  0% { left: -200%;
    }
 50% { left: 110%; } 
 100% { left: -200%; } 
  }

<div class="marqHold">
<ul>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=12&bg=112255&txt=125%C3%97125&w=125&h=125" width="125" height="125" /></li>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=12&bg=112255&txt=125%C3%97125&w=125&h=125" width="125" height="125" /></li>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=12&bg=112255&txt=125%C3%97125&w=125&h=125" width="125" height="125" /></li>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=12&bg=112255&txt=125%C3%97125&w=125&h=125" width="125" height="125" /></li>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=12&bg=112255&txt=125%C3%97125&w=125&h=125" width="125" height="125" /></li>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=12&bg=112255&txt=125%C3%97125&w=125&h=125" width="125" height="125" /></li>
</ul>
</div>