文字幻灯片有效

Question

我的文字幻灯片显示有问题。我想让它滑到div的左侧，并使新文本从右侧滑动。我尝试了几个我在这里找到的例子，但没有任何效果，除了一个基本打破了页面外观的例子。这是我的设置：

<div>
    <p id="textslide"></p>
</div>

var quotes = [ "Q1", "Q2", "Q3", "Q4" ];
var i = 0;
setInterval(function() {
    $("#textslide").html(quotes[i]);
    if (i == quotes.length) {
        i = 0;
    } else {
        i++;
    }
}, 10 * 700);

有关如何制作幻灯片效果的任何想法？

Answer 1

最简单的方法是使用选框

<marquee class='marquee'></marquee>

然后您可以按如下方式编写javascript。

var quotes = ["Q1", "Q2", "Q3", "Q4"];
$.each(quotes, function(i, j) {
  $("marquee.marquee").append('<span>'+j+'</span>')
})

你甚至可以给出单独的元素（在这种情况下为span）样式

.marquee span{
  margin:10px;
}