javascript - 幻灯片与图库导航冲突

Question

所以我不是一个经验丰富的程序员，但我想把我的小画廊放在一起。我有一个自动幻灯片，每 7 秒更改一次图片，并且图像两侧的箭头可在幻灯片中导航。它工作正常，除了我希望 7 秒计数器在图像更改时重置，但我似乎无法弄清楚这一点。

我的 HTML 是

<div class="slide" id="slide1" style="background-image: url(images/pattern.png), url(images/header.jpg);">
    <section id="header" class="dark">
        <header>
            <h1>title</h1>
                <div>
                <div style="float: left"><a href="#" onClick="MM_showHideLayers('slide3','','show','slide2','','hide','slide1','','hide')"><img src="prevImgBtn.png"></div><div style="float: right;"><img src="nextImgBtn.png"></div>
                <div style="clear: both;">
                </div>
            <p>Description text</p>
        </header>
        <footer>
            <a href="externallink.com" target="_blank" class="button">Check out</a>
        </footer>
        <div class="arrow-wrapper"><a  class="arrow" href="#work"><img border="0" width="5%" height="5%" src="images/arrow.svg" /></a></div>
    </section>
</div>
<div class="slide" id="slide2" style="background-image: url(images/pattern.png), url(images/header2.jpg);">
    <section id="header2" class="dark">
        <header>
            <h1>Title 2</h1>
                <div>
                <div style="float: left"><a href="#" onClick="MM_showHideLayers('slide1','','show','slide2','','hide','slide3','','hide')"><img src="prevImgBtn.png"></div><div style="float: right;"><img src="nextImgBtn.png"></div>
                <div style="clear: both;">
                </div>
                <p>Description.</p>
        </header>
        <footer>
            <a href="anotherlink.com" target="_blank" class="button scrolly">Know More</a>
        </footer>
        <div class="arrow-wrapper"><a  class="arrow" href="#work"><img border="0" width="5%" height="5%" src="images/arrow.svg" /></a></div>
    </section>
</div>
<div class="slide" id="slide3" style="background-image: url(images/pattern.png), url(images/header3.jpg);">
    <section id="header2" class="dark">
        <header>
            <h1>Title 3</h1>
                <div>
                <div style="float: left"><a href="#" onClick="MM_showHideLayers('slide2','','show','slide1','','hide','slide3','','hide')"><img src="prevImgBtn.png"></div><div style="float: right;"><img src="nextImgBtn.png"></div>
                <div style="clear: both;">
                </div>
            <p>yet another description</p>
        </header>
        <footer>
            <a href="biography.html" class="button scrolly">Know More</a>
        </footer>
        <div class="arrow-wrapper"><a  class="arrow" href="#work"><img border="0" width="5%" height="5%" src="images/arrow.svg" /></a></div>
    </section>
</div>

还有 JS

</script>
<script type="text/javascript">
jQuery(function () {
    var $els = $('div[id^=slide]'),
        i = 0,
        len = $els.length;

    $els.slice(1).hide();
    setInterval(function () {
        $els.eq(i).fadeOut(function () {
            i = (i + 1) % len
            $els.eq(i).fadeIn();
        })
    }, 7000)
})
</script>
<script type="text/javascript">
function MM_showHideLayers() { //v9.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) 
  with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'block':(v=='hide')?'none':v; }
    obj.display=v; }
}
</script>

感谢您的帮助

Answer 1

将间隔分配给变量，并在图像更改时清除间隔并再次设置:

var my7sInterval = setInterval(function () {
    $els.eq(i).fadeOut(function () {
        i = (i + 1) % len
        $els.eq(i).fadeIn();
    })
}, 7000)

//on image change
clearInterval(my7sInterval);
//.. set the interval again using the above

或者...

设置一个倒计时秒数的时间间隔，并在计数达到 7 时切换。在图像更改时，您只需重置计数器即可:

var s7Timeout = 0;
setInterval(function () {
    if (s7Timeout >= 7) {
        s7Timeout = 0;
        $els.eq(i).fadeOut(function () {
            i = (i + 1) % len
            $els.eq(i).fadeIn();
        })
    } else {
        s7Timeout++;
    }
}, 1000)

//and on image change reset the counter:
s7Timeout=0;