Question

我有一个带有现成和漂亮的CSS文本的DIV，在这个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>

在此之后我们再次显示文本，依此类推

我尝试了很多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>

现在只需根据上面的选择器（在本例中为框）给你的文本框一个id，然后将代码放在html之后的脚本标签中。您可以添加或更改textArray数组中的文本。

Answer 2

您尝试使用的插件是Billboard by Brian Muenzenmeyer。它也是jQuery插件页面上的listed。只需确保下载并链接到他们的GitHub上列出的billboard-0.1.1.min.js文件，它应该可以正常工作。

DIV中的Jquery或Javascript文本旋转器

2 个答案: