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);
});

这是一个小提琴：

The Fiddle is here

感谢任何帮助。

Answer 1

假设您有2个ID为prev 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();  
});

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

1 个答案: