0

提前为冗长的解释道歉。我觉得这个画得最好！:P

假设我有 10 个绝对（css）放置在彼此之上的 div。每个 div 包含几个透明的 png，它们也相互叠加，共同形成一个视觉整体。我当时只显示 1 个 div，用户可以通过单击箭头或按钮切换到下一个 div。这个箭头/按钮包含一个标签，它告诉我下一个要显示的 div，因此我通过 javascript 隐藏所有 div，然后在此之后立即显示适当的 div。

为什么在大多数浏览器中这么慢？有没有更好的方法来做这样的事情？IE 和 Firefox 似乎可以快速流畅地切换 div，而 Chrome 显示延迟。以下是 html 和 javascript 的概述：

HTML：

            <div id="div1" class="active generic">
                <img src="sample00.png" width="1000" height="564" class="a1" />
                <img src="sample01.png" width="1000" height="564" class="a2" />
                <img src="sample02.png" width="1000" height="564" class="a3" />
                <img src="sample03.png" width="1000" height="564" class="a4" />
                <img src="sample04.png" width="1000" height="564" class="a5" />
            </div>
            <div id="div2" class="generic">
                <img src="sample05.png" width="1000" height="564" class="a1" />
                <img src="sample06.png" width="1000" height="564" class="a2" />
                <img src="sample07.png" width="1000" height="564" class="a3" />
                <img src="sample08.png" width="1000" height="564" class="a4" />
                <img src="sample09.png" width="1000" height="564" class="a5" />
            </div>

等等...

Javascript：

a++;
var gen = $('.generic');
var div = $('#div' + a);
gen.hide().removeClass('activeFrame');
div.show().addClass('activeFrame');

对于任何人来说，给出更好的解决方案可能都太模糊了。但是如果有人可以向我解释为什么这在某些浏览器/低端系统上会很慢以及我如何能够解决这个问题，我可以利用这些知识自己思考一些事情（或者接受它就是这样） .

4