2015-07-14 3 views
0

У меня есть DIV с готовым и красивым текстом CSS и внутри этого div Мне нужно показать несколько простых заметок короткие заметки без ссылок без изображений.JQuery или Javascript текст ротатор внутри 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) 
+0

Возможно, вам нужен плагин под названием billboard - вы включаете это? – Doug

ответ

0

То, что вы пытаетесь использовать не только 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>

Теперь просто дайте текстовом поле идентификатор в соответствии с выше селектором (в данном случае поле) и поместить код в теге сценария после HTML. Вы можете добавить или изменить текст в массиве textArray.

+1

Это именно то, что я ищу. Большое спасибо amigo – nonoyesyes

0

Плагин, который вы пытаетесь использовать, - Billboard by Brian Muenzenmeyer. Это также listed на странице плагина jQuery. Просто убедитесь, что вы загружаете и ссылаетесь на файл billboard-0.1.1.min.js, указанный на их GitHub, и он должен работать нормально.

Смежные вопросы