将单击导航绑定到使用间隔的更改文本

Bind a click navigation to changing text that uses an interval

本文关键字：文本 导航 单击 绑定      更新时间：2023-09-26

我有一个简单的文本滚动条，我用它来改变显示的文本。它在屏幕上的三个标语之间切换，运行良好。但是，现在我有一个请求，要求有一个click事件，允许用户在消息之间来回切换。这将是很好的，如果当我点击后退或向前的间隔，但现在我只需要创建一个向前和向后的链接，并让他们通过消息导航。有什么建议吗?

这里是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);
});

这是一把小提琴:

小提琴在这里

假设你有两个链接，ID分别为prev和next

现场演示 

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();  
});
相关文章：