Форум

Bossiks07 · #1 (**permalink**) 28.09.2016, 00:25

Сломал голову...
Не получается сделать так, чтобы список снова и снова повторялся.

Проблема в этой строке: 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>

рони · #2 (**permalink**) 28.09.2016, 00:27

Bossiks07,
а что хочешь сделать то?

Bossiks07 · #3 (**permalink**) 28.09.2016, 00:33

Сообщение от рони

Bossiks07,
а что хочешь сделать то?

Чтобы повторялось по кругу.
В данной ситуации доходит до предложения: Контроль по обеспечению безопасности виртуального пространства и личной информации. и на этом останавливается ротация.

Bossiks07 · #4 (**permalink**) 28.09.2016, 00:40

рони · #5 (**permalink**) 28.09.2016, 00:44

Bossiks07,
Бесконечная прокрутка содержимого списка(ul>li)

Bossiks07 · #6 (**permalink**) 28.09.2016, 00:55

Сообщение от рони

Bossiks07,
Бесконечная прокрутка содержимого списка(ul>li)

Спасибо!!!!

рони · #7 (**permalink**) 28.09.2016, 01:04

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>

Pavel M. · #8 (**permalink**) 29.09.2016, 17:14

анимацию, если сильно старые браузеры не нужны удобно крутить и на 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>

Форум

Справочник

Discord чат

Курсы javascript