javascript - DIV 中的 Jquery 或 Javascript 文本旋转器

Question

我有一个 DIV，其中包含现成且漂亮的 CSS 文本，在这个 div 中，我需要显示一些简单的注释，没有链接，没有图像。

例子:

<div class="box-textholder">
text one: here we show text one for 5 secs
text two: here we show text twofor 5 secs
text three: here we show text three for 5 secs
</div>

在此之后我们再次显示文本 1 等等

我尝试了很多我在这里找到的 jquery 新闻行情和代码，但我无法找到或让任何人以非常简短的方式工作。几乎所有现成的脚本都很复杂，因为它们是为其他类型的功能而制作的。我需要的很简单。这是我找到的最短和最简单的代码，但无法正常工作...有什么想法吗？

<script>
        $(function(){
            $('box-textholder').billboard({messages : [


                'text one is here',
                'text two is here',
                'text three is here', 
                'text four is here'
            ]});
        });
</script>

有什么简单的方法可以做到这一点吗？我已经有 Jquery

这是插件广告牌

(function(e,t,n){"use strict";e.billboard=function(t,n){var r={messages:[],interval:5e3},i=this,s=0,o=e(t);i.settings={};var u=function(){clearTimeout(i.timerId);if(s>=i.settings.messages.length-1){s=0}else{s++}e(t).fadeOut("slow",function(){e(t).text(i.settings.messages[s])});e(t).fadeIn("slow");i.timerId=setTimeout(u,i.settings.interval)};var a=function(){o.stop().removeAttr("style");clearTimeout(i.timerId)};var f=function(){i.timerId=setTimeout(u,i.settings.interval)};i.init=function(){i.settings=e.extend({},r,n);o.on("click",function(){u()});o.hover(a,f);f()};i.init()};e.fn.billboard=function(t){return this.each(function(){if(n==e(this).data("billboard")){var r=new e.billboard(this,t);e(this).data("billboard",r)}})}})(jQuery,window)

Answer 1

您尝试使用的不仅仅是 jQuery，billboard 是一个 jQuery 插件，您需要将其包含到您的元素中才能使用它。您可以找到一些文档和下载 here .

话虽如此，我不会将它用于您的用例，因为一些简单的 javascript 可以满足您的需求。

var textArray = ['text1','text2','text3'],
    i = 0;
    setInterval(function(){
         i = i == textArray.length ? 0 : i;
         document.getElementById('box').innerHTML = textArray[i];
         i = i + 1;
    },5000);

<div id="box">text1</div>

现在只需根据上面的选择器(在本例中为 box )为您的文本框提供一个 id，并将代码放在 html 之后的脚本标记中。您可以添加或更改 textArray 数组中的文本。