Показать сообщение отдельно
  #3 (permalink)  
Старый 02.03.2020, 14:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,012

смена блоков с паузой при наведении курсора на родителя
imhateb,

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .banners{
       height: 100px;
       width: 200px;
       border: 4px solid #FF4500;
       border-radius: 4px;
       margin: 10px;
   }

   .banners .item{
       display: none;
        height: 100%;
   }
   .banners .item.visible{
       display:  block;
   }
   .banners .item:nth-child(1){
        background-color: #0000FF;
   }
   .banners .item:nth-child(2){
        background-color: #FF0000;
   }
   .banners .item:nth-child(3){
        background-color: #808080;
   }
   .banners .item:nth-child(4){
        background-color: #FFFF00;
   }
   .banners .item:nth-child(5){
        background-color: #FF00FF;
   }


  </style>
   <script>
 document.addEventListener( "DOMContentLoaded" , function() {
 const pause = 1200;
 const pauseItem = ({timer}) => clearTimeout(timer);
 const showItem = banner => {
 pauseItem(banner);
 const children  = banner.children;
 const len = children.length;
 let index = [...children].indexOf(banner.querySelector(".visible")|| banner.lastElementChild);
 children[index].classList.remove("visible");
 index = ++index % len;
 children[index].classList.add("visible");
 banner.timer = setTimeout(showItem.bind(null, banner), pause);
 };
 for( const banner of document.querySelectorAll(".banners")) {
 banner.addEventListener("mouseleave", showItem.bind(null, banner));
 banner.addEventListener("mouseenter", pauseItem.bind(null, banner));
 showItem(banner);
 };
 });
  </script>
</head>
<body>
<div class="banners">
    <div class="item">01</div>
    <div class="item">02</div>
    <div class="item">03</div>
    <div class="item">04</div>
    <div class="item">05</div>
</div>
<div class="banners">
    <div class="item">01</div>
    <div class="item">02</div>
    <div class="item">03</div>
    <div class="item">04</div>
    <div class="item">05</div>
</div>
<div class="banners">
    <div class="item">01</div>
    <div class="item">02</div>
    <div class="item">03</div>
    <div class="item">04</div>
    <div class="item">05</div>
</div>

</body>
</html>
Ответить с цитированием