在幻灯片放映中使用StopInterval（）

Andy Becker 发表于 Dev

安迪·贝克尔

我有一个幻灯片放映，每5秒钟移到下一张幻灯片。它还允许用户单击按钮以跳到特定幻灯片并继续幻灯片放映。但是，单击按钮后，它会在幻灯片上花费10秒钟而不是5秒钟。任何有关如何允许用户更改幻灯片，让它在该幻灯片上花费5秒钟然后转到下一个幻灯片的技巧都值得赞赏。

Javascript：

(function() {

    var buttons = document.querySelectorAll("#pagenation li");
    var slides = document.querySelector("#slider ul");
    var individSlides = document.querySelectorAll("#slider ul li");
    var i = 1;
    var slideHeight = document.querySelector(".slide").clientHeight;
    var myTimer = setInterval(moveSlide, 4800);


    for (var q=0; q<buttons.length; q++) {
      (function(q) {
        buttons[q].addEventListener('click', function(){
            clearInterval(myTimer);
            slides.style.top = (0 - (slideHeight*q)) + "px";
            $(buttons).removeClass("selected");
                $(buttons[q]).addClass("selected");
                i = q;
                if (i == 2){
                    i++;
                }
                myTimer = setInterval(moveSlide, 4800);
        })
      }(q));
    }

    //Move to the next slide and repeat if at the end
    function moveSlide() {
        if(i >= individSlides.length) {
            i = 0;
        }
        slides.style.top = (0 - (slideHeight*i)) + "px";
        $(buttons).removeClass("selected");
        $(buttons[i]).addClass("selected");
        i++;
    } //end MoveSlide()

})(); //end function()

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/styles.css" type="text/css">
<script src="js/jquery-2.1.1.js"></script>
</head>
<body>
    <div id="wrapper">
        <header>
            <h1>Andy's Aquatics</h1>
        </header>
        <nav>
            <ul id="mainNav">
                <li>My Tank</li>
                <li>Product Reviews</li>
                <li>Photo Gallery</li>
            </ul>
        </nav>
        <div id="slideWrapper">
            <div id="slider">
                <ul>
                    <li>
                        <img class="slide" src="images/bg.png" height="200" width="650" usemap="#slide1">
                        <map name="slide1">
                            <area shape="rect" coords="0,0,650,200" href="test.html">
                        </map>
                    </li>
                    <li>
                        <img class="slide" src="images/bg2.png" height="200" width="650"usemap="#slide2">
                        <map name="slide2">
                            <area shape="rect" coords="0,0,650,200" href="test1.html">
                        </map>
                    </li>
                    <li>
                        <img class="slide" src="images/bg3.png" height="200" width="650" usemap="#slide3">
                        <map name="slide3">
                            <area shape="rect" coords="0,0,650,200" href="test2.html">
                        </map>
                    </li>
                </ul>
            </div>
            <ul id="pagenation">
                <li class ="selected">.</li>
                <li>.</li>
                <li>.</li>
            </ul>
        </div>
    </div>

    <script src="js/script.js"></script>

</body>
</html>

CSS：

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

body {
    position: relative;
}

#mainNav li{
    display: inline-block;
    padding: 5px;
}

            /****** Slider *****/
#slideWrapper {
    width: 650px;
    height: 200px;
    display: block;
    margin: 0px auto;
}
#slider {
    float: left;
    position: relative;
    z-index: 1;
    overflow: hidden;
    width: 650px;
    height: 200px;
}

#slider ul {
    width: 650px;
    position: absolute;
    top: 0px;
}

#slider li {
    list-style: none;
    float: left;
    width: 650px;
    height: 200px;
}

#pagenation {
    position: relative;
    bottom: 80px;
    color: #FFF;
    left: 4px;
    list-style: none;
    font-size: 70px;
    font-weight: 700;
    z-index: 2;
    height: 0;
}

#pagenation li{
    cursor: pointer;
    float: left;
    padding: 6px;
    margin-right: 5px;
    text-align: center;
}

#pagenation li:hover {
    color: #666;
}

.selected {
    color: #666
}