jQuery 重复循环数组来更改标签属性

Question

我正在制作一个简单的滑块，它通过更改 img 标记的 src 属性和锚标记的属性来工作。这就是我到目前为止所想到的：

(function($){
    var slides = [
        'http://placehold.it/801x350',
        'http://placehold.it/802x350',
        'http://placehold.it/803x350'
    ],
    titles = [
        'Title 1',
        'Title 2',
        'Title 3'
    ],
    links =  [
        'http://test1.com',
        'http://test2.com',
        'http://test3.com'
    ],
    image = $('#stretch-img'),
    anchor = $('.featured-title>h2>a');

    var interval = setInterval(function() {
        image.attr('src', slides[0]);
        anchor.attr('href', links[0]);
        anchor.html(titles[0]);
    }, 3000);
})(jQuery);

我希望间隔能够通过简单的淡入淡出效果连续循环遍历数组。什么是最好的方法来做到这一点或任何真正做到这一点的方法，因为我没有。

谢谢！

我感谢所有的帮助。

Answer 1

要循环遍历数组，您可以设置一个当前位置变量和一个保存数组长度的变量：

var current = 0,
    length  = slides.length,
    interval = setInterval(function() {
        image.attr('src', slides[current]);
        anchor.attr('href', links[current]).html(titles[current]);

        current++;
        if (current >= length) {
            current = 0;
        }
    }, 3000);

然后要淡出，您可以淡出，更改源，然后淡入：

        image.fadeOut(500, function () {
            image.attr('src', slides[current]).fadeIn(500);
            anchor.attr('href', links[current]).html(titles[current]);

            current++;
            if (current >= length) {
                current = 0;
            }
        });

这可能会导致当 fadeIn(500) 启动时，图像未完全加载，这可以通过使用附加到 imageload 事件的事件处理程序来修复/code> 元素：

var image = $('#stretch-img').on('load', function () {
    image.fadeIn(500);
});

然后你可以删除fadeIn(500) 来自间隔函数，因为它会在图像加载时触发。每当图像源发生更改且新源完成加载时，load 事件就会触发。

请注意，.on() 是 jQuery 1.7 中的新增功能，在本例中与 .bind() 相同。