带效果的文字幻灯片

Text slideshow with effect

本文关键字：文字 幻灯片      更新时间：2024-03-30

我对文本幻灯片放映有问题。我想让它滑动到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);

关于如何制作幻灯片效果，有什么想法吗？

最简单的方法是使用字幕

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