Question

几周前我正在使用jQuery编写幻灯片，并对我的实现感到疑惑。我写了幻灯片，不断淡入淡出图像，但按照我编程的方式，函数递归永远不会停止。我想知道是否有更好的方法来做到这一点。当我在幻灯片显示运行时检查图像时，我的div标签中没有任何东西堆积，但是这里可能会发生一些我不知道的坏事。这是我的代码：

        var arr = new Array(3);
        arr[0] = 'http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg';
        arr[1] = 'http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg';
        arr[2] = 'http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg';
        runSlide(0);
        //The main function that runs the slide show recursively
        function runSlide(t)
        {
            $('<img src="' + arr[t] + '" class="pic" id="photo' + t + '">').appendTo('#slide').hide();  
            $('#photo' + t).fadeIn(300).delay(7000).fadeOut(500, function() {   
                if(t == (arr.length - 1)) {
                    t = 0;
                } else {
                    t++;
                }
                $('.pic').remove();
                runSlide(t);
            }); 
        }  
       <div id="slide"></div>

感谢科学

Answer 1

没关系。当你运行.remove（）时，它会完全从DOM中删除幻灯片。它们不会在您的HTML中堆叠或构建。

来自文档：

如果要删除元素本身，请使用.remove（）里面的一切。所有元素本身除了元素本身绑定事件和与元素关联的jQuery数据将被删除。

Answer 2

您可以在html中创建图像元素并切换出来源。这将减少对DOM的操纵。

var arr = new Array(3);
        arr[0] = 'http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg';
        arr[1] = 'http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg';
        arr[2] = 'http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg';

        //The main function that runs the slide show recursively

var $img = $('#img');

runSlide(0);
        //The main function that runs the slide show recursively
        function runSlide(t)
        {
            $img.attr('src',arr[t]).fadeIn(300).delay(7000).fadeOut(500, function() {   
                if(t == (arr.length - 1)) {
                    t = 0;
                } else {
                    t++;
                }
                $('.pic').remove();
                runSlide(t);
            });
        }

jQuery幻灯片显示问题

2 个答案: