javascript - 如何将多个内容依次显示为跑马灯？第二个内容应该需要一些时间来显示

Question

我有两个不同的内容，我想在单行中将内容显示为字幕，并且内容应该一个接一个地显示，并有一些延迟时间。

<marquee direction="left">
  <label>Label 1 content here</label>
  <label>Label 2 content here</label>
</marquee>

Answer 1

这是我的解决方案，没有 <marquee>标签，现在已弃用:

//list of slides to be shown
const content = [
    'first slide',
    'second slide',
    'third slide'
];

let key = 0;
const marquee = $('.marquee');
marquee.on('animationstart', () => {
    key = 0;
    marquee.text(content[key]);
});
marquee.on('animationiteration', () => {
    key++;
    if(typeof content[key] === 'undefined') key = 0;
    marquee.text(content[key]);
});
marquee.removeClass('paused');

.marquee-container {
    width: 100vw;
    overflow: hidden;
    white-space: nowrap;
}

.marquee {
    padding-left: 100vw;
    display: inline-block;
    animation: marquee 5s linear infinite;
    animation-play-state: running;
}

.marquee.paused, .marquee-container:hover .marquee {
    animation-play-state: paused;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="marquee-container">
    <div class="marquee paused"></div>
</div>