Динамически сменяющий друг друга текст
Здравствуйте, уважаемые форумчане!
Есть маленький сайтик на 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>
|
читайте 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>
|
Спасибо, огромное!
|
изменить шрифт и цвет текста
Здравствуйте! Пожалуйста, не гневайтесь, я абсолютный чайник, но делаю свой сайт на викс, все искала способ добавить сменяющие друг друга абзацы (рецензии на мои выступления). Приведенный выше скрипт отлично работает. Вопрос: как изменить размер шрифт и цвет текста?
Также, возможно ли было бы сделать так, чтобы после последнего текста начался первый "по кругу", и так до бесконечности? Не могли бы вы "вписать" в этот код? Огромное спасибо! |
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>
|
рони,
Из опыта, удобнее цитаты вклеить в теги <p> с общим обрамлением все скрыть, открывать нужный... Дабы пользователю не трогать скрипт, ибо при добавки в массив типично часто проблемы, с запятыми, кавычками и переносом строк |
| Часовой пояс GMT +3, время: 13:32. |