如何将多个内容依次显示为选框？第二个内容应该需要一些时间才能显示

Posted 2023-03-06

【中文标题】如何将多个内容依次显示为选框？第二个内容应该需要一些时间才能显示

【英文标题】：How to display multiple contents as marquee one after another? Second content should take some time to display

【发布时间】：2018-08-29 03:44:05

【问题描述】：

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

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

【问题讨论】：

您可以使用 javascript 吗？字幕标签早已死去。

好的。

太棒了。我将添加 JavaScript 和 jQuery 标签。

如果我的回答至少在一定程度上有所帮助，请告诉我。

【参考方案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>

【参考方案2】：

您可以使用这种方式，无需选取框，基于 jquery 队列并为您的元素添加一个 css 类：

$(function () 
var current_button = 0;

$('div.slider .slide:first')
       .show(100)
       .addClass('active');

setInterval(function() 
   if(current_button===$('.slide').length) 
       $('div.slider .slide:first')
       .show(100)
       .addClass('active');
       current_button=0;
    else 
     $('div.slider .slide')
     .hide(100)
     .removeClass('active');
     
     $('div.slider .slide:eq(' + current_button + ')')
      .show(100)
      .addClass('active');

     current_button++;
   
,3500)
);

.slide 
  float: left;
  transform: translateX(400%);
  transition: all 7s;


.active 
  transform: translateX(-350%);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="slider">
  <div class="slide">Label 1 content here</div>
  <div class="slide">Label 2 content here</div>
</div>

编辑：我认为有更好的方法，但我在上面的代码中尝试了一个解决方案。

希望对你有帮助

【讨论】：

谢谢@ufollettu，我可以连续显示内容吗？现在内容只显示一次。

@Dennis 我尝试使用插件解决方法。不是更好的方法，而是一种方法......

【参考方案3】：

不要使用<marquee> 和<label> 标签（你不应该在这种情况下使用），请尝试以这种方式使用JavaScript：

$(function () 
  $(".slider .slide").hide();
  $(".slider .slide:first").fadeIn().delay(10000).fadeOut(function () 
    $(this).next().fadeIn();
  );
  setInterval(function () 
    $(".slider .slide:first").fadeIn().delay(10000).fadeOut(function () 
      $(this).next().fadeIn();
    );
  , 20000);
);

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div class="slider">
  <div class="slide"><marquee>Label 1 content here</marquee></div>
  <div class="slide"><marquee>Label 2 content here</marquee></div>
</div>

以上只是对您可能喜欢的内容的简单演示。如果您需要对此进行更多改进，请告诉我。 ☺

【讨论】：

嗨@Praveen，我只是希望内容应该从右向左移动，是否可以使用jquery ....？

@Dennis 是的，没有。我会使用我们的经典字幕。让我更新答案。

@Dennis 已更新。检查。

谢谢@Praveen，内容应该一个接一个地连续显示.....！

@Dennis 让我们把它放在一个循环中！ setInterval()FTW。