javascript - 将点击导航绑定(bind)到使用间隔的更改文本

Question

我有一个简单的文本滚动器，用于更改显示的文本。它在屏幕上的三个口号之间切换，并且运行良好。但是，现在我请求有一个单击事件，允许用户在消息之间来回切换。如果当我单击后退或前进时间隔会很好，但现在我只需要创建一个前进和后退链接并让它们浏览消息。有什么建议吗？

这是 html:

<a href="#">Previous</a>                            
<span class="houseFontMedium txtAlg" id="sloganSwitcher"> TQuis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam</span>
<a href="#">Next</a>    

这是我正在使用的基本脚本:

$(function() {
var texts = [" Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam", "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum.", "Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet."];
var count = 0;
function changeText() {
    $("#sloganSwitcher").html(texts[count]);
    count < 3 ? count++ : count = 0;
}
setInterval(changeText, 1000);
});

这是一个 fiddle :

The Fiddle is here

感谢任何帮助。

Answer 1

假设您有 2 个 ID 为 prev 和 next 的链接

Live Demo

var texts = [
    "0 TQuis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam",
    "1 Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam", 
    "2 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum.", 
    "3 Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet."];
var count = 1,tId,maxLength=texts.length;

function nav(dir) {
  clearInterval(tId);
  count+=dir;
  if (count>=maxLength) count=0;
  if (count<0) count=maxLength-1;
  $("#sloganSwitcher").html(texts[count]);    
  init();  
}
function init() {
  tId=setInterval(function() {
    if (count>=maxLength) count=0;
      $("#sloganSwitcher").html(texts[count]);
      count++;
  }, 3000);
}
$(function() {
  $("#prev").on("click",function(e) {
    e.preventDefault();
    nav(-1);
  });
  $("#next").on("click",function(e) {
    e.preventDefault();
    nav(1);
  });
  init();  
});