Форум

barakuda · #1 (**permalink**) 12.04.2016, 23:38

Ребят есть 4 блока в ряд, которые состоят просто из текста!
задача состоит в том, что нужно написать скрипт, чтобы этим текстовым блокам давался красный бекграуд каждому по очереди через каждые три секунды, что то на подобии автоматического слайдера, но если наводишь мышкой, то этот процесс останавливается!!
То есть у блоков нет бг, просто белый фон, но через каждые три секунды каждому по очереди дается красный бг, тоесть выделяем их, но если навести мышкой, стоп процесс!
ПОМОГИТЕ СРОЧНО!!!

СПАСИБО

Decode · #2 (**permalink**) 13.04.2016, 03:25

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

но если наводишь мышкой, то этот процесс останавливается!!

А если отводишь? Продолжается?

barakuda · #3 (**permalink**) 13.04.2016, 11:49

да да))

рони · #4 (**permalink**) 13.04.2016, 11:50

barakuda,
вы бы хоть минимальный html написали.
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

barakuda · #5 (**permalink**) 13.04.2016, 12:03

<div class="sc-4-content">
<h1 class="head"><span>ГАРАНТИЯ НАДЕЖНОСТИ</span>
<br>СВАЙ НАШЕГО ЗАВОДА</h1>
<div class="row">
<div class="col">
Усиленный винт сваи и
<br> удлиненный конус
<div class="bottom">
УЛУЧШЕННАЯ
<br>КОНСТРУКЦИЯ
</div>
</div>
<div class="col">
Отборная труба
<br> категории «В».
<br> Метал лопасти
<br> высочайшего качества
<br> ГОСТ 10704-91
<div class="bottom">ВЫСОКОЕ КАЧЕСТВО
<br> МАТЕРИАЛОВ
</div>
</div>
<div class="col">
Усиленные
<br> сварные швы, за счет
<br> полуавтоматизированной
<br> линии производства и
<br> сварочного оборудования
<br> "KEMPPI FASTMIG 300".
<br> Газо-сващики 4-5 разряда
<div class="bottom">НАДЕЖНЫЕ
<br> СВАРНЫЕ ШВЫ</div>
</div>
<div class="col">
<div class="box-red">
<div class="title">
Эпоксидное покрытие,
<br> стойкое к воздействию
<br> влаги, устойчиво к
<br> изменению температуры
<br> и защищает от
<br> коррозии.
</div>
<div class="bottom">
ИЗНОСОСТОЙНОЕ
<br> ПОКРЫТИЕ
</div>
</div>
</div>
</div>
</div>

Вот код!
.sc-4 .col:nth-child(1), .sc-4 .col:nth-child(2), .sc-4 .col:nth-child(3) {
width: 24.25%;
position: relative;
min-height: 360px;
}
.sc-4 .col .bottom {
position: absolute;
top: 267px;
font-family: 'Conv_ProximaNova-Bold';
text-transform: uppercase;
text-align: center;
width: 100%;
left: -2px;
line-height: 1.3;
}
.sc-4 .col:nth-child(4) {
width: 26.1%;
}
.box-red {
background-color: #c31b2a;
min-height: 397px;
margin-left: 0;
margin-top: -52px;
max-width: 244px;
margin: -52px auto 0 auto;
}
.box-red .title {
font-size: 18px;
color: #fff;
font-family: 'PragmaticaExtraLight';
padding-top: 50px;
}
.box-red .bottom {
font-size: 18px;
color: #fff;
text-transform: uppercase;
margin-top: 52px;
}
.box-red .bottom:before {
position: absolute;
width: 72px;
height: 72px;
background-color: #fff;
border-radius: 50%;
content: "";
top: -92px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
вот минимальные стили!!

рони · #6 (**permalink**) 13.04.2016, 12:26

barakuda,

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

читайте http://javascript.ru/formatting.

Decode · #7 (**permalink**) 13.04.2016, 17:04

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
    .wrap {
      margin-top: 100px;
    }
    
    .item {
      padding: 10px;
      border: 2px solid red;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <span class="item">Item 1</span>
    <span class="item">Item 2</span>
    <span class="item">Item 3</span>
    <span class="item">Item 4</span>
  </div>
  
  <script>
    var divElem = document.querySelector('.wrap'),
        spanElems = [].slice.call( document.querySelectorAll('.item') ),
        isOverElem, cX, cY, pX, pY, cTime, pTime, sensitivity = 0.1,
        i = 0, timer, prev;
    
    function foo() {
      spanElems[prev || 0].style.background = '';

      spanElems[prev = i % spanElems.length, i++ % spanElems.length].style.background = 'red';
    
      timer = setTimeout(foo, 3000);
    };
    
    foo();
    
    divElem.addEventListener('mouseover', function(event) {
      if (isOverElem) return;
    
      isOverElem = true;
    
      pX = event.pageX;
      pY = event.pageY;
      pTime = Date.now();
    
      this.addEventListener('mousemove', move);
    });
    
    divElem.addEventListener('mouseout', function(event) {
      if ( event.relatedTarget && !this.contains(event.relatedTarget) ) {
        isOverElem = false;
    
        this.removeEventListener('mousemove', move);
    
        if (isHover) {
          foo();
          isHover = false;
        }
      }
    });
    
    function move(event) {
      var speed;
    
      cX = event.pageX;
      cY = event.pageY;
      cTime = Date.now();
    
      if (pTime == cTime) return;
    
      speed = Math.sqrt( Math.pow(pX - cX, 2) + Math.pow(pY - cY, 2) ) / (cTime - pTime);
    
      if (speed < sensitivity) {
        divElem.removeEventListener("mousemove", move);
        isHover = true;
        clearInterval(timer);
      } else {
        setTimeout(function() {
          pX = cX;
          pY = cY;
          pTime = cTime;
        }, 10);
      }
    }
  </script>
</body>
</html>

Dilettante_Pro · #8 (**permalink**) 13.04.2016, 18:15

Вариант с setInterval

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style>
    .wrap {
      margin-top: 100px;
      float: left
    }
    
    .item {
      padding: 10px;
      border: 2px solid red;
    }
   </style>
 </head>
<body>
  <div class="wrap">
    <span class="item">Item 1</span>
    <span class="item">Item 2</span>
    <span class="item">Item 3</span>
    <span class="item">Item 4</span>
  </div>
   <script>
       var divElem = document.querySelector('.wrap'),
           spanElems = [].slice.call(document.querySelectorAll('.item')),
           i = 0, prev = 0;
       function changeSpanColor() {
           spanElems[prev || 0].style.background = '';
           spanElems[prev = i % spanElems.length, i++ % spanElems.length].style.background = 'red';
       };
       var intervalID = window.setInterval(changeSpanColor, 3000);
       divElem.addEventListener('mouseover', function (event) {
          clearInterval(intervalID);
      });
      divElem.addEventListener('mouseout', function (event) {
          intervalID = window.setInterval(changeSpanColor, 3000);
      });
  </script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript