Question

我写了一个jquery插件来进行div自动滚动，我使用函数setInterval使div停止一段时间然后继续滚动。这是代码

(function($){
"use strict";
function scrolltotop(obj,height,speed){
var ch=parseInt($(obj).css("margin-top"))+29;
    $(obj).parent().find(".moving").remove();
    $(obj).after($(obj).clone().addClass("copy"));
    $(obj).addClass("moving").removeClass("copy").animate({
        "margin-top":-27
    },speed);
    loop=setInterval(function(){
        ch+=27;
        if(ch < height+27){
            $(obj).animate({
                "margin-top":-ch
            },speed,function(){
            loop;
            })      
        }else{
            clearInterval(loop);
            scrolltotop($(obj).next(".copy"),height,speed); 
        }
    },4000)
}               
$.fn.extend({ 
    autoscroll: function(options) {  
        var defaults = {  
            speed: 1000,  
            scroller : '#scroller',  
            scroller_container : '#scroller_container'  
        }    
        var options =  $.extend(defaults, options); 
        var height=$(options.scroller).height();
        var stop=stopscroll();
        //console.log(height)

        scrolltotop(options.scroller,height,options.speed);
    }, 
});  
}(jQuery));
$("#list2").autoscroll({scroller:"#list2",scroller_container:"#container_2"});

它运行良好，但是我知道如何在启动插件后使div停止滚动。

Answer 1

如果我理解你想要逐行移动div滚动的问题，请等待4s直到你到达终点。

我简化了你的scrolltotop功能

function scrolltotop(obj,height,speed){

    var ch = 0;        
    var loop = setInterval(function(){  

        ch+=27;
        $('#container_2').animate({
            scrollTop: ch
        }, speed);

        if(ch >= height){
            console.log('Out of loop');    
            clearInterval(loop);
        }

    },4000);    
}

你可以在这里看到一个有效的例子http://jsfiddle.net/jCw3y/ 也许你可以调整我的代码在你的插件中使用它。

（您正在使用“use strict”。请记住始终声明javascript变量.var loop，var ch e.t.c）

要手动停止，您可以保存intervalId并在需要时调用clearInterval。请查看此示例：http://jsfiddle.net/ccR4t/

最后，另一个纯jquery的例子。使用animate和stop函数来控制所有。

(function ($) {
    "use strict";

    function scrolltotop($container, options) {
        $container.animate({
            scrollTop: options.scrollerHeight
        }, options.speed, function () {
            console.log('Animation completed');
        });
    }

    $.fn.extend({
        autoscroll: function (options) {

            var $me = this;
            var defaults = {
                speed: 1000,
                scroller_container: '#scroller_container',
                scroller: '#list2'
            }
            var options = $.extend(defaults, options);
            options.scrollerHeight = $(options.scroller).height();

            scrolltotop($me, options);
        },
    });
}(jQuery));

$("#container_2").autoscroll({
    scroller: '#list2',
    speed: 10000
});

// stop scroll after 4 sec
setTimeout(function () {
    $('#container_2').stop();
    alert('scroll manually stopped')
}, 4000);

工作示例： http://jsfiddle.net/c8Ns8/

如何在我的jquery插件中停止Interval函数

1 个答案: