在图像上自动幻灯片文本

Question

我有一个图像如下所示，文字写在图像的中心。

​

​

我有10个文本内容要显示在图像上，所以我需要幻灯片文本。我使用了marquee，但它不是作为幻灯片放映来的。请，任何人给我的解决方案如何幻灯片我的文字图像。

我的marquee代码

<div class="centered">
        <marquee direction="left">
            <p>Industrial IoT</p><span><a href="images/pdf/2018/Cell Tower Monitoring.pdf">Asset Management</a></span>
        </marquee>
      </div>

      <div class="centered">
        <marquee direction="left" scrolldelay="20">
            <p>Industrial IoT</p><span><a href="images/pdf/2018/Cell Tower Monitoring.pdf">Cell Tower Monitoring</a></span>
        </marquee>
      </div>

      <div class="centered">
        <marquee direction="left" scrolldelay="30">
            <p>Industrial IoT</p><span><a href="images/pdf/2018/Remote Monitoring Smart factory.pdf">Remote Monitoring Smart factory</a></span>
        </marquee>
      </div>

      <div class="centered">
        <marquee direction="left" scrolldelay="40">
            <p>Engineering Analytics</p><span><a href="images/pdf/Climate Control for Networking Laboratory.pdf">Climate Control for Networking Laboratory</a></span>
        </marquee>
      </div>

      <div class="centered">
        <marquee direction="left" scrolldelay="50">
            <p>SDN/NFV</p><span><a href="images/pdf/2018/Building SDN Compatibility in Legacy Devices for OEM.pdf">Building SDN Compatibility in Legacy Devices for OEM</a></span>
        </marquee>
      </div>

      <div class="centered">
        <marquee direction="left" scrolldelay="60">
            <p>SDN/NFV</p><span><a href="images/pdf/2018/Building Software Licensing Support for Virtual Network Functions (VNF).pdf">Building Software Licensing Support for Virtual Network Functions (VNF)</a></span>
        </marquee>
      </div>

      <div class="centered">
        <marquee direction="left" scrolldelay="70">
            <p>SDN/NFV</p><span><a href="images/pdf/2018/Building a Network Access Control (NAC) Capable SDN Controller.pdf">Building a Network Access Control (NAC) Capable SDN Controller</a></span>
        </marquee>
      </div>

      <div class="centered">
        <marquee direction="left" scrolldelay="80">
            <p>SDN/NFV</p><span><a href="images/pdf/Building a SD-WAN Solution for IoT Gateway.pdf">Building SD-WAN Solution for IoT Gateway</a></span>
        </marquee>
      </div>

      <div class="centered">
        <marquee direction="left" scrolldelay="90">
            <p>SDN/NFV</p><span><a href="images/pdf/2018/Building a SDN Controller with Zero Touch.pdf">Building a SDN Controller with Zero Touch Provisioning Capabilities</a></span>
        </marquee>
      </div>

      <div class="centered">
        <marquee direction="left" scrolldelay="10">
            <p>SDN/NFV</p><span><a href="images/pdf/2018/Enabling Network Function Virtualisation (NFV) Capabilities for OEM (1).pdf">Enabling Network Function Virtualisation (NFV) Capabilities for OEM</a></span>
        </marquee>
      </div>

提前谢谢！

Answer 1

这可能对你有帮助

​

#display 
{ 
     position:absolute; 
     visibility:show; 
}
#text
{
    color:White;
    font-size:12px;
    font-weight:bold;
    left:65%;
    top:2%;
}
marquee {
    position: absolute;
    top: 0;
}

 <div id="display">
    <img height="100" width="100" src="https://cdn.pixabay.com/photo/2018/01/28/21/14/lens-3114729_960_720.jpg" />
    <marquee id="m1" scrollamount="2" direction="up" loop="true" width="100%" heigth="100%">
    <center>
    <p id="text">
    Opening Soon !!!
    </p>
    </center>
    </marquee>
    </div>

​