Форум

eugene111 · #1 (**permalink**) 31.03.2013, 11:41

Здравствуйте, уважаемые форумчане!

Есть маленький сайтик на 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>

Hekumok · #2 (**permalink**) 31.03.2013, 12:22

читайте 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>

eugene111 · #3 (**permalink**) 31.03.2013, 12:36

Спасибо, огромное!

dinklin · #4 (**permalink**) 02.01.2016, 23:57

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

рони · #5 (**permalink**) 03.01.2016, 00:35

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>

Deff · #6 (**permalink**) 03.01.2016, 02:33

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

Форум

Справочник

Discord чат

Курсы javascript