Блог

Главная - Вопросы по программированию - Как сделать так, чтобы автоматическое слайд-шоу Divs останавливалось при нажатии целевой ссылки на один из слайдов

Как сделать так, чтобы автоматическое слайд-шоу Divs останавливалось при нажатии целевой ссылки на один из слайдов

#javascript #html #jquery #css

Вопрос:

У меня есть слайд-шоу из divs, которое автоматически прокручивается, но как мне сделать так, чтобы, когда я нажимаю на целевую ссылку, она ведет меня туда и останавливает цикл слайд-шоу. Более того, после нескольких циклов слайды начинают засоряться и накапливаться друг на друге, может кто-нибудь, пожалуйста, помочь исправить эту ошибку, спасибо.

Это мой текущий код:

 parent div {
    display: none;
    position: absolute;
}

#parent div:first-child {
    display: block;
}

#parent > div {
    width: 400px;
    height: 250px;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="slideshow-container" id="parent">
    <script>
        function Divs() {
            var divs = $("#parent div"),
                now = divs.filter(":visible"),
                next = now.next().length ? now.next() : divs.first(),
                speed = 1000;
            now.fadeOut(speed);
            next.fadeIn(speed);
        }
        $(function () {
            setInterval(Divs, 1400);
        });
    </script>
    <div class="box" id="food">
        <h2>hi</h2>
    </div>
    <div class="box" id="infrastructure">
        <h2>bye</h2>
    </div>
    <div class="box" id="culture">
        <h2>hi</h2>
    </div>
    <div class="box" id="nature">
        <h2>bye</h2>
    </div>
</div>

Комментарии:

1. сохраните значение, возвращенное из setInterval ( i = setInterval(...) ), и используйте его в clearInterval . ( clearInterval(i) )

2. подождите, но тогда как мне указать, что когда я нажму на ссылку, она будет использовать clearInterval,

3. использование события onClick..

Ответ №1:

Если вы зададите свой интервал переменной, вы можете направить прослушиватель событий на родительский div и по щелчку мыши сбросить таймер.

вот решение:

 const interval= setInterval(divs, 1400)

const parentContainer = document.querySelector('#parent')

parentContainer.addEventListener('click', event => {
  clearInterval(interval)
  console.log(event.target.parentNode)
})

divs(interval)

function divs() {
              var divs= $('#parent div'),
                  now = divs.filter(':visible'),
                  next = now.next().length ? now.next() : divs.first(),
                  speed = 1000;
              now.fadeOut(speed);
              next.fadeIn(speed);
          } 
 #parent div {
  display: none;
  position: absolute;
}
#parent div:first-child {
  display: block;
}

#parent > div {
  width: 400px;
  height: 250px;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slideshow-container" id="parent">
  <div class='box' id='food'>
    <h2>food</h2>
  </div>
  <div class='box' id='infrastructure'>
    <h2>infrastructure</h2>
  </div>
  <div class='box' id='culture'>
    <h2>culture</h2>
  </div>
  <div class='box' id='nature'>
    <h2>nature</h2>
  </div>
</div>

Комментарии:

1. Привет, это заставляет его зависать только при щелчке, но я хочу, чтобы при нажатии на определенную целевую ссылку он останавливался на целевом div

2. Я не совсем уверен, решит ли это проблему, но я добавил фокус в этом событии. В моем предварительном просмотре он останавливается на тексте.

3. Поэтому я добавил вам консоль. войдите в систему, и, как вы можете видеть, вы достигнете div на том, что вы нажали, и слайд остановится.

4. приятно, но есть ли способ, чтобы, если я нажму на нее еще раз, она возобновила слайд-шоу?

Метки: ,