Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.03.2013, 11:41
Новичок на форуме
Отправить личное сообщение для eugene111 Посмотреть профиль Найти все сообщения от eugene111
 
Регистрация: 31.03.2013
Сообщений: 2

Динамически сменяющий друг друга текст
Здравствуйте, уважаемые форумчане!

Есть маленький сайтик на html+css, на нем в заголовке есть афоризм (цитата). Стоит задача сделать так, чтобы цитат было много и они периодически сменяли друг друга, то есть при загрузке страницы появляется первая, затем после некоторого времени вторая сменяет первую, затем третья сменяет вторую и т.д. Почитав немного понял, что здесь нужны jQuery и Javascript. В общем пришел к такому варианту решения проблемы: есть функция, которая сменяет один текст на другой методом jQuery .html(), я подумал, что если например создать массив, где каждый элемент и будет цитатой, а затем в цикле просто вызвать функцию, где параметром будет элемент массива. Сама функция сменяет один текст на другой единожды, но при добавлении цикла старый текст сменяется на последний элемент массива. Также я пробовал все это делать через метод jQuery .each(), но там ситуация была несколько иная, но результата также добиться не получилось. С Javascript и jQuery никогда раньше не сталкивался поэтому прошу сильно не гневиться, и как мне кажется в данном случае я по своей неопытности где-то не до конца или полностью не понимаю логику работы jQuery и Javascript. Заранее спасибо за помощь/наводку/подсказку/вразумляющую ссылку.


<div id="elem">old text</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script> 
 function textChange(change_text){
   $('#elem').animate({'opacity':0}, 500, function(){
     $('#elem').html(change_text);
     $('#elem').animate({'opacity':1}, 500);
   })
 }

var arr = ["new text1", "new text2", "new text3", "new text4"];

 for (var i=0; i<arr.length; i++) {

textChange(arr[i]);

}

 </script>
Ответить с цитированием
  #2 (permalink)  
Старый 31.03.2013, 12:22
Аватар для Hekumok
Отправить личное сообщение для Hekumok Посмотреть профиль Найти все сообщения от Hekumok
 
Регистрация: 04.06.2012
Сообщений: 513

читайте setTimeout/setInterval
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head><body>
<div id="elem">old text</div>
<script>
function textChange(change_text) {
 $('#elem').animate({'opacity': 0}, 500, function() {
  $('#elem').html(change_text) ;
  $('#elem').animate({'opacity': 1}, 500, function() {
   if(++i==arr.length) return ;
   setTimeout(function() {
    textChange(arr[i]) ;
   }, 1000) ;
  }) ;
 }) ;
} ;
var i = 0 ;
var arr = ["new text1", "new text2", "new text3", "new text4"] ;
setTimeout(function() {textChange(arr[i]);}, 1000) ;
</script>
</body>
__________________
★ ²º¹³ ☆

Последний раз редактировалось Hekumok, 31.03.2013 в 12:30.
Ответить с цитированием
  #3 (permalink)  
Старый 31.03.2013, 12:36
Новичок на форуме
Отправить личное сообщение для eugene111 Посмотреть профиль Найти все сообщения от eugene111
 
Регистрация: 31.03.2013
Сообщений: 2

Спасибо, огромное!
Ответить с цитированием
  #4 (permalink)  
Старый 02.01.2016, 23:57
Новичок на форуме
Отправить личное сообщение для dinklin Посмотреть профиль Найти все сообщения от dinklin
 
Регистрация: 02.01.2016
Сообщений: 1

изменить шрифт и цвет текста
Здравствуйте! Пожалуйста, не гневайтесь, я абсолютный чайник, но делаю свой сайт на викс, все искала способ добавить сменяющие друг друга абзацы (рецензии на мои выступления). Приведенный выше скрипт отлично работает. Вопрос: как изменить размер шрифт и цвет текста?
Также, возможно ли было бы сделать так, чтобы после последнего текста начался первый "по кругу", и так до бесконечности?
Не могли бы вы "вписать" в этот код? Огромное спасибо!

Последний раз редактировалось dinklin, 03.01.2016 в 00:16.
Ответить с цитированием
  #5 (permalink)  
Старый 03.01.2016, 00:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,421

dinklin,
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<style type="text/css">
#elem{
   color: #006400;
   font-size: 24px;
}

</style>
</head><body>
<div id="elem">old text</div>
<script>
function textChange(change_text) {
 $('#elem').animate({'opacity': 0}, 500, function() {
  $('#elem').html(change_text) ;
  $('#elem').animate({'opacity': 1}, 500, function() {
   i = ++i % arr.length;
   setTimeout(function() {
    textChange(arr[i]) ;
   }, 1000) ;
  }) ;
 }) ;
} ;
var i = 0 ;
var arr = ["new text1", "new text2", "new text3", "new text4"] ;
setTimeout(function() {textChange(arr[i]);}, 1000) ;
</script>
</body>
Ответить с цитированием
  #6 (permalink)  
Старый 03.01.2016, 02:33
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

рони,
Из опыта, удобнее цитаты вклеить в теги <p> с общим обрамлением все скрыть, открывать нужный...
Дабы пользователю не трогать скрипт, ибо при добавки в массив типично часто проблемы, с запятыми, кавычками и переносом строк
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 18:31
Отследить клик по дочернему объекту AllanZ jQuery 3 05.09.2012 12:38
Выравнять три дива в одной строке debugx (X)HTML/CSS 9 06.10.2011 12:03
Вопрос по относительному позиционированию DIV XPOMOB (X)HTML/CSS 11 15.07.2009 17:02