Question

您好我想知道停止此滑块的功能代码是什么 http://jsfiddle.net/DLz92/1它有一个无限循环，我想在6秒内停止

西班牙语：

Hola quisiera saber como poder parar este loop infinito que tiene esta galeria： http://jsfiddle.net/DLz92/1 quiero que pare en determinado tiempo como 6 segundos。

var slideshows = function(){
var timeouts = {},
    imgs;

function preloadImages(list){ 
    var loading = list,
        img,
        loaded = {},
        newimages = [];

    var imageloaded = function(){
        // this here is one of the new Image()s we created
        // earlier; it's not the "real" image on the screen.
        // So I put the reference to the actual image it represents
        // on the screen in the rel attribute so I can use it's
        // reference; I just have to use this.rel to get it.
        var parent = this.rel.parentNode;

        // Keeping track of the individual sets loaded.
        loaded[parent.id]++;

        // Here is where this/self gets it's context from, when
        // we .call(parent, 0). It's the parentNode to the image
        // we've referenced above. This should only run once,
        // when the last image has loaded for the set.
        if (loaded[parent.id] == loading[parent.id].length) {
            animateSlideshow.call(parent, 0);
        }
    };

    var imagenotloaded = function(){
        // this.rel is the reference to the actual image we
        // have in the DOM, so we'll set the error flag on it.
        this.rel['imageerror'] = true;
        imageloaded.call(this);
    };

    for (var load in loading) {
        // loaded is equivalent to imgs.sets, so load is the
        // id for the container.
        loaded[load] = [];

        // Now we're going to loop over every image in the
        // current set, creating a Javascript image object
        // to initiate the download of the file and tell us
        // when it's finished. Not the newimages[i].rel = img
        // part.
        for (var i = 0, l = loading[load].length; i < l; i++) {
            img = loading[load][i];
            newimages[i] = new Image();
            newimages[i].onload = imageloaded;
            newimages[i].onerror = imagenotloaded;
            newimages[i].rel = img;
            newimages[i].src = img.src;
        }
    }
}

var animateSlideshow = function(current) {
    // this could be used instead of self. I was doing
    // something else at first, but making this copy
    // of the context (this) is not necessary with this
    // code. It doesn't hurt either.
    var self = this;

    // Our current context is the containing div, so
    // this.id/self.id will give us the key to the correct
    // group in imgs.sets, and the current argument will
    // tell us with image in that list we're currently
    // working with. First, we hide the last displayed
    // image.
    imgs.sets[self.id][current].style.display = 'none';

    // Increment to get the next image.
    current++;

    // If we're at the end, let's move back to the
    // beginning of the list.
    if (current >= imgs.sets[self.id].length) {
        current = 0;
    }

    // This skips images which had an error on load. The
    // test for this in the markup above is the third image
    // in rotator1, which is not an image url.
    if (imgs.sets[self.id][current].imageerror == true) {
        // See how I'm passing self using .call()? This sets
        // the context for the next animateSlideshow() call,
        // which allows this/self to work on the correct div
        // container.
        animateSlideshow.call(self, current);
        return;
    }

    imgs.sets[self.id][current].style.display = 'inline';

    // Everything is organized by the self.id key, event
    // saving the references to the timeouts.
    timeouts[self.id] = setTimeout(function(){
        animateSlideshow.call(self, current);
    }, 100);
};


function getImages(){
    var list = document.images,
        img,
        data = {sets: {}, allimages: []},
        parent;

    // document.images gives me an array of references to all
    // img elements on the page. Let's loop through and create
    // an array of the relevant img elements, keying/grouping on the 
    // parent element's id attribute.
    for (var i = 0, l = list.length; i < l; i++){
        img = list[i];
        parent = img.parentNode;

        // parent should now be a reference to the containing div
        // for the current img element. parent.id should give us
        // rotator1 or rotator2 in the demo markup.
        if (parent.className.indexOf('rotation') !== -1) {
            if (!data.sets[parent.id]) {
                data.sets[parent.id] = [];
            }

            // Let's put the img reference into the appropriate
            // imgs.sets. I also put the img.src into an index
            // container in data.allimages; this is also a remnant
            // of a previous approach I took. It could probably be
            // removed unless you need it.
            data.sets[parent.id].push(img);
            data.allimages.push(img.src);
        }
    }

    return data;
}

function initializeSlideshows(){
    imgs = getImages();

    preloadImages(imgs.sets);
}

initializeSlideshows();
};

$.onDomReady(slideshows);

Answer 1

以下是解决此问题的快捷方法。首先，添加持续时间变量！

// Add a duration variable here
var slideshows = function(){
    var timeouts = {},
        imgs,
        duration;

    /* continue with code */

在animateSlideshow回调中，检查duration并在6秒后结束循环（通过返回）：

var animateSlideshow = function(current) {     
    if (duration === undefined) {
        duration = Date.now();   
    }

    if ((Date.now() - duration) > 6000) {
        return;   
    }

    /* continue with code */

这是一个小提琴：http://jsfiddle.net/DLz92/23/

为javascript停止循环无限

1 个答案: