0

При наведении на квадраты картинки меняются друг за другом с помощью интервальной функции. Не могу решить 2 проблемы. 1. Функция должна запускаться только у того квадрата на который навели. 2. Функция должна останавливаться если курсор ушёл с квадрата.

Помогите додумать.

$('.block').hover(function(){
    setInterval(myFuncSuper2, 3000);
  });

    // Change pic on hover
    function changePic(i) {
        setTimeout(function () {
            jQuery(".hero-cat_" + i).addClass("active");
            jQuery(".hero-cat_" + i).siblings().removeClass("active")
        }, i * 1000)
    }
    function myFuncSuper2() {
        for (let i = 0; i <= 3; i++) {
            changePic(i);
        }
    }
.block {
  width: 100px;
  height: 100px;
  border: 1px solid;
  position: relative;
  background-image: url="https://avatars.mds.yandex.net/get-pdb/34158/e223aed5-4ea8-4e85-bb69-88e207b6c16b/s1200";
  background-size: cover; 
  cursor: pointer;
}

.block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  display: none;
}

.block img.active {
  display: inline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="block">
  <img src="https://avatars.mds.yandex.net/get-pdb/38069/39782144-fdc6-473f-b757-b8209a2e4b31/s1200"  class="hero-cat_1 active">
  <img src="https://avatars.mds.yandex.net/get-pdb/225396/aea85590-65df-49b9-b959-d14cefbd9d38/s1200"  class="hero-cat_2">
  <img src="https://avatars.mds.yandex.net/get-pdb/34158/e223aed5-4ea8-4e85-bb69-88e207b6c16b/s1200"  class="hero-cat_3">
</div>
<div class="block">
  <img src="https://avatars.mds.yandex.net/get-pdb/38069/39782144-fdc6-473f-b757-b8209a2e4b31/s1200"  class="hero-cat_1 active">
  <img src="https://avatars.mds.yandex.net/get-pdb/225396/aea85590-65df-49b9-b959-d14cefbd9d38/s1200"  class="hero-cat_2">
  <img src="https://avatars.mds.yandex.net/get-pdb/34158/e223aed5-4ea8-4e85-bb69-88e207b6c16b/s1200"  class="hero-cat_3">
</div>

2
  • А все картинки изначально точно должны быть невидимыми?) 31 мая 2019 в 15:25
  • @OPTIMUSPRIME поправил. И js поправил, немного не то было. 31 мая 2019 в 15:34

1 ответ 1

1

Вообще говоря, останавливают интервал так, через clearInterval:

var interval;

$()...on(событие.., function(){
  interval = setInterval(...);
});

$()...on(Другое_событие.., function(){
  clearInterval(interval);
});

А явная нумерация классов class_1, class_2 чаще всего бесполезна. У классов же и так есть номер (индекс), который можно использовать. В jQuery этот индекс можно указать, например, через .eq().

$('.class').eq(0) // — Первый такой класс
$('.class').eq(1) // — Второй
$('.class').eq(2) // — Третий и т.д.

В вашем же случае, код будет выглядеть примерно так (я пробовал внести минимум изменений... не получилось))) *А возможно даже просто через JS было бы легче, чем jQuery...

JsFiddle

var interval; /* Переменная, чтобы хранить/стирать интервал */
var ImgChangeTime = 2000; /* Время интервала, здесь будет удобнее менять, чем копаться в скрипте */

$('.block').on('mouseenter', function(){/* При входе мышки в блок */
  var block = $(this);/* определяем переменную == этот же блок */

  interval = setInterval(function(){
    /* Осторожно, Бобо!
    Здесь block == уже определенный элемент, в котором находится курсор
    find() — находит классы .hero_cat внутри него 
    .index помогает найти номер элемента с классом .active, среди классов .hero_cat*/
    var index = block.find('.hero_cat').index( block.find('.active') );
    
    console.clear(); console.log('Было: ' + index); /*нашли номер. Проверка*/

    /*Находим еще количество всех картинок, с классом hero_cat*/
    var imglength = block.find('.hero_cat').length;
    
    /* После каждого интервала, если найденный индекс активного класса оказывается равен 
    [количеству классов - 1] (т.е. последний) = ему некуда расти, станет = 0 */
    if( index == imglength-1){
      index = 0;
    } else { index += 1; } /* В остальных случаях, +1 на каждом круге */
    
    console.log('Стало: ' + index);

    /* Сперва удаляем все активные классы */
    block.find('.hero_cat').removeClass('active');
    /* И добавляем его ровно на нужный (следующий) элемент, через .eq(индекс) */
    block.find('.hero_cat').eq(index).addClass('active');
    
  }, ImgChangeTime);
});

$('.block').on('mouseleave', function(){
  clearInterval( interval );/* Мышка покидает блок - интервал стирается */
});
.block {
  width: 100px;
  height: 100px;
  border: 1px solid;
  position: relative;
  background-image: url("https://avatars.mds.yandex.net/get-pdb/34158/e223aed5-4ea8-4e85-bb69-88e207b6c16b/s1200");
  background-size: cover; 
  cursor: pointer;
}

.block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  display: none;
}

.block img.active {
  display: inline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="block">
  <img class="hero_cat active" src="https://avatars.mds.yandex.net/get-pdb/38069/39782144-fdc6-473f-b757-b8209a2e4b31/s1200">
  <img class="hero_cat" src="https://avatars.mds.yandex.net/get-pdb/225396/aea85590-65df-49b9-b959-d14cefbd9d38/s1200">
  <img class="hero_cat" src="https://avatars.mds.yandex.net/get-pdb/34158/e223aed5-4ea8-4e85-bb69-88e207b6c16b/s1200">
</div>
<div class="block">
  <img class="hero_cat active" src="https://avatars.mds.yandex.net/get-pdb/38069/39782144-fdc6-473f-b757-b8209a2e4b31/s1200">
  <img class="hero_cat" src="https://avatars.mds.yandex.net/get-pdb/225396/aea85590-65df-49b9-b959-d14cefbd9d38/s1200">
  <img class="hero_cat" src="https://avatars.mds.yandex.net/get-pdb/34158/e223aed5-4ea8-4e85-bb69-88e207b6c16b/s1200">
</div>

P.s. на самом деле, если вам в дальнейшем нигде не нужно использовать скрытые <img> - то было бы легче все ссылки сохранить в каком-нибудь массиве, а в HTML оставить одну лишь картинку. При наведении - просто переключать его значение .src

P.s.-2: Если параллельно не используются другие библиотеки, в которых тоже может присутствовать $, то везде можно заменить слово jQuery на $. Первое - запасной вариант на случай конфликтов с другими библиотеками.

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.