javascript - 以循环顺序显示多个信息 JQuery - Flapper

Question

我正在使用 JQuery 插件 Flapper 来显示多个名称，使用单个 input 元素来创建分瓣显示的效果，如火车站等中使用的效果。

我的代码使用切换，我猜它只允许两个选项。我需要能够显示至少 3 个名称，可能更多。

我是 Javascript 新手，一直在搜索，但无法弄清楚这个问题。下面是我正在使用的代码。

html

<div class="display">
   <input class="header light S" id="header_display" />
</div>

Javascript

var $header_display = $('#header_display');
           $header_display.flapper({
               width: 16
           });

           setTimeout(function(){
               $header_display.val('INITIAL NAME').change();

               var toggle = false;
           setInterval(function(){
                   if (toggle) {
                       $header_display.val('FIRST NAME').change();          
                   } else {
                       $header_display.val('SECOND NAME').change();          
                   }
                   toggle = !toggle;
               }, 8000);
           }, 700);

Answer 1

我设法回答了我自己的问题，我需要创建一个数组，然后逐一循环它。代码来自setInterval with an Array ，特别是 AlienWebguy 的回答使我能够实现它。

html 保持不变，但编辑后的 ​​Javascript 如下。

var $header_display = $('#header_display');
            $header_display.flapper({
                width: 16,
            });


            setTimeout(function(){
                $header_display.val('INITIAL NAME').change();

              var arr1 =['SECOND NAME', 'THIRD NAME', 'FOURTH NAME', 'INITIAL NAME'];
              var nameIndex = 0;
            setInterval(function(){
                $header_display.val(arr1[nameIndex++]).change();
                if (nameIndex == arr1.length)
                nameIndex = 0

              }, 8000);
            }, 900);