如何用jQuery Flapper插件循环展示多个名称（非仅两个）

嘿，刚看了你的问题，原来的toggle逻辑确实只能在两个选项之间切换，要实现3个及以上名称的循环展示其实很简单，咱们换个思路用数组和计数器来搞定！

核心思路调整 #

原来用布尔值toggle只能在两个状态间切换，咱们改成：

• 把所有要展示的名称存到一个数组里，后续加新名字直接往数组里加就行，非常灵活
• 用一个计数器变量跟踪当前显示的是数组里的第几个元素
• 每次定时器触发时，计数器递增，通过取模运算让计数器在数组长度范围内循环，这样就不会越界啦

修改后的完整代码 #

HTML部分（和原来一致，不用改）

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

JavaScript部分

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

// 第一步：把所有要展示的名称放到数组里，想加多少加多少！
const displayNames = ['INITIAL NAME', 'FIRST NAME', 'SECOND NAME', 'THIRD NAME'];
// 第二步：初始化计数器，从第一个元素开始
let currentIndex = 0;

setTimeout(function(){
  // 先显示初始名称
  $header_display.val(displayNames[currentIndex]).change();
  currentIndex++; // 计数器往后挪一位

  setInterval(function(){
    // 用取模运算实现循环：当计数器超过数组长度时，自动回到0
    currentIndex = currentIndex % displayNames.length;
    $header_display.val(displayNames[currentIndex]).change();
    currentIndex++;
  }, 8000);
}, 700);

代码解释 #

• displayNames数组：你可以随意添加或删除名称，比如想加第五个名字，直接写成['INITIAL NAME', 'FIRST NAME', 'SECOND NAME', 'THIRD NAME', 'FIFTH NAME']就行
• currentIndex % displayNames.length：取模运算的作用是保证计数器永远在0到数组长度-1的范围内，比如数组有4个元素，当currentIndex到4时，4%4=0，就回到第一个元素，实现循环
• 初始化时先显示第一个元素，然后定时器每8秒切换一次，完美实现循环展示

这样修改后，不管你想展示3个还是10个名称，都能轻松搞定啦！

内容的提问来源于stack exchange，提问作者Michael Parkinson