幻灯片与图库导航冲突

Question

So I'm not an experienced coder but I wanted to put together my little gallery. I have an automatic slideshow that changes the picture every 7 seconds and arrows on each side of the image to navigate through the slides. Its working fine except I would like the 7 second counter to reset if the image is changed, and I don't seem to be able to figure that out.

My HTML is

<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>

And the 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>

Thanks for any help

Answer 1

assign the interval to a var, and on image change clear the interval and set it again:

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

or...

set an interval that will count down seconds and switch as it reaches 7 in count. and on image change you simply reset the counter:

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;