функция повторения предложений
Сломал голову...
Не получается сделать так, чтобы список снова и снова повторялся. Проблема в этой строке: setTimeout(function() {textChange(arr[i]);}, 1000) ; ?????
function textChange(change_text) {
$('#elem').animate({'opacity': 0.2}, 4000, function() {
$('#elem').html(change_text) ;
$('#elem').animate({'opacity': 0.6}, 4000, function() {
if(++i==arr.length) return ;
setTimeout(function() {
textChange(arr[i]) ;
}, 1000) ;
}) ;
}) ;
} ;
var i = 0 ;
var arr = ["Контроль по обеспечению безопасности виртуального пространства и личной информации"] ;
setTimeout(function() {textChange(arr[i]);}, 1000) ;
<div id="elem" style="width: 50%; margin: 0 auto; text-align: center;">Мы предлагаем: Индивидуальное консультирование каждого клиента</div> |
Bossiks07,
а что хочешь сделать то? |
Цитата:
В данной ситуации доходит до предложения: Контроль по обеспечению безопасности виртуального пространства и личной информации. и на этом останавливается ротация. |
function textChange(change_text) {
$('#elem').animate({'opacity': 0.2}, 4000, function() { $('#elem').html(change_text) ; $('#elem').animate({'opacity': 0.6}, 4000, function() { if(++i==arr.length) return ; setTimeout(function() { textChange(arr[i]) ; }, 1000) ; }) ; }) ; } ; var i = 0 ; var arr = ["Контроль по обеспечению безопасности виртуального пространства и личной информации"] ; setTimeout(function() {textChange(arr[i]);}, 1000) ; var i ({repeat: true}); так получается? |
|
Цитата:
|
бесконечная смена текста
Bossiks07,
вариант на основе примера выше по ссылке ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#elem{
width: 50%; margin: 0 auto; text-align: center;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var b = ["Контроль по обеспечению безопасности виртуального пространства и личной информации",
"Мы предлагаем: Индивидуальное консультирование каждого клиента"],
c = $("#elem");
(function d(a) {
a = ++a % b.length;
c.html(b[a]).fadeIn(1000).delay(5000).fadeOut(1000, function() {
d(a)
})
})(-1)
});
</script>
</head>
<body>
<div id="elem" ></div>
</body>
</html>
|
анимацию, если сильно старые браузеры не нужны удобно крутить и на css
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes show {
from {opacity:0}
10% {opacity:1}
40% {opacity:1}
50% {opacity:0}
to {opacity:0}
}
.elem {
position: relative;
height: 100px;
}
.elem span {
animation: show 10s infinite;
position: absolute;
text-align: center;
width: 50%;
left: 25%;
top: 0;
}
.elem span:nth-child(2) {
animation-delay: -5s;
}
</style>
</head>
<body>
<div class="elem">
<span>Контроль по обеспечению безопасности виртуального пространства и личной информации</span>
<span>Мы предлагаем: Индивидуальное консультирование каждого клиента</span>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 17:58. |