javascript – So rufen Sie den Timer in der gespeicherten Variablen in Carousel JS auf

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); 没有效果
        }
      }
}

Der Grund dafür ist, dass ich vor kurzem eine Vollbild-Karussellfunktion implementieren wollte und dann viele Informationen abgefragt und auf die Codes vieler Websites verwiesen habe. Dann stellte ich fest, dass es sich bei den meisten um verschleierte Codes handelte ... Das ging nicht Verstehe sie. Dann habe ich selbst ein einfaches Karussellbild erstellt. Aufgrund der schlechten Grundlage von js kann ich hoffen, dass die Leute den Schieberegler als Leinwand verwenden. Sie können den Wechsel des Hintergrunds und des Absatztextes über ein Array steuern und jedes Mal eine Timer-Schleife festlegen. Das Schleifenarray i++ fungiert als Karussell. Nach dem Klicken auf den Controller steuert „i++“ oder „i--“ den oberen Teil Wenn ich darauf klicke, möchte ich den Timer löschen, dann den Effekt des Hinzufügens einer Seite zur Seite ausführen und sie dann wieder zum Timer hinzufügen.
Hier kommt also die Frage Variable, also wie rufe ich sie erneut auf?
Sie können sie auch in eine Funktion einfügen und erneut aufrufen, aber fühlt sich das nicht gut an...?

Answer 1

像这种我觉得setTimeout比setInterval更好控制：

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

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