setInterval似乎加快了？

时间：2012-03-24 17:23:45

标签： jquery setinterval

我正在尝试设计我自己的图片滑块，您可以在此处查看：http://nitrous-networks.co.uk/webdev/

我正在使用setInterval来更改幻灯片，但是我注意到当动画快速点击幻灯片导航几次后，setInterval的速度似乎发生了变化。默认情况下它应该是8000毫安，但是当它再次下降到1000毫秒时无缘无故。

这里是滚动条代码的小提琴：http://jsfiddle.net/OwenMelbz/e7eEe/

HTML标记： 

<!-- Slider Start -->
<div id="slider" class="">
    <div id="slide-wrap">
    <ul>
        <li>slide 1</li>
        <li>slide 2</li>
        <li>slide 3</li>
        <li>slide 4</li>
        <li>slide 5</li>
        <li>slide 6</li>
        <li>slide 7</li>
    </ul>
    <div class="slide-controller"></div>
    </div>
</div><!-- /slider -->​

CSS 

#slide-wrap {
width:960px;
height:100%;
margin: 0 auto;
position: relative;
}
#slider {
width:100%;
height:200px;
color: white;
background-color: #000;
background-image: url('http://nitrous-networks.co.uk/webdev/images/sliderbg.png');
background-repeat: no-repeat;
background-position: center -200px;
-webkit-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 1);
position: relative;
}
#slider ul{
width:960px;
height:100%;
margin: 0 auto;
overflow: hidden;
position: relative;
}
#slider ul li {
width:960px;
height:200px;
}
.slide-controller {
position: absolute;
left: 3px;
top: 50%;
height: 150px !important;
width:20px !important;
margin-top: -75px;
border-radius: 10px;
background-color: #000;
-webkit-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 1);
background: rgb(22,22,22); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
 background:     url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE2MTYxNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ2JSIgc3RvcC1jb2xvcj0iIzBkMGQwZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzExMTExMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUzJSIgc3RvcC1jb2xvcj0iIzBhMGEwYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc2JSIgc3RvcC1jb2xvcj0iIzIzMjMyMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg3JSIgc3RvcC1jb2xvcj0iIzFlMWUxZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxYjFiMWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
 background: -moz-linear-gradient(left,  rgba(22,22,22,1) 0%, rgba(13,13,13,1) 46%,     rgba(17,17,17,1) 50%, rgba(10,10,10,1) 53%, rgba(35,35,35,1) 76%, rgba(30,30,30,1) 87%, rgba(27,27,27,1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(22,22,22,1)), color-stop(46%,rgba(13,13,13,1)), color-stop(50%,rgba(17,17,17,1)), color-stop(53%,rgba(10,10,10,1)), color-stop(76%,rgba(35,35,35,1)), color-stop(87%,rgba(30,30,30,1)), color-stop(100%,rgba(27,27,27,1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(left,  rgba(22,22,22,1) 0%,rgba(13,13,13,1) 46%,rgba(17,17,17,1) 50%,rgba(10,10,10,1) 53%,rgba(35,35,35,1) 76%,rgba(30,30,30,1) 87%,rgba(27,27,27,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(22,22,22,1) 0%,rgba(13,13,13,1) 46%,rgba(17,17,17,1) 50%,rgba(10,10,10,1) 53%,rgba(35,35,35,1) 76%,rgba(30,30,30,1) 87%,rgba(27,27,27,1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(left,  rgba(22,22,22,1) 0%,rgba(13,13,13,1) 46%,rgba(17,17,17,1) 50%,rgba(10,10,10,1) 53%,rgba(35,35,35,1) 76%,rgba(30,30,30,1) 87%,rgba(27,27,27,1) 100%); /* IE10+ */
 background: linear-gradient(left,  rgba(22,22,22,1) 0%,rgba(13,13,13,1) 46%,rgba(17,17,17,1) 50%,rgba(10,10,10,1) 53%,rgba(35,35,35,1) 76%,rgba(30,30,30,1) 87%,rgba(27,27,27,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#161616', endColorstr='#1b1b1b',GradientType=1 ); /* IE6-8 */
 }
.blip {width:10px;height:10px;border-radius:5px;margin: 0 auto;margin-top:10px;opacity:0.7;}
.blip:hover {opacity:1;cursor: pointer;}
.currentslide{opacity:1 !importantbackground: rgb(255,48,25); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMzAxOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjZjA0MDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left,  rgba(255,48,25,1) 0%, rgba(207,4,4,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,48,25,1)), color-stop(100%,rgba(207,4,4,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* IE10+ */
background: linear-gradient(left,  rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=1 ); /* IE6-8 */
}
.inactiveslide{background: rgb(226,226,226); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2UyZTJlMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2RiZGJkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2QxZDFkMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZWZlZmUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left,  rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(226,226,226,1)), color-stop(50%,rgba(219,219,219,1)), color-stop(51%,rgba(209,209,209,1)), color-stop(100%,rgba(254,254,254,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* IE10+ */
background: linear-gradient(left,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=1 ); /* IE6-8 */
}​

的Javascript 

$(document).ready(function() {

//Setup Variables
var slidecount = 1;
var slidepos = 0;
var pos = ['-1', '-1', '199', '399', '599', '799', '999', '1199'];
var slideid = 2;
//var message = 'vars setup';
var Interval;

var slideSpeed = 8000; //Milliseconds 

// Turns Slider List Objects into the Controller blips & Applied Class's
$('#slider li').each(function() {
    $('.slide-controller').append('<div data-slide="' + slidecount + '" class="blip inactiveslide"></div>');
    $(this).attr('id', 'slide-' + slidecount);
    slidecount++;
    $('.blip:first').removeClass('inactiveslide').addClass('currentslide');
    //message = 'list setup';
    //console.log(message);
});

slidecount = 1;

// Change Slide Function


function ChangeSlide(e) {
    slidepos = pos[e];
    var bgshift = slidepos * -1;
    bgshift = bgshift / 2;
    //scrolls to position
    $('#slider ul').animate({
        scrollTop: slidepos
    }, 1000);
    $('#slider').animate({
        'background-position-y': bgshift
    }, 1500);
    //remove old active button
    $('.currentslide').removeClass('currentslide').addClass('inactiveslide');
    //changes active button
    $('.blip[data-slide=' + e + ']').removeClass('inactiveslide').addClass('currentslide');
    slidepos++;
    //message = 'changeslide run! vars: slidepos='+slidepos+'';
    var message = 'rotatetimer: ' + RotateTimer + ' Interval:' + Interval + ' speed:' + slideSpeed;
    console.log(message);

}

//Controller Function
$('.blip').live('click', function() {
    slideid = $(this).attr('data-slide');
    ChangeSlide(slideid);
    //message = 'clicked! slideid:'+slideid;
    //console.log(message);
    clearInterval(Interval);
    RotateTimer = setTimeout(GoGo, slideSpeed);
});

// Auto Rotate


function Rotate() {
    var currentslide = $('.currentslide').attr('data-slide');
    var nextslide = currentslide;
    nextslide++;
    if (nextslide == "8") {
        nextslide = 1;
    }
    ChangeSlide(nextslide);
    //message = 'Rotate Run! vars: currentslide='+currentslide+' nextid='+nextslide;
    //console.log(message);
}

//Starts The Auto Rotate and Runs it Every 8 Seconds


function GoGo() {
    Interval = setInterval(Rotate, slideSpeed);
}

//Triggers the Rotate After 3 Seconds
var RotateTimer = setTimeout(GoGo, slideSpeed);
//console.log(RotateTimer);
});​

基本上我想知道为什么它会随着时间的推移而加速并且可能会得到解决！

由于

欧文

1 个答案:

答案 0 :(得分：1)

你没有clearTimeout，似乎你也错过了一些clearInterval。

我认为你的setTimeout和GoGo功能没用。

这是纠正过的js：

$(document).ready(function() {

    //Setup Variables
    var slidecount = 1;
    var slidepos = 0;
    var pos = ['-1', '-1', '199', '399', '599', '799', '999', '1199'];
    var slideid = 2;
    //var message = 'vars setup';
    var Interval;

    var slideSpeed = 8000; //Milliseconds 

    // Turns Slider List Objects into the Controller blips & Applied Class's
    $('#slider li').each(function() {
        $('.slide-controller').append('<div data-slide="' + slidecount + '" class="blip inactiveslide"></div>');
        $(this).attr('id', 'slide-' + slidecount);
        slidecount++;
        $('.blip:first').removeClass('inactiveslide').addClass('currentslide');
        //message = 'list setup';
        //console.log(message);
    });

    slidecount = 1;

    // Change Slide Function


    function ChangeSlide(e) {
        slidepos = pos[e];
        var bgshift = slidepos * -1;
        bgshift = bgshift / 2;
        //scrolls to position
        $('#slider ul').animate({
            scrollTop: slidepos
        }, 1000);
        $('#slider').animate({
            'background-position-y': bgshift
        }, 1500);
        //remove old active button
        $('.currentslide').removeClass('currentslide').addClass('inactiveslide');
        //changes active button
        $('.blip[data-slide=' + e + ']').removeClass('inactiveslide').addClass('currentslide');
        slidepos++;
        //message = 'changeslide run! vars: slidepos='+slidepos+'';
        var message = 'rotatetimer: ' + RotateTimer + ' Interval:' + Interval + ' speed:' + slideSpeed;
        console.log(message);

    }

    //Controller Function
    $('.blip').live('click', function() {
        clearInterval(Interval);
        Interval = setInterval(Rotate, slideSpeed);
        slideid = $(this).attr('data-slide');
        ChangeSlide(slideid);
        //message = 'clicked! slideid:'+slideid;
        //console.log(message);

    });

    // Auto Rotate


    function Rotate() {
        var currentslide = $('.currentslide').attr('data-slide');
        var nextslide = currentslide;
        nextslide++;
        if (nextslide == "8") {
            nextslide = 1;
        }
        ChangeSlide(nextslide);
        //message = 'Rotate Run! vars: currentslide='+currentslide+' nextid='+nextslide;
        //console.log(message);
    }

    //Starts The Auto Rotate and Runs it Every 8 Seconds

    //Triggers the Rotate After 3 Seconds
   // var RotateTimer = setTimeout(GoGo, slideSpeed);
    //console.log(RotateTimer);

Interval = setInterval(Rotate, slideSpeed);
相关问题
最新问题