javascript - Comment appeler un minuteur dans une variable stockée dans un carrousel JS

Question

(function(){
    var timer = null;
    
    hSlider();
    function hSlider() {    
        // 通过数组来控制slider内容切换
        var imgadr = ['images/banner_2.jpg', 'images/banner_3.jpg', 'images/banner_1.jpg'],
          headArray = ['Second Heading', 'Third Heading','First Heading'],
          paraArray = ['First paragraph is awesome!', 'Second paragraph goes here!',
            'Third paragraph for you'
          ],
          slider = document.getElementById('slider'),
          next = document.getElementById('prev'),
          prev = document.getElementById('next'),
          iNow = i = 0;
    
        // 获取slider作为画布,再通过改变数组来修改背景,标题和段落
        function _bg(iNow) {
          slider.style.background = "url(\'" + imgadr[i] + "\') no-repeat center /cover";
          document.getElementById('sliderHeader').innerHTML = headArray[i];
          document.getElementById('sliderPara').innerHTML = paraArray[i];
        }
    
        // 自动循环
        timer = setInterval(function() {
          _bg(iNow);
    
          // 定时器每调动一次,自加一实现切换效果
          i++;
          if (i == imgadr.length)
            i = 0;
    
        }, 3500);
    
        // 上一页
        prev.onclick = function() {
          _bg(iNow);
          clearInterval(timer);
    
          i--;
          if (i == -1)
            i = imgadr.length - 1;
        }
    
        // 下一页
        next.onclick = function() {
          _bg(iNow);
          clearInterval(timer);
    
          i++;
          if (i == imgadr.length)
            i = 0;
         // setInterval(timer); 没有效果
        }
      }
}

La raison est que j'ai récemment voulu implémenter une fonction carrousel plein écran, puis j'ai interrogé beaucoup d'informations et référencé les codes de nombreux sites Web. Ensuite, j'ai découvert que la plupart d'entre eux étaient des codes obscurcis... Je ne pouvais pas. comprenez-les. Ensuite, j'en ai créé une native. Une simple image de carrousel. Il doit y avoir beaucoup de problèmes en raison de la mauvaise base de js. J'espère que les gens de Dalao pourront signaler mes erreurs
Le principe est d'utiliser le slider comme un canevas. Vous pouvez contrôler la commutation de l'arrière-plan et du texte du paragraphe via un tableau et définir une boucle de minuterie. Chaque fois que le tableau de boucles i++ fonctionne comme un carrousel, une fois le contrôleur cliqué, "i++" ou "i--" contrôle le haut. et les pages inférieures. Lorsque je clique dessus, je souhaite effacer la minuterie, puis effectuer l'effet d'en ajouter une à la page, puis la rajouter à l'appareil.
Voici donc la question : j'ai stocké la minuterie dans un. variable, alors comment puis-je l'appeler à nouveau ?
Vous pouvez également la mettre dans une fonction et l'appeler à nouveau, mais cela ne fait-il pas du bien... ?

Answer 1

Comme ça, je pense que setTimeout est plus facile à contrôler que setInterval :

var timer;
function loop(){
    timer = setTimeout(function() {
        _bg(iNow);
          // 定时器每调动一次,自加一实现切换效果
          i++;
          if (i == imgadr.length)
          i = 0;
          loop();
    }, 3500)
}

//清理的话只要clearTimeout(timer)就行了，然后重新调用loop